web-dev-qa-db-fra.com

Comment fonctionne l'indexation sur les moteurs de recherche pour les applications Web JavaScript telles que REACT?

Je prévois de mettre en œuvre react.js pour mon application. Comme je suis nouveau à réagir, je doute que Google indexe les composants de réaction. Et quelles sont les meilleures pratiques nécessaires pour rendre une application correctement visible dans la recherche Google.

Quelqu'un a une idée s'il vous plaît aidez-moi à ce sujet.

javascriptreactjsseoreact-reduxbabeljs
26
suyesh

Je peux donc affirmer sans crainte que j'ai obtenu un SPA de réaction avec des appels d'API pour un rendu parfait dans googlebot (Fetch and Render). Ce n’est donc pas une tâche impossible, mais je dirai qu’il n’ya pas beaucoup de documentation pour vous aider.

Comme il semble que vous ayez une nouvelle application, je décrirai les deux possibilités potentielles.

Pré-rendu côté serveur (SSR)

Commencez avec le pré-rendu côté serveur (SSR) et respectez-le. Il y a beaucoup de façons de faire cela dans les réactions et cela signifie finalement que vous devrez vous en tenir aux bibliothèques isomorphes qui supportent la SSR.

Cependant, en descendant le chemin SSR, les chances d'être indexé par Google sont considérablement plus grandes, car vous ne devez absolument pas compter sur le fonctionnement de Googlebot avec votre JS.

Rendu côté client (application JS normale)

Il vous suffit de créer une application React normale sans application de SSR ... essentiellement comme d'habitude. Les avantages sont que vous n'avez pas à gérer de complexité supplémentaire de la SSR et que vous n'êtes pas limité aux bibliothèques C’est le plus simple, mais vous devez espérer que votre JS se compile et soit exécuté correctement par Googlebot.

Mes observations

Je dirai que le pré-rendu côté serveur est incroyablement difficile à mettre en place, car de nombreuses bibliothèques peuvent ne pas le prendre en charge, ce qui introduit une grande complexité que vous ne souhaitez pas gérer.

La route de rendu côté client fonctionne comme d’habitude et je peux confirmer qu’elle fonctionne avec Googlebot. Voici ce que j'ai fait pour que le rendu côté client fonctionne:

  1. Ajout de 'babel-polyfill' à ma liste d'importation le plus tôt possible

  2. Mon Javascript est en ligne pour réduire le temps de chargement global et minimiser les appels inutiles. J'ai fait cela avec Razor (C #) mais vous pouvez le faire comme vous le souhaitez.

  3. Ajout d'un appel externe au fichier Polyvalent de Financial Times (je ne sais pas si cela est nécessaire)

  4. NODE_ENV = la production aidera également ici. Ça va réduire la taille globale de votre paquet

Pour tous les utilisateurs de C #, voici à quoi cela pourrait ressembler:

clientWithRender.jsx (le point d'entrée de mon 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

Si vous jetez un coup d'œil à cet article de 2015 sur le blog Google Webmaster Central vous pouvez voir que Google recommande de ne rien faire de différent pour le référencement sur une seule page (ou comme ils l'appelaient AJAX) - ce qui inclurait réagir.

Ils n'abordent pas beaucoup de détails sur la façon dont ils le font, mais tant que votre application est construite sémantiquement et rend très rapidement - elle devrait être classée.

Ils accordent une grande importance à la performance, un temps de rendu plus rapide conduisant à des classements plus élevés. Cela désavantage grandement toutes les applications à page unique par rapport au rendu côté serveur.

Si vous souhaitez des conseils plus spécifiques - cela semble être un très bon point de départ .

12
mikegeyser