Wie Sie wissen, ist die Suchmaschinenoptimierung von Anwendungen mit nur einer Seite keine leichte Aufgabe, und ihre Lösung erfordert möglicherweise erhebliche Arbeitskosten, besondere Fähigkeiten von Entwicklern und finanzielle Kosten vom Kunden. Welche Lösungen bietet die Community an, um die Suchmaschine der
React- Website so schnell und kostengünstig wie möglich zu gestalten?
Einige alltägliche über SEO
Etwa 92% des Datenverkehrs stammen von der ersten Seite der Suchmaschinenabfrageergebnisse, 75% des Datenverkehrs von den ersten fünf Websites.
Google nimmt mehr als 90% des Suchmaschinenmarktes ein .
Suchmaschinenoptimierung (Search Engine Optimization, SEO) ist der Prozess der Strukturierung und Organisation einer Website, um das Volumen zu erhöhen und die Qualität des Datenverkehrs zu verbessern, indem die Position und die Häufigkeit des Auftretens in den Ergebnissen von Suchmaschinen erhöht werden, wobei der Schwerpunkt auf Schlüsselwörtern liegt, die die Besonderheiten der Website offenlegen.
Das Hauptziel des SEO-Prozesses besteht darin, die Sichtbarkeit der Website im Internet zu verbessern und den Website-Verkehr zu erhöhen.
Suchmaschinen basieren auf dem unermüdlichen Zwischenspeichern von Website-Inhalten. Aufgrund der Tatsache, dass der Prozess automatisiert ist, ist es sehr wichtig, dass der Inhalt so strukturiert und formatiert ist, dass er von der Maschine verstanden wird. Der SEO-Prozess umfasst die Optimierung der Leistung der Website, die Verarbeitung des Inhalts, um die Relevanz des Inhalts für Keywords zu erhöhen, und die Bereitstellung von Tools, mit denen Suchroboter ihn besser verstehen können.
Dies mag ziemlich einfach erscheinen, aber bei Websites, die auf React basieren, ist dies nicht immer der Fall.
Reagieren und SEO
Kurz über SPA
Eine einseitige Anwendung oder ein SPA ist eine Webanwendung oder Website, die mit dem Benutzer interagiert, indem sie die aktuellen Seiten dynamisch ändert, anstatt neue Seiten vom Server zu laden. SPA arbeiten schnell, weil Die meisten Ressourcen (HTML + CSS + Skripte) werden während ihres gesamten Lebens nur einmal geladen. Die Anwendung empfängt und gibt nur Daten zurück.
Ein Beispiel für eine Technologie, die zum Erstellen von SPAs verwendet werden kann, ist ReactJS , eine Bibliothek, die für die Arbeit mit benutzerdefinierten Browsern gut optimiert ist ( mehr hier ).
Haupt SPA Probleme mit SEO
SPA ist in der Tat ein JavaScript-Programm, das in einem Browser ausgeführt wird. Wenn ein Such-Webbot nicht weiß, wie Skripte ausgeführt werden, kann er keine korrekt gerenderte Seite abrufen und indizieren.
Google gab im Oktober 2015 eine wichtige Ankündigung bekannt, dass seine Bots JS-Dateien auf Websites ausführen werden, wenn ihnen das Recht dazu eingeräumt wird. Und obwohl diese Aussage sehr positiv klingt und die Such-Bots immer ausgefeilter werden, ist es riskant , sich auf ihre Fähigkeit zu verlassen, JavaScript auszuführen . Der Googlebot kann JavaScript aus vielen Gründen ablehnen ( weitere Details hier ):
- Nichteinhaltung der „Golden 5 Sec“ -Regel (weitere Details hier und hier);
- die Unmöglichkeit, eine Website zu crawlen: Google-Systeme sollten aufgrund ihrer Struktur in der Lage sein, eine Website zu crawlen (weitere Details hier);
- die Unmöglichkeit der Analyse der Website: Bei Google-Systemen sollten bei der Analyse der Website unter Verwendung der zur Erstellung ihrer Seiten verwendeten Technologien keine Probleme auftreten (mehr hier).
- Fehler im Code usw.
Bots von anderen Suchmaschinen wie Yahoo, Bing, Baidu usw. unterstützen kein JavaScript und sehen SPA-Seiten leer.
Aus diesen Gründen müssen Sie nach Möglichkeiten suchen, die SPA-Site auf der Serverseite zu rendern, um Such-Bots die garantierte Möglichkeit zu geben, ihren Inhalt in der richtigen Form anzuzeigen.
SEO-Lösungen für SPA-Websites
Es gibt zwei Möglichkeiten, um die SEO- Probleme von SPA-Websites zu lösen :
- Isomorphes (universelles) SPA;
- Pre-Rendering.
Zusätzliche SEO-Verbesserungstools für reaktive Websites:
- React Router v4 : Komponente zum Erstellen von SEO-freundlichen "Routern" in React-Anwendungen;
- React Helmet : Vielleicht die wichtigste Komponente für die Bereitstellung von SEO React-Anwendungen, die die Verwaltung der Meta-Tags der Anwendung ermöglicht und sich durch Benutzerfreundlichkeit auszeichnet.
Wie hilft isomorphic React bei SEO?
Eine isomorphe React- Site erkennt automatisch, ob clientseitiges JavaScript deaktiviert ist. Wenn JavaScript deaktiviert ist, wird das Skript auf dem Server ausgeführt und das Ergebnis (statisches HTML + CSS) an den Client gesendet. In diesem Fall sind alle für SEO erforderlichen Attribute und Inhalte beim Booten vorhanden.
Wenn JavaScript aktiviert ist, kann die isomorphe React-Site im einfachsten Fall auf die übliche Weise geladen werden, wenn alles im Browser gerendert wird, oder geschickt : Teilweise wird auf der Serverseite gerendert, dh nur das erste DOM-Rendering wird auf dem Server ausgeführt, und alle nachfolgenden werden direkt auf dem Server ausgeführt Browser Mit anderen Worten, der Browser empfängt das vollständig gerenderte Original-DOM und JavaScript. Wenn sich der Status der Anwendung ändert, ist er für alle nachfolgenden Aktualisierungen verantwortlich.
Es wird angenommen, dass eine isomorphe Lösung die beste Methode zur Lösung von SEO-Problemen von SPA-Webanwendungen ist, aber das Unglückliche ist, dass solche Lösungen für React SPA derzeit schwer zu implementieren sind :
- Beliebte React-Boilerplates, z. B. Create- React -App , React-Boilerplate, unterstützen keinen Isomorphismus. Dan Abramov , Entwickler der Create-React-App :
Letztendlich ist es sehr schwierig, serverseitiges Rendering auf sinnvolle Weise hinzuzufügen, ohne auch kritische Entscheidungen zu treffen. Im Moment werden wir solche Entscheidungen nicht treffen;
- vorhandene isomorphe Kesselplatten sind schwer zu erlernen;
- Bestehende Lösungen sind unvollkommen:
- Oft weist der Code auf dem Server und auf dem Client viele Unterschiede auf.
- Im Falle eines fast vollständigen Zusammentreffens der Codebasis wird der Code langsam und fehleranfällig.
Es scheint, dass viele Entwickler die Meinung von MrCheater in der Diskussion des Artikels „Isomorphe Reaktionsanwendungen: Leistung und Skalierung“ unterstützen werden :
Das Thema „isomorphe Webanwendungen“ hat viele Hasser. Leider. Obwohl es leicht zu verstehen ist, warum, ist alles sehr schwer zu programmieren, Hunderte von Artikeln zu diesem Thema, aber die Ausgabe ist immer noch ein beängstigender Client mit einem Gewicht von 3 Megabyte. Aber eines Tages werden alle Probleme und Lösungsansätze standardisiert sein, und wir werden eine leichte isomorphe Einzelseitenanwendung haben.
SEO-Problem durch Rendern lösen
Beim Pre -Rendering werden Seiten auf einer Website vorab gerendert, um sie für die Anzeige durch einen Such-Webbot vorzubereiten. Der Prerender-Dienst fängt Anforderungen an die Website ab, bestimmt den Client-Typ anhand der "User-Agent" -Anforderung. Wenn die Anforderung vom Web-Bot gestellt wurde, sendet der Dienst die zuvor gerenderte zwischengespeicherte statische Version der Website zurück. Wenn die Anfrage von einem nicht suchenden Webbot gestellt wurde, wird die normale Seite geladen. Das Vorrendern wird nur verwendet, um die Arbeit mit Web-Bots und möglicherweise veralteten Browsern zu optimieren. Prerender-Dienste wie Prerender.cloud und dergleichen verwenden kopflose Browser, meistens Headless Chrome . Mit diesem Ansatz können Sie die neuesten JavaScript-Frameworks wie React, Ember und Angular verwenden, um eine Website zu erstellen, ohne sich auf serverseitiges Rendering verlassen zu müssen.
Vorteile des Pre-Renderings:
- Der Prerender kann alle Arten von modernem JavaScript ausführen und erzeugt statisches HTML.
- prerender unterstützt die neuesten Webinnovationen;
- Wenn überhaupt , ist eine minimale Änderung der Codebasis der Webanwendung erforderlich .
- Die Kosten für die Entwicklung und Wartung der Website werden reduziert .
- einfache Implementierung.
Nachteile des Pre-Renderings :
- Nicht geeignet für Seiten mit häufig wechselnden Daten.
- Nicht akzeptabel für Seiten, die personenbezogene Daten des Benutzers enthalten. Solche Seiten sind jedoch für SEO nicht sehr nützlich und sollten nicht indiziert werden.
- Bei einer großen Site mit einer erheblichen Anzahl von Seiten kann der Vor-Rendering-Vorgang viel Zeit in Anspruch nehmen.
- Prerender-Services werden bezahlt.
Prerender, wo man sie bekommt
Die Community hat eine beträchtliche Anzahl von Prerendern entwickelt: siehe zum Beispiel hier.
Unter vielen Optionen ist OpenSource Prerender interessant - eine Open Source-Version des Prerenders, der für den Dienst prerender.io verwendet wird und auf Ihrem eigenen Server implementiert werden kann, der Node.js unterstützt.
Eine weitere interessante Sache ist, dass kein Server erforderlich ist. Der Prerender ist das Prerender SPA Plugin , das durch einfaches Ändern von webpack.config.js verbunden wird, z. B. create-react-app oder react-boilerplate . Der Pre-Rendering-Prozess wird beim "Erstellen" der Site ausgeführt und das Ergebnis in index.html abgelegt.
Sie können vorgefertigte Dienste verwenden, die Pre-Rendering-Dienste bereitstellen. Eine Liste einiger Dienste finden Sie hier und hier.
Hier können Sie auch praktische Erfahrungen mit Prerendern sammeln.
Von besonderem Interesse ist der Roast.io- Dienst, der sowohl CDN- als auch Pre-Rendering-Dienste (!) Bereitstellt . Der Dienst fügt außerdem automatisch (falls keine vorhanden sind) Meta-Tags hinzu, die die Anzeige der Website in sozialen Netzwerken verbessern.
Der Dienst befindet sich auf AWS CDN , läuft auf dem HTTPS-Protokoll, das insbesondere für SPA und React konfiguriert ist , und ist sehr einfach zu verwenden. Es gibt eine kostenlose Hosting- Option (10 GB Bandbreite, 500 Seiten SSR).
Also:
Das Pre-Rendering ist keine ideale Lösung und wird von einem erheblichen Teil der Entwickler von React-Anwendungen bevorzugt , da:
- Das Ausfüllen des Anwendungscodes ist nicht erforderlich. Sie können Ihre Lieblingskesselplatte sicher verwenden.
- Es gibt eine große Auswahl an Implementierungen - "Middleware", "Webpack", "CDN + Prerender", "OpenSource" und kostenpflichtig.
- Die Einführung des Pre-Renderings ist ein einfacher Vorgang, insbesondere bei Implementierungen von „CDN + Prerender“ .
- Es gibt ernsthafte Unterstützung von Google in Form von Headless Chrome ;
- Anwendungsentwicklungs- und Supportkosten werden reduziert.
- Es gibt Optionen für die kostenlose Nutzung von Prerender-Webdiensten.
Sie müssen jedoch über eine isomorphe (universelle) Version der Site nachdenken, wenn:
- Die Webanwendung zeigt häufig wechselnde Daten an.
- Eine Webanwendung enthält Hunderte von Seiten, da das Vorrendern viel Zeit in Anspruch nehmen kann.
Wenn die Website nur statische Seiten (HTML + CSS) enthält, ist weder Isomorphismus noch Vorrendering erforderlich .