it-swarm.com.de

Wie funktioniert die Indizierung in Suchmaschinen für JavaScript-Webanwendungen wie REACT?

Ich plane, react.js für meine Anwendung zu implementieren. Da ich neu in der Reaktion bin, habe ich Zweifel, wie Google die Reaktionskomponenten indiziert. Und was ist die beste Vorgehensweise, um die Anwendung in der Google-Suche richtig sichtbar zu machen?.

Jeder hat eine Idee, bitte hilf mir dabei.

26
suyesh

Ich kann also mit Sicherheit sagen, dass ich ein SPA mit API-Aufrufen bekommen habe, um perfekt in googlebot zu rendern (Fetch and Render). Das ist also keine unmögliche Aufgabe, aber ich werde sagen, dass es nicht viel Dokumentation gibt, die Ihnen dabei helfen kann.

Da es sich so anhört, als hätten Sie eine neue App, werde ich beide Möglichkeiten beschreiben, die Sie möglicherweise nicht nutzen können.

Serverseitiges Pre-Rendering (SSR)

Beginnen Sie mit dem serverseitigen Pre-Rendering (SSR) und halten Sie sich daran. Es gibt viele Möglichkeiten, dies zu tun, und dies bedeutet letztendlich, dass Sie sich an isomorphe Bibliotheken halten müssen, die SSR unterstützen.

Wenn Sie jedoch den SSR-Pfad entlang gehen, sind die Chancen, von Google indiziert zu werden, erheblich höher, da Sie sich nicht darauf verlassen müssen, dass der Googlebot überhaupt mit Ihrem JS zusammenarbeitet.

Client Side Rendering (Eine normale JS-App)

Erstellen Sie einfach eine normale React App ohne SSR. Grundsätzlich funktioniert dies wie gewohnt. Der Vorteil ist, dass Sie sich nicht mit der zusätzlichen Komplexität von SSR auseinandersetzen müssen und nicht auf Bibliotheken beschränkt sind Das ist im Grunde genommen die einfachste, aber Sie müssen hoffen, dass Ihr JS kompiliert und vom Googlebot korrekt ausgeführt wird.

Meine Beobachtungen

Ich werde sagen, dass serverseitiges Pre-Rendering manchmal unglaublich schwierig ist, da es von vielen Bibliotheken möglicherweise nicht unterstützt wird und dies wiederum eine Menge Komplexität mit sich bringt, mit der Sie sich nicht befassen möchten.

Die clientseitige Renderingroute ist wirklich normal und ich kann bestätigen, dass sie tatsächlich mit Googlebot funktioniert. Hier ist, was ich getan habe, um clientseitiges Rendering zum Laufen zu bringen:

  1. 'Babel-polyfill' wurde so früh wie möglich zu meiner Importliste hinzugefügt

  2. Inline mein Javascript, um die Gesamtladezeit zu reduzieren und unnötige Anrufe zu minimieren. Ich habe das mit Razor (C #) gemacht, aber Sie können das tun, wie Sie wollen.

  3. Hinzufügen eines externen Aufrufs zur Polyfill "Financial Times" (nicht sicher, ob dies erforderlich ist)

  4. Auch hier hilft NODE_ENV = production. Dadurch wird die Gesamtgröße Ihres Bündels verringert

Für jeden auf C # sieht das so aus:

clientWithRender.jsx (der Einstiegspunkt meines jsx)

import React from "react";
import ReactDOM from "react-dom";
import 'babel-polyfill';

import App from "./App/App.jsx";
import { Router, Route, indexRouter, hashHistory } from "react-router";

ReactDOM.render(
<App></App>,
document.getElementById('App'));

Index.cshtml

<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")
17
WillHua

Werfen Sie einen Blick auf in diesem Artikel aus dem Jahr 2015 im Google Webmaster Central Blog Sie können sehen, dass Google empfiehlt, für SEO auf einer einzelnen Seite (oder als AJAX-Anwendung bezeichnet) nichts anderes zu tun - was würde reagieren.

Sie gehen dort nicht sehr detailliert darauf ein, wie sie es tun, aber solange Ihre Anwendung semantisch aufgebaut ist und sehr schnell gerendert wird - sollte es Rang haben.

Sie legen viel Wert auf Leistung, wobei eine schnellere Renderzeit zu höheren Platzierungen führt. Dies stellt einen erheblichen Nachteil für alle Anwendungen mit nur einer Seite gegenüber dem Rendern auf dem Server dar.

Wenn Sie eine genauere Anleitung wünschen - dies scheint ein wirklich guter Anfang zu sein .

12
mikegeyser