SEO vs. React: Webcrawler sind intelligenter als Sie denken

Viele Menschen befürchten immer noch, dass das Erstellen von Websites mit Tools wie React, Angular oder Ember Ihr Suchmaschinenranking beeinträchtigt.

Das Denken geht ungefähr so: Die von Suchmaschinen verwendeten Webcrawler können eine Seite nur dann richtig crawlen, wenn sie vollständig im Browser des Benutzers gerendert ist. Stattdessen wird nur der vom Backend gelieferte HTML-Code angezeigt.

Wenn dieser HTML-Code nur ein paar Meta-Tags und Skript-Tags enthält, geht die Suchmaschine davon aus, dass Ihre Seite im Grunde genommen leer ist und Sie schlecht bewertet.

Ich sehe häufig, dass Berater für Suchmaschinenoptimierung (SEO) empfehlen, dass Sie Ihre Seite im Backend rendern, damit Webcrawler viele nette HTML-Codes sehen können, die sie dann indizieren können.

Dieser Rat erscheint mir unvernünftig und unrealistisch. Es ist 2016. Benutzer erwarten, dass Seiten dynamisch sind und ihnen eine schnelle Benutzererfahrung bieten. Sie möchten nicht jedes Mal warten, bis eine neue HTML-Seite geladen wird, wenn sie auf etwas klicken.

Ist die Aussage "clientseitiges Rendern schadet Ihrem Seitenrang" also noch gültig?

Recherchieren

Zunächst ein Haftungsausschluss: Ich bin kein SEO-Experte. Aber ich habe ein bisschen über das Thema gelesen und hier ist, was ich gefunden habe.

Hier ist eine Ankündigung von Google in ihrem Webmaster-Blog vom Oktober 2015:

Solange Sie Googlebot nicht daran hindern, Ihre JavaScript- oder CSS-Dateien zu crawlen, können wir Ihre Webseiten im Allgemeinen wie moderne Browser rendern und verstehen. Um dieser Verbesserung Rechnung zu tragen, haben wir kürzlich unsere technischen Richtlinien für Webmaster aktualisiert, um zu verhindern, dass Googlebot das Crawlen der CSS- oder JS-Dateien Ihrer Website verhindert.

Hier ist ein Search Engine Land-Artikel vom Mai 2015:

Wir haben eine Reihe von Tests durchgeführt, bei denen überprüft wurde, ob Google JavaScript mit einer Vielzahl von Implementierungen ausführen und indizieren kann. Wir haben außerdem bestätigt, dass Google in der Lage ist, die gesamte Seite zu rendern und das DOM zu lesen, wodurch dynamisch generierte Inhalte indiziert werden. Die SEO-Signale im DOM (Seitentitel, Meta-Beschreibungen, kanonische Tags, Meta-Roboter-Tags usw.) werden berücksichtigt. Dynamisch in das DOM eingefügter Inhalt ist auch crawlbar und indizierbar. Darüber hinaus können in bestimmten Fällen die DOM-Signale sogar Vorrang vor widersprüchlichen Aussagen im HTML-Quellcode haben. Dies erfordert mehr Arbeit, war jedoch bei mehreren unserer Tests der Fall.

Diese beiden Quellen legen nahe, dass es tatsächlich sicher ist, clientseitig gerendertes Layout zu verwenden.

Der Preactjs.com-Test

Ich habe kürzlich eine Klage über SEO-Berater getwittert, die sich nicht mit meiner geliebten Reaktion befassen. Um genau zu sein, bin ich gerade dabei, auf Preact zu migrieren, eine leichte Alternative zu Facebooks React. Ich habe diese Antwort von Jason Miller erhalten, einem der Entwickler, die an Preact arbeiten:

Abgesehen von dem Blog-Artikel aus Search Engine Land, den ich oben zitiert habe, hat Jason einen Link zu einer Google-Suche nach der Preact-Homepage getwittert, der folgendermaßen aussieht:

Diese Seite wird mit Preact vollständig clientseitig gerendert, wie ein Blick auf den Quellcode zeigt:

Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
(function(url){window['_boostrap_'+url]=fetch(url);})('/content'+location.pathname.replace(/^\/(repl)?\/?$/, '/index')+'.md');
(function(i,s,o,g,r,a,m))(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-6031694-20', 'auto');ga('send', 'pageview');

Wenn der Googlebot den von Preact gerenderten HTML-Code nicht lesen könnte, würde er nicht mehr als den Inhalt der Meta-Tags anzeigen.

Und doch sehen die Google-Ergebnisse bei der Suche nach einer Website folgendermaßen aus: preactjs.com :

Ein weiterer Artikel von Andrew Farmer vom März 2016 warnt vor mangelnder JavaScript-Unterstützung durch andere Suchmaschinen als Google:

Bei meinen Recherchen konnte ich keine Beweise dafür finden, dass Yahoo, Bing oder Baidu JavaScript in ihren Crawlern unterstützen. Wenn Ihnen SEO in diesen Suchmaschinen wichtig ist, müssen Sie serverseitiges Rendering verwenden, das ich in einem zukünftigen Artikel erläutern werde.

Also habe ich beschlossen, Jasons Test mit anderen Suchmaschinen auszuprobieren:

✅ Bing

Andrews Warnung bezüglich Bing scheint unwesentlich. Hier sind die Bing-Ergebnisse bei der Suche nach einer Website: preactjs.com :

✅ Yahoo

Und die Yahoo-Ergebnisse bei der Suche nach Website: preactjs.com :

✅ Duck Duck Go

Und die Ergebnisse von Duck Duck Go bei der Suche nach einer Website: preactjs.com :

⚠️ Baidu

Die chinesische Suchmaschine Baidu hat Probleme mit preactjs.com. Hier sind die Ergebnisse bei der Suche nach einer Website: preactjs.com :

Es scheint also, dass es nichts Falsches ist, wenn Sie Ihre Webseiten mit JavaScript auf der Clientseite rendern, solange Sie einige Grundregeln befolgen (zitiert), es sei denn, Sie haben eine hohe Priorität in einer Suchmaschine, die nur in China angeboten wird aus dem Blog-Beitrag von Andrew Farmer):

  • Rendern Sie Ihre Komponenten, bevor Sie etwas Asynchrones tun.
  • Testen Sie jede Ihrer Seiten mit Fetch as Google, um sicherzustellen, dass der Googlebot Ihre Inhalte findet

Danke fürs Lesen!

Update 25. Oktober 2016

Andrew Ingram führte dieselben Tests durch, die ich durchgeführt hatte, und kam zu einem anderen Ergebnis.

Zitat von Andrew:

So viele Seiten haben verschiedene Suchmaschinen mit der Abfrage "site: preactjs.com" indiziert. Google: 17 Bing: 6 Yahoo: 6 Baidu: 1 Eines der Google-Ergebnisse ist eine Fehlerseite, die jedoch vermutlich nicht deindiziert werden kann automatisch, da es noch keine Möglichkeit gibt, ein 404-Äquivalent in SPAs zu deklarieren. Ich habe auch gelesen (ich kann mich nicht erinnern, wo), dass Google eine Latenz von einigen Tagen hat, wenn es darum geht, SPAs im Vergleich zu Servern zu indizieren. gerenderte Apps. Dies ist vielleicht kein Problem für Sie, aber es lohnt sich, darüber Bescheid zu wissen.

Seine Arbeitshypothese lautet, dass andere Suchmaschinenroboter als Google in der Lage sind, clientseitig gerenderte Seiten zu indizieren , diese jedoch nicht zu crawlen , dh Links zu folgen und andere Seiten einer Website zu indizieren.

→ Folgen Sie der Diskussion in den Hacker News

Danksagung

Thanks to Adam Audette (Search Engine Land) and Andrew Farmer for their excellent blog articles from which I quoted, Jason Miller for his input and inspiration, my colleagues from the eBay Classifieds Group for their support and Quincy Larson of Free Code Camp for publishing this article!