Comment utilisez-vous React.js pour le RÉFÉRENCEMENT?

Articles sur React.js comme sur ce point, React.js est idéal pour les fins de SEO. Malheureusement, je n'ai jamais lu, comment vous le faire réellement.
Avez-vous tout simplement de mettre en œuvre _escaped_fragment_ comme dans https://developers.google.com/webmasters/ajax-crawling/docs/getting-started et laisser agir le rendu de la page sur le serveur, lorsque l'url contient _escaped_fragment_, ou est-il de plus?

Être en mesure de ne pas compter sur _escaped_fragment_ serait super, comme probablement pas potentiellement de l'analyse des sites (par exemple, dans le partage de fonctionnalités) mettre en œuvre _escaped_fragment_.

InformationsquelleAutor sk904861 | 2015-01-31
  1. 56

    Je suis assez sûr de ce que vous avez vu la promotion de Réagir comme étant bon pour le RÉFÉRENCEMENT a à voir avec le fait d'être capable de rendre la page demandée sur le serveur, avant de l'envoyer au client. Ainsi, il sera indexé comme toute autre page statique, autant que les moteurs de recherche sont concernés.

    Un serveur de rendu possible grâce à ReactDOMServer.renderToString. Le visiteur recevra le déjà rendu de la page de balisage, qui l'Réagissent application détecte alors une fois qu'il est téléchargé et exécuté. Au lieu de remplacer le contenu lors de la ReactDOM.render est appelé, il va juste ajouter les liaisons d'événements. Pour le reste de la visite, la Réagir application va prendre le dessus et d'autres pages seront rendus sur le client.

    Si vous êtes intéressés à en apprendre plus à ce sujet, je vous suggère de la recherche pour "Universal JavaScript" ou "Universelle Réagir" (anciennement "isomorphe réagir"), comme cela est en train de devenir le terme JavaScript pour les applications qui utilisent une base de code unique pour les rendre à la fois le serveur et le client.

    • Ne serait-ce pas dire que je vais être coincé sur node.js?
    • Cela signifie seulement que vous aurez besoin de différer le nœud afin de rendre le balisage. Vous pouvez utiliser la langue que vous voulez pour gérer les demandes et servir le rendu de balisage.
    • Je ne pense pas que vous serait limitée à compter sur NodeJs pour cela, vous pourriez reporter à d'autres Moteurs Javascript si vous avez conçu vos scripts de manière appropriée. Par exemple, dans le monde Java vous avez Nashorn disponibles. J'ai essayé d'appeler mon webpack livré scripts à l'aide de Nashorn et il ne semble pas possible.
    • Non, par exemple. reactjs.net/guides/server-side-rendering.html
    • La lecture sur des sujets connexes, j'ai bien l'impression que le Côté Serveur, le Rendu est principalement une méthode pour obtenir votre initiale de chargement des pages plus rapide et pas un SEO exigence. Google et beaucoup d'autres moteurs de recherche peuvent indexer Single Page Apps amende si ils ne le rendu sur le frontend.
    • Google fait un travail juste avec de l'indexation des pages de Réagir apps, mais Bing ne parvient pas à index pratiquement aucun contenu à partir d'un SPA.

    InformationsquelleAutor Jack
  2. 5

    Que l'autre intervenant a dit, ce que vous êtes à la recherche d'une Isomorphe approche. Cela permet à la page à venir à partir du serveur avec le rendu du contenu qui sera analysé par les moteurs de recherche. Comme un autre intervenant a mentionné, cela pourrait faire croire que vous êtes coincé à l'aide de node.js que votre langage côté serveur. S'il est vrai que javascript est exécuté sur le serveur est nécessaire pour faire ce travail, vous n'avez pas à tout faire dans le nœud. Par exemple, cet article explique comment réaliser un isomorphe de la page à l'aide de la Scala et de réagir:

    https://thebhwgroup.com/blog/isomorphic-web-design-react-scala

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

    InformationsquelleAutor PFranchise
  3. 4

    Deux bel exemple implémentations:

    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...

    • Merci de donner vos impressions pour cette bolier plaque de github.com/Atyantik/react-pwa
    • semble bon, il serait d'obtenir de meilleurs scores si l'exemple du site ne se charge pas de google analytics et les annonces...
    • eh bien, c'est juste un exemple de la façon de gérer GTM. Nous n'avons pas ajouté de ad-sens pour elle.
    InformationsquelleAutor w00t
  4. 1

    Il est également possible via ReactDOMServer.renderToStaticMarkup:

    Similaire à renderToString, sauf que ce n'est pas de créer des DOM
    les attributs tels que la data-react-id, qui Réagissent utilise en interne. C'est
    utile si vous souhaitez utiliser Réagir comme une simple page statique générateur, comme
    dépouiller les attributs supplémentaires peuvent gagner beaucoup d'octets.

    InformationsquelleAutor falsarella
  5. 1

    Allez avoir à être en désaccord avec un grand nombre de réponses ici car j'ai réussi à obtenir mon côté client Réagir App de travail avec googlebot absolument pas de la SSR.

    Ont un look à la DONC la réponse 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é.

    • Check this out de la chaudière de la plaque, Dans lequel nous avons inclus des fonctionnalités comme la SSR, PWA, Code Crève toutes les fonctionnalités avec la SEO à l'esprit. github.com/Atyantik/react-pwa
    InformationsquelleAutor WillHua
  6. 1

    Il n'y a rien que vous devez faire si vous vous souciez de votre site rang sur Google, car Google robot pourrait gérer le JavaScript très bien! Vous pouvez vérifier votre site SEO, résultat de la recherche site:your-site-url.

    Si vous aussi vous soucier de votre site rang, comme Baidu, et votre batterie de côté mis en œuvre par PHP, peut-être vous avez besoin de ceci: réagir-php-v8js.

    InformationsquelleAutor Alan