web-dev-qa-db-fra.com

Comment utilisez-vous React.js pour le référencement?

Les articles sur React.js aiment souligner que React.js est idéal pour le référencement. Malheureusement, je n'ai jamais lu comment vous le faites. Implémentez-vous simplement _escaped_fragment_ comme dans https://developers.google.com/webmasters/ajax-crawling/docs/getting-started et laissez React rendre la page sur le serveur , lorsque l'url contient _escaped_fragment_, Ou y a-t-il plus?

Pouvoir ne pas compter sur _escaped_fragment_ serait formidable, car tous les sites potentiellement explorateurs (par exemple pour le partage de fonctionnalités) n'implémentent probablement pas _escaped_fragment_.

49
sk904861

Je suis à peu près sûr que tout ce que vous avez vu promouvoir React comme étant bon pour le référencement a à voir avec le fait de pouvoir rendre la page demandée sur le serveur, avant de l'envoyer au client. sera indexé comme n'importe quelle autre page statique, en ce qui concerne les moteurs de recherche.

Rendu du serveur rendu possible via ReactDOMServer.renderToString. Le visiteur recevra la page de balisage déjà rendue, que l'application React détectera une fois qu'elle aura été téléchargée et exécutée. Au lieu de remplacer le contenu lorsque ReactDOM.render est appelé, il ajoutera simplement les liaisons d'événement. Pour le reste de la visite, l'application React prendra le relais et d'autres pages seront rendues sur le client.

Si vous souhaitez en savoir plus à ce sujet, je vous suggère de rechercher "Universal JavaScript" ou "Universal React" (anciennement appelé "isomorphic react"), car cela devient le terme pour les applications JavaScript qui utilisent une seule base de code pour le rendu sur le serveur et le client.

56
Jack

Comme l'a dit l'autre intervenant, ce que vous recherchez est une approche isomorphe. Cela permet à la page de provenir du serveur avec le contenu rendu qui sera analysé par les moteurs de recherche. Comme un autre commentateur l'a mentionné, cela pourrait donner l'impression que vous êtes bloqué en utilisant node.js comme langue côté serveur. S'il est vrai que l'exécution de javascript sur le serveur est nécessaire pour que cela fonctionne, vous n'avez pas à tout faire dans le nœud. Par exemple, cet article explique comment réaliser une page isomorphe en utilisant Scala et réagir:

Web Design isomorphe avec React et Scala

Cet article décrit également les avantages UX et SEO de ce type d'approche isomorphe.

5
PFranchise

Deux exemples d'implémentations de Nice:

Essayez de visiter https://react-redux.herokuapp.com/ avec javascript activé et désactivé, et regardez le réseau dans les outils de développement du navigateur pour voir la différence…

4
w00t

Je vais devoir être en désaccord avec beaucoup de réponses ici depuis que j'ai réussi à obtenir mon côté client React App fonctionnant avec Googlebot sans absolument aucun SSR.

Jetez un oeil à la SO réponse ici . Je n'ai réussi à le faire fonctionner que récemment, mais je peux confirmer qu'il n'y a pas de problème jusqu'à présent et que Googlebot peut réellement effectuer les appels API et indexer le contenu renvoyé.

1
WillHua

Il est également possible via ReactDOMServer.renderToStaticMarkup :

Similaire à renderToString, sauf que cela ne crée pas d'attributs DOM supplémentaires tels que data-react-id, que React utilise en interne. Ceci est utile si vous souhaitez utiliser React comme un simple générateur de page statique, car la suppression des attributs supplémentaires peut sauver beaucoup d'octets.

1
falsarella

Vous n'avez rien à faire si vous vous souciez du classement de votre site sur Google, car le robot d'exploration de Google pourrait très bien gérer JavaScript! Vous pouvez vérifier le résultat SEO de votre site en recherchant site:your-site-url.

Si vous vous souciez également du classement de votre site, comme Baidu , et de votre côté serveur implémenté par [~ # ~] php [~ # ~] , peut-être avez-vous besoin de ceci: react-php-v8js .

1
Alan