pushState und SEO

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?

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.

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.

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.