it-swarm.com.de

Wie benutzt man React.js für SEO?

Artikel auf React.js möchten darauf hinweisen, dass React.js großartig für SEO-Zwecke ist. Leider habe ich noch nie gelesen, wie du es eigentlich machst. Implementieren Sie einfach _escaped_fragment_ Wie in https://developers.google.com/webmasters/ajax-crawling/docs/getting-started und lassen Sie React rendern die Seite auf dem Server, wenn die URL _escaped_fragment_ enthält, oder steckt noch mehr dahinter?

Sich nicht auf _escaped_fragment_ Verlassen zu können, wäre großartig, da wahrscheinlich nicht alle potenziell durchsuchenden Sites (z. B. beim Teilen von Funktionen) _escaped_fragment_ Implementieren.

49
sk904861

Ich bin mir ziemlich sicher, dass alles, was Sie für die Werbung für React als gut für SEO angesehen haben, damit zu tun hat, dass Sie die angeforderte Seite auf dem Server rendern können, bevor Sie sie an den Client senden. Es wird also wie jede andere statische Seite in Bezug auf Suchmaschinen indiziert.

Server-Rendering über ReactDOMServer.renderToString Möglich. Der Besucher erhält die bereits gerenderte Markup-Seite, die die Anwendung React erkennt, sobald sie heruntergeladen und ausgeführt wurde. Anstatt den Inhalt zu ersetzen, wenn ReactDOM.render Aufgerufen wird, werden nur die Ereignisbindungen hinzugefügt. Für den Rest des Besuchs wird die Anwendung React übernommen und weitere Seiten werden auf dem Client gerendert.

Wenn Sie mehr darüber erfahren möchten, empfehlen wir die Suche nach "Universal JavaScript" oder "Universal React" (früher als "isomorphic react" bezeichnet), da dies der Begriff für JavaScript-Anwendungen wird, die eine einzige Codebasis zum Rendern verwenden sowohl auf dem Server als auch auf dem Client.

56
Jack

Wie der andere Antwortende sagte, suchen Sie nach einem isomorphen Ansatz. Auf diese Weise kann die Seite vom Server mit dem gerenderten Inhalt stammen, der von Suchmaschinen analysiert wird. Wie ein anderer Kommentator erwähnte, könnte dies den Anschein erwecken, dass Sie nicht mehr mit node.js als serverseitiger Sprache arbeiten. Zwar ist es richtig, dass Javascript auf dem Server ausgeführt werden muss, damit dies funktioniert, aber Sie müssen nicht alles in Node tun. In diesem Artikel wird beispielsweise erläutert, wie Sie mit Scala) eine isomorphe Seite erstellen und wie Sie reagieren:

Isomorphic Web Design mit React and Scala

In diesem Artikel werden auch die Vorteile dieses isomorphen Ansatzes für UX und SEO beschrieben.

5
PFranchise

Zwei nette Beispielimplementierungen:

Besuchen Sie https://react-redux.herokuapp.com/ mit aktiviertem und deaktiviertem Javascript und beobachten Sie das Netzwerk in den Browser-Entwicklungstools, um den Unterschied zu erkennen.

4
w00t

Ich werde mit vielen Antworten hier nicht einverstanden sein müssen, da ich es geschafft habe, meine clientseitige React App mit Googlebot ohne jegliche SSR zu betreiben.

Schauen Sie sich die SO Antwort hier an . Ich habe es erst kürzlich geschafft, es zum Laufen zu bringen, aber ich kann bestätigen, dass es bisher keine Probleme gibt und Googlebot kann die API-Aufrufe tatsächlich ausführen und den zurückgegebenen Inhalt indizieren.

1
WillHua

Dies ist auch möglich über ReactDOMServer.renderToStaticMarkup :

Ähnlich wie renderToString, außer dass dadurch keine zusätzlichen DOM-Attribute wie data-react-id Erstellt werden, die React intern verwendet werden. Dies ist nützlich, wenn Sie = verwenden möchten React als einfachen statischen Seitengenerator, da durch das Entfernen der zusätzlichen Attribute viele Bytes eingespart werden können.

1
falsarella

Es gibt nichts, was Sie tun müssen, wenn Sie sich für den Rang Ihrer Website bei Google interessieren, da der Crawler von Google sehr gut mit JavaScript umgehen kann! Sie können das SEO-Ergebnis Ihrer Website überprüfen, indem Sie site:your-site-url.

Wenn Sie sich auch für den Rang Ihrer Website interessieren, z. B. Baidu , und Ihre Server-Seite von implementiert [~ # ~] php [~ # ~] , vielleicht brauchst du das: react-php-v8js .

1
Alan