Comment utiliser React.js pour le RÉFÉRENCEMENT?
Articles sur React.js aime faire remarquer que tu réagis.js est idéal pour les besoins du référencement. Malheureusement, je n'ai jamais lu comment tu le faisais.
Est-ce que vous implémentez simplement _escaped_fragment_ comme dans https://developers.google.com/webmasters/ajax-crawling/docs/getting-started et laisser React rendre la page sur le serveur, lorsque l'url contient _escaped_fragment_ , ou y a-t-il plus?
ne pas pouvoir compter sur _escaped_fragment_ serait génial, comme probablement tous les sites potentiellement rampants (par exemple dans le partage de fonctionnalités) ne mettent pas en œuvre _escaped_fragment_ .
6 réponses
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 la possibilité de rendre la page demandée sur le serveur, avant de l'envoyer au client. Il sera donc indexé comme n'importe quelle autre page statique, en ce qui concerne les moteurs de recherche.
rendu du serveur possible via ReactDOMServer.renderToString . Le visiteur recevra la page de markup 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 va juste ajouter les fixations d'événements. Pour le reste de la visite, L'application React prendra le relais et d'autres pages seront publiées sur le client.
si vous êtes intéressé à en savoir plus à ce sujet, je vous suggère de rechercher "JavaScript universel" ou "réaction universelle" (anciennement connu sous le nom de "réaction isomorphique"), car cela devient le terme pour les applications JavaScript qui utilisent une base de code unique pour rendre sur le serveur et le client.
comme l'a dit l'autre répondeur, ce que vous cherchez est une approche isomorphe. Cela permet à la page de venir 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 coincé en utilisant le noeud.js que votre langage côté serveur. Bien qu'il soit vrai que javascript lancé sur le serveur est nécessaire pour faire ce travail, vous ne devez pas tout faire dans le noeud. Par exemple, cet article explique comment réaliser une page isomorphe en utilisant Scala et react:
https://thebhwgroup.com/blog/isomorphic-web-design-react-scala
cet article décrit également les avantages UX et SEO de ce type d'approche isomorphe.
deux exemples de mise en œuvre:
- https://github.com/erikras/react-redux-universal-hot-example : Utilise Redux , mon préféré de l'état d'application du cadre de gestion
- https://github.com/webpack/react-starter : utilise Flux, et dispose d'une configuration webpack très élaborée.
Essayez de visiter https://react-redux.herokuapp.com/ avec javascript activé et désactivé, et de regarder le réseau dans le navigateur outils de dev pour voir la différence...
il est également possible via ReactDOMServer.renderToStaticMarkup :
similaire à
renderToString, sauf que cela ne crée pas de DOM supplémentaire des attributs tels quedata-react-id, que React utilise en interne. C'est utile si vous voulez utiliser React comme un simple générateur de page statique, comme dépouiller les attributs supplémentaires peuvent gagner beaucoup d'octets.
va devoir être en désaccord avec beaucoup de réponses ici depuis que j'ai réussi à obtenir mon côté client React App travailler avec googlebot avec absolument aucun SSR.
regardez le alors répondez ici . J'ai seulement réussi à le faire récemment, mais je peux confirmer qu'il n'y a pas de problèmes jusqu'à présent et googlebot peut effectivement effectuer les appels d'API et d'indexer le contenu retourné.
il n'y a rien que vous devez faire si vous vous souciez du rang de votre site sur Google, parce que Google crawler pourrait très bien gérer JavaScript! Vous pouvez vérifier le résultat SEO de votre site par la recherche site:your-site-url .
si vous vous souciez aussi du rang de votre site tel que Baidu , et de votre côté sever implémenté par PHP , peut-être que vous avez besoin de ceci: react-php-v8js .