pushState und SEO


80

Viele Leute haben gesagt, verwenden Sie pushState anstelle von Hashbang.

Was ich nicht verstehe ist, wie würden Sie suchmaschinenfreundlich sein, ohne Hashbang zu verwenden?

Vermutlich wird Ihr pushState-Inhalt durch clientseitigen JavaScript-Code generiert.

Das Szenario ist also:

Ich bin dran example.com. Mein Benutzer klickt auf einen Link:href="example.com/blog"

pushState erfasst den Klick, aktualisiert die URL, greift von irgendwoher auf eine JSON-Datei zu und erstellt die Liste der Blog-Beiträge im Inhaltsbereich.

Bei Hashbangs weiß Google, dass es zur URL "Escape_Fragment" wechselt, um deren statischen Inhalt abzurufen.

Mit pushState sieht Google nur nichts, da es den JavaScript-Code nicht zum Laden des JSON und zum anschließenden Erstellen der Vorlage verwenden kann.

Die einzige Möglichkeit, die ich sehen kann, besteht darin, die Vorlage auf der Serverseite zu rendern. Dadurch werden jedoch die Vorteile des Verschiebens der Anwendungsschicht auf den Client vollständig zunichte gemacht.

Verstehe ich das richtig? PushState ist für clientseitige Anwendungen überhaupt nicht SEO-freundlich?


Hinweis für zukünftige Leser: Diese Frage ist veraltet . Lesen Sie die offizielle Google-Erklärung - kurz gesagt, Googlebot unterstützt jetzt JS.
Mik01aj

Antworten:


17

Was ist mit der Verwendung des Meta-Tags, das Google für diejenigen vorschlägt, die keine Hash-Bangs in ihren URLs möchten: <meta name="fragment" content="!">

Weitere Informationen finden Sie hier: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

Leider glaube ich nicht, dass Nicole das Problem geklärt hat, von dem ich dachte, dass es das OP hat. Das Problem ist einfach, dass wir nicht wissen, wem wir Inhalte bereitstellen, wenn wir den Hash-Bang nicht verwenden. Pushstate löst dies nicht für uns. Wir möchten nicht, dass Suchmaschinen Endbenutzern sagen, dass sie zu einer URL navigieren sollen, die unformatierten JSON ausspuckt. Stattdessen erstellen wir URLs (die andere Aufrufe von mehr URLs auslösen), die Daten über AJAX abrufen und dem Benutzer auf die von uns bevorzugte Weise präsentieren. Wenn der Benutzer kein Mensch ist, können wir alternativ einen HTML-Snapshot bereitstellen, damit Suchmaschinen menschliche Benutzer ordnungsgemäß auf die URL leiten können, unter der sie die angeforderten Daten erwarten würden (und auf vorzeigbare Weise). Die ultimative Herausforderung besteht jedoch darin, wie wir den Benutzertyp bestimmen. Ja, wir können möglicherweise verwenden. htaccess oder etwas zum Umschreiben der URL für Suchmaschinen-Bots, die wir erkennen, aber ich bin mir nicht sicher, wie vollständig und zukunftssicher dies ist. Es ist auch möglich, dass Google Menschen dafür bestraft, aber ich habe es nicht vollständig untersucht. Die Kombination (Pushstate + Googles Meta-Tag) scheint also eine wahrscheinliche Lösung zu sein.


3
@ NickC, Ok, ich verstehe, also denke ich jetzt, dass eine bessere Lösung darin besteht, den Inhalt zunächst ohne JS anzuzeigen. Am oberen Rand Ihres JS (nachdem die Seite geladen und dom-fähig ist) wird sofort Code ausgeführt, um den ursprünglich angezeigten HTML-Inhalt auszublenden oder durch die JS-Erweiterung zu ersetzen. Zum Beispiel verwende ich jquery-Datagrids, also würde ich zuerst eine HTML-Tabelle anzeigen und dann die JS sofort laden, um die normalen Tabellendaten, die in der JS-Grid-Version angezeigt werden, zu transformieren / auszublenden / zu ersetzen. Ab diesem Zeitpunkt können alle anderen Ajax-Anforderungen als JSON zusammen mit der über Pushstate aktualisierten URL bereitgestellt werden.
Programmierer

Wie ist Ihre Erfahrung mit der von Ihnen vorgeschlagenen Lösung? Hat Google diesen "temporären" HTML-Code indiziert? Wird es in der entsprechenden Google-Suche richtig angezeigt? Bedeutet das nicht auch, dass die Erfahrung ein wenig "nervös" ist, da die anfängliche HTML-Seite mit von JS generiertem HTML "aktualisiert" wird?
Nilesh Kale

@NileshKale Hier ist die Lösung, die ich ausgearbeitet habe und die den Job sehr gut erledigt : stackoverflow.com/questions/22824991/… . Ich übergebe einfach eine HTML-Tabelle und auch jqgrid mit dem JSON-Äquivalent (zu dem, was im HTML enthalten ist). SEO liest den HTML-Code und der Benutzer erhält eine verbesserte Erfahrung und alle nachfolgenden Anfragen über Ajax. Mit Pushstate kann ich die URL basierend darauf aktualisieren, wie der Benutzer das Raster sortiert / blättert (ohne einen Hashbang zu benötigen). Auf diese Weise kann der Benutzer die URL speichern und zu denselben Ergebnissen zurückkehren.
Programmierer

Ich werde in ein paar Tagen versuchen, meine Antwort zu bearbeiten, um sie besser zu erklären.
Programmierer

1
Das AJAX-Crawling-Schema ist jetzt veraltet: developer.google.com/webmasters/ajax-crawling/docs/… . Es wird empfohlen, Websites zu ändern, die es verwenden: plus.google.com/+JohnMueller/posts/LT4fU7kFB8W
Protector am

97

Ist pushStateschlecht, wenn Sie Suchmaschinen benötigen, um Ihre Inhalte zu lesen?

Nein, das Gespräch pushStateist darauf ausgerichtet, den gleichen allgemeinen Prozess für Hashbangs durchzuführen, jedoch mit besser aussehenden URLs. Überlegen Sie, was wirklich passiert, wenn Sie Hashbangs verwenden ...

Du sagst:

Bei Hashbangs weiß Google, dass es zur URL "Escape_Fragment" geht, um deren statischen Inhalt abzurufen.

Mit anderen Worten,

  1. Google sieht einen Link zu example.com/#!/blog
  2. Google-Anfragen example.com/?_escaped_fragment_=/blog
  3. Sie geben eine Momentaufnahme des Inhalts zurück, den der Benutzer sehen sollte

Wie Sie sehen können, hängt es bereits vom Server ab. Wenn Sie keinen Snapshot des Inhalts vom Server bereitstellen, wird Ihre Site nicht ordnungsgemäß indiziert.

Wie wird Google mit pushState etwas sehen?

Mit pushState sieht Google einfach nichts, da es das Javascript nicht zum Laden des JSON und zum anschließenden Erstellen der Vorlage verwenden kann.

Tatsächlich wird Google sehen, was es anfordern kann site.com/blog. Eine URL verweist weiterhin auf eine Ressource auf dem Server, und Clients halten sich weiterhin an diesen Vertrag. Natürlich für moderne Kunden hat Javascript neue Möglichkeiten für die Beschaffung und die Interaktion mit Inhalten ohne geöffnet Seite erneuern, aber die Verträge sind die gleichen.

Die beabsichtigte Eleganz von pushStateist, dass es allen Benutzern, alten und neuen, JS-fähigen und nicht JS-fähigen Inhalten den gleichen Inhalt bietet, aber die neuen Benutzer erhalten eine verbesserte Erfahrung .

Wie bringt man Google dazu, Ihre Inhalte zu sehen?

  1. Der Facebook-Ansatz: Stellen Sie denselben Inhalt unter der URL bereit site.com/blog, in die sich Ihre Client-App verwandeln würde, wenn Sie /blogauf den Status klicken. (Facebook verwendet noch pushStatenicht, dass ich weiß, aber sie tun dies mit Hashbangs)

  2. Der Twitter-Ansatz - Leiten Sie alle eingehenden URLs zum Hashbang-Äquivalent um. Mit anderen Worten, ein Link zu "/ blog" drängt /blogauf den Staat. Wenn es jedoch direkt angefordert wird, landet der Browser bei #!/blog. (Bei Googlebot wird dies dann _escaped_fragment_wie gewünscht weitergeleitet. Bei anderen Clients können Sie pushStatezur hübschen URL zurückkehren.)

Verlierst du also die _escaped_fragment_Fähigkeit mit pushState?

In ein paar verschiedenen Kommentaren haben Sie gesagt

entkommenes Fragment ist völlig anders. Sie können reine, nicht gedachte Inhalte und zwischengespeicherte Inhalte bereitstellen und dürfen nicht unter die Last gestellt werden, die normale Seiten haben.

Die ideale Lösung besteht darin, dass Google entweder JavaScript-Websites erstellt oder eine Methode implementiert, um zu wissen, dass selbst für Pushstate-Websites (robots.txt?) Eine URL mit Escapezeichen vorhanden ist.

Die von Ihnen genannten Vorteile sind nicht isoliert _escaped_fragment_. Dass es das Umschreiben für Sie erledigt und einen speziell benannten GETParameter verwendet, ist wirklich ein Implementierungsdetail. Es gibt nichts wirklich Besonderes, dass Sie nicht mit Standard - URLs tun können - mit anderen Worten umschreiben /blogzu /?content=/blogauf eigene Faust mit mod_rewrite oder Ihrem Server gleichwertig.

Was ist, wenn Sie überhaupt keine serverseitigen Inhalte bereitstellen?

Wenn Sie URLs nicht umschreiben und keine Inhalte bereitstellen können /blog(oder in welchem ​​Status auch immer Sie sie in den Browser verschoben haben), hält sich Ihr Server wirklich nicht mehr an den HTTP-Vertrag.

Dies ist wichtig, da beim erneuten Laden einer Seite (aus welchem ​​Grund auch immer) Inhalte unter dieser URL abgerufen werden. (Siehe https://wiki.mozilla.org/Firefox_3.6/PushState_Security_Review - "View-Source und Reload rufen beide den Inhalt am neuen URI ab, wenn einer gedrückt wurde.")

Es ist nicht so, dass das einmalige Zeichnen von Benutzeroberflächen auf der Clientseite und das Laden von Inhalten über JS-APIs ein schlechtes Ziel ist. Es ist nur so, dass es nicht wirklich mit HTTP und URLs berücksichtigt wird und im Grunde nicht abwärtskompatibel ist.

Im Moment ist dies genau das, wofür Hashbangs gedacht sind - um unterschiedliche Seitenzustände darzustellen, die auf dem Client und nicht auf dem Server navigiert werden. Beim erneuten Laden wird beispielsweise dieselbe Ressource geladen, die dann den Hash-Wert lesen, analysieren und verarbeiten kann.

Es ist einfach so, dass sie auch verwendet wurden (insbesondere von Facebook und Twitter), um den Verlauf ohne Seitenaktualisierung in einen serverseitigen Speicherort zu ändern. In diesen Anwendungsfällen empfehlen die Benutzer, Hashbangs für pushState aufzugeben.

Wenn Sie alle Inhalte clientseitig rendern, sollten Sie dies pushStateals Teil einer bequemeren Verlaufs-API betrachten und nicht als Ausweg aus der Verwendung von Hashbangs.


3
@ Harry - Hast du den Rest meiner Antwort gelesen? Eine URL ist eine URL, dh ein Ressourcen-Locator. Glaubt der Server, dass Inhalte bei existieren site.com/blog? Wenn nicht, dann ist es für Suchmaschinen nicht vorhanden. Der Zweck von pushStateist nicht, das zu umgehen. Es ist für die Bequemlichkeit. Hashbangs beheben dies ebenfalls nicht und stellen _escaped_fragment_eine komplizierte Problemumgehung dar, bei der der Server immer noch einen Snapshot des von JS generierten Inhalts hat (wie Sie sagen, von normalen Benutzern gesehen). pushStatevereinfacht dies alles.
Nicole

1
@Harry - Bis URLs so konzipiert sind, dass sie clientseitigen Inhalt bereitstellen, verweisen sie immer noch auf eine Ressource auf dem Server, und Clients behandeln sie auf diese Weise, einschließlich Bots. Es bedeutet nicht, dass Ihr Ziel, so viel wie möglich auf dem Client zu tun, ungültig ist, aber vorerst muss es möglicherweise mit (hässlichen) Hashbangs erreicht werden. Ich habe meine Antwort für Ihren Anwendungsfall aktualisiert.
Nicole

1
@Harry Zunächst einmal gehe ich nur von dem aus, wofür Google sagt, dass sie es tun _escaped_fragment_, und ich weiß nicht, was Sie speziell tun. Nach den Aussagen von Google gehe ich jedoch davon aus, dass Sie Inhalte vom Server bereitstellen müssen , wenn Sie diesen Abfrageparameter sehen. In Ihrem Fall würde es einige Tricks erfordern, aber Sie könnten Inhalte oder etwas anderes bereitstellen und dann JS die gewünschte Seite erstellen lassen. Oder Sie könnten versuchen, Bots zu erkennen und absichtlich ganz andere Inhalte bereitzustellen. <noscript>/blog
Nicole

2
Wieder einmal wird die richtige und beste Antwort nicht als richtig ausgewählt ... schlecht, schlecht.

1
Wenn ich einen Link wie: habe <a href="product/productName" onclick="showProduct(product)">A product</a>und der Onclick mit " preventDefault()" beginnt , lädt AJAXly den neuen Inhalt über das Produkt auf die Seite und ich stelle sicher, dass der Link "... / product / productName" eine Version von lädt Die Seite, auf der der spezifische Produktinhalt in die Antwort des Servers aufgenommen wird. Die Website funktioniert also weiterhin dynamisch, verfügt aber auch weiterhin über statischen Inhalt, wenn Sie direkt zu einem Produktlink gehen. Keine Notwendigkeit für PushState oder Hashbang auf diese Weise, nein?
Yuval A.

1

Alle interessanten Gespräche über pushState und #!, und ich kann immer noch nicht sehen, wie pushState den Zweck von #! Ersetzt, wie es das Originalplakat verlangt.

Unsere Lösung, um unsere zu 99% JavaScript-basierte Ajax-Site / -Anwendung SEO-fähig zu machen, verwendet #!natürlich. Da das Rendern des Clients über HTML, JavaScript und PHP erfolgt, verwenden wir die folgende Logik in einem Loader, der von unserer Seitenlandung gesteuert wird. Die HTML-Dateien sind vollständig von JavaScript und PHP getrennt, da wir in beiden (größtenteils) dasselbe HTML wollen. JavaScript und PHP machen meistens dasselbe, aber der PHP-Code ist weniger kompliziert, da JavaScript eine viel reichhaltigere Benutzererfahrung bietet.

Das JavaScript verwendet jQuery, um den gewünschten Inhalt in HTML einzufügen. PHP verwendet PHPQuery, um den gewünschten Inhalt in den HTML-Code einzufügen - mit "fast" derselben Logik, aber viel einfacher, da die PHP-Version nur zum Anzeigen einer SEOable-Version mit SEOable-Links verwendet wird und nicht wie die JavaScript-Version interagiert wird.

Alle drei Komponenten, aus denen eine Seite besteht, page.htm, page.js und page.php, sind für alles vorhanden, das das maskierte Fragment verwendet, um zu wissen, ob die PHP-Version anstelle der JavaScript-Version geladen werden soll. Die PHP-Version muss nicht für nicht SEO-fähige Inhalte vorhanden sein (z. B. Seiten, die erst nach der Benutzeranmeldung angezeigt werden). Alles ist unkompliziert.

Ich bin immer noch verwirrt darüber, wie einige Front-End-Entwickler davonkommen, großartige Websites (mit dem Reichtum an Google Text & Tabellen) zu entwickeln, ohne serverseitige Technologien in Verbindung mit Browser-Technologien zu verwenden ... Wenn JavaScript nicht einmal aktiviert ist, dann unsere 99% ige JavaScript-Lösung wird natürlich nichts ohne das PHP tun.

Es ist möglich, eine nette URL zu haben, um auf einer von PHP bereitgestellten Seite zu landen und zu einer JavaScript-Version umzuleiten, wenn JavaScript aktiviert ist. Dies ist jedoch aus Benutzersicht nicht gut, da Benutzer die wichtigere Zielgruppe sind.

Als Randnotiz. Wenn Sie nur eine einfache Website erstellen, die ohne JavaScript funktionieren kann, kann ich PushState als nützlich erachten, wenn Sie Ihre Benutzererfahrung schrittweise von einem einfachen statisch gerenderten Inhalt in etwas Besseres verbessern möchten, aber wenn Sie Ihrem Benutzer das geben möchten Beste Erfahrung von Anfang an ... Nehmen wir an, Ihr neuestes Spiel, das in JavaScript oder so etwas wie Google Text & Tabellen geschrieben wurde, ist für diese Lösung etwas einschränkend, da ein elegantes Zurückfallen nur so weit gehen kann, bevor die Benutzererfahrung im Vergleich zur Vision schmerzhaft ist Der Seite.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.