Réagissez et SEO: comment se faire des amis

Comme vous le savez, l'optimisation des moteurs de recherche d'applications d'une seule page n'est pas une tâche facile et sa solution peut nécessiter des coûts de main-d'œuvre importants, des compétences particulières de la part des développeurs et des coûts financiers pour le client. Quelles solutions la communauté propose-t-elle pour rendre le moteur de recherche du site Web React convivial le plus rapidement et le moins cher possible?

Un peu de banalité sur le référencement

Environ 92% du trafic provient de la première page des résultats des requêtes des moteurs de recherche, avec 75% du trafic provenant des cinq premiers sites Web.
Google occupe plus de 90% du marché des moteurs de recherche.
L'optimisation pour les moteurs de recherche (SEO) est le processus de structuration et d'organisation d'un site afin d'augmenter le volume et d'améliorer la qualité de son trafic en augmentant sa position et la fréquence d'occurrence dans les résultats des moteurs de recherche, en se concentrant sur des mots clés qui révèlent les spécificités du site.
Le principal objectif du processus de référencement est d'améliorer la visibilité du site sur Internet et d'augmenter le trafic du site Web.

Les moteurs de recherche sont basés sur une mise en cache implacable du contenu du site Web. Étant donné que le processus est automatisé, il est très important que le contenu soit structuré et formaté d'une manière comprise par la machine. Le processus de référencement comprend l'optimisation des performances du site Web, le traitement de son contenu afin d'augmenter la pertinence du contenu pour les mots clés, ainsi que la fourniture au site d'outils pour aider les robots de recherche à le comprendre.

Cela peut sembler assez simple, mais dans le cas des sites construits sur React, ce n'est pas toujours le cas.

Réagir et SEO

En bref sur le SPA

Une application monopage ou SPA est une application Web ou un site Web qui interagit avec l'utilisateur en modifiant dynamiquement les pages en cours, plutôt qu'en chargeant de nouvelles pages à partir du serveur. Le SPA fonctionne vite car la plupart des ressources (HTML + CSS + scripts) ne sont chargées qu'une seule fois au cours de leur vie. L'application reçoit et renvoie uniquement les données.
ReactJS , une bibliothèque bien optimisée pour travailler sur des navigateurs personnalisés, est un exemple de technologie pouvant être utilisée pour créer des SPA ( plus ici. )

Principaux problèmes de SPA avec le référencement

SPA est, en fait, un programme JavaScript exécuté dans un navigateur, et si un robot de recherche Web ne sait pas comment exécuter des scripts, il ne pourra pas obtenir une page correctement rendue et l'indexer.

En octobre 2015, Google a fait une annonce importante selon laquelle ses robots exécuteraient des fichiers JS sur des sites Web s'ils en avaient le droit. Et, bien que cette déclaration semble très positive et que ses robots de recherche deviennent de plus en plus sophistiqués, s'appuyer sur leur capacité à exécuter JavaScript est risqué . Le Googlebot peut refuser JavaScript pour de nombreuses raisons ( plus de détails ici ):

• non-respect de la règle des «5 secondes d'or» (plus de détails ici et ici);
• incapacité à explorer un site: les systèmes Google devraient pouvoir explorer un site, compte tenu de sa structure (plus de détails ici);
• l'impossibilité d'analyser le site: les systèmes Google ne devraient pas rencontrer de problèmes lors de l'analyse du site en utilisant les technologies utilisées pour former ses pages (plus ici);
• erreurs dans le code, etc.

Les bots d'autres moteurs de recherche tels que Yahoo, Bing, Baidu, etc. ne prennent pas en charge JavaScript et voient les pages SPA vides.

Pour ces raisons, vous devez rechercher des moyens de rendre le site SPA côté serveur afin de donner aux robots de recherche la possibilité de voir leur contenu sous la bonne forme.

Solutions SEO pour sites Web SPA

Il existe deux façons principales de résoudre les problèmes de référencement des sites Web SPA:

1. SPA isomorphe (universel);
2. Pré-rendu.

Outils d' amélioration SEO supplémentaires pour les sites Web React:

• React Router v4 : composant permettant de créer des routines optimisées pour le référencement dans les applications React;
• React Helmet : peut-être le composant le plus important pour fournir des applications SEO React, donnant la possibilité de gérer les méta-tags de l'application et se caractérise par sa facilité d'utilisation.

Comment isomorphic React aide-t-il au référencement?

Un site React isomorphe détecte automatiquement si le JavaScript côté client est désactivé. Si JavaScript est désactivé, le script est exécuté sur le serveur et le résultat (HTML statique + CSS) est envoyé au client. Dans ce cas, tous les attributs et contenus nécessaires au référencement sont présents au démarrage.
Si JavaScript est activé, le site isomorphe React dans le cas le plus simple peut se charger de la manière habituelle, lorsque tout est rendu dans le navigateur, ou intelligemment : le rendu partiel est effectué côté serveur, ce qui signifie que seul le premier rendu DOM est effectué sur le serveur, et tous les suivants sont effectués directement dans navigateur En d'autres termes, le navigateur reçoit le DOM et JavaScript d'origine entièrement rendus, et lorsque l'état de l'application change, il est responsable de toutes les mises à jour ultérieures.

On pense qu'une solution isomorphe est la meilleure méthode pour résoudre les problèmes de référencement des applications Web SPA, mais le malheur est que de telles solutions pour React SPA, pour le moment, sont difficiles à mettre en œuvre :

• les plates-formes React populaires, par exemple create-react-app , react -ilerplate ne prennent pas en charge l'isomorphisme. Dan Abramov , développeur de l'application create-react :
  

  En fin de compte, le rendu côté serveur est très difficile à ajouter de manière significative, sans prendre également de décisions critiques. Pour le moment, nous n'allons pas prendre de telles décisions;

• les plaques de chaudière isomorphes existantes sont difficiles à apprendre;
• les solutions existantes sont imparfaites:
  
  • souvent, le code sur le serveur et sur le client présente de nombreuses différences;
  • en cas de coïncidence presque complète de la base de code, le code devient lent et sujet aux pannes.
  
  

  Il semble que de nombreux développeurs soutiendront l' opinion exprimée par MrCheater dans la discussion de l'article «Applications de réaction isomorphe: performances et mise à l'échelle» :
  

  Le thème des «applications Web isomorphes» a de nombreux ennemis. Hélas. Bien qu'il soit facile de comprendre pourquoi, tout est très difficile à programmer, des centaines d'articles sur ce sujet, mais le résultat est toujours un client effrayant pesant 3 mégaoctets. Mais un jour, tous les problèmes et les approches de leur solution seront normalisés, et nous aurons une application légère d'une seule page isomorphe.

  
  

  Résolution des problèmes de référencement via le rendu

  
  

  Le pré-rendu est le processus de pré-rendu des pages sur un site Web afin de les préparer à la visualisation par un robot de recherche Web. Le service prérendeur intercepte les demandes vers le site Web, détermine le type de client par la demande «user-agent», et si la demande a été faite par le bot Web, le service renvoie la version statique du site précédemment rendue en cache. Si la demande a été faite par un bot Web autre que la recherche, la page normale se charge. La pré-rendu n'est utilisée que pour optimiser le travail avec les robots Web et, éventuellement, les navigateurs obsolètes. Les services Prerender comme Prerender.cloud et similaires utilisent des navigateurs sans tête, le plus souvent Headless Chrome . Cette approche vous permet d'utiliser les derniers frameworks JavaScript tels que React, Ember et Angular pour créer un site Web et ne pas compter sur le rendu côté serveur.

  
  

  Avantages du pré-rendu:

  
  
  • le prérendeur est capable d'exécuter tous les types de JavaScript moderne et produit du HTML statique;
  • prerender prend en charge les dernières innovations Web;
  • une modification minimale de la base de code de l'application Web est requise, le cas échéant ;
  • les coûts de développement et de maintenance du site Web sont réduits ;
  • facilité de mise en œuvre.
  
  

  Inconvénients du pré-rendu :

  • ne convient pas aux pages qui affichent des données changeant fréquemment;
  • non acceptable pour les pages contenant des données personnelles de l'utilisateur. Cependant, ces pages ne sont pas très utiles pour le référencement et ne doivent pas être indexées;
  • dans le cas d'un grand site avec un nombre important de pages, le processus de pré-rendu peut prendre un temps considérable;
  • les services de pré-soumission sont payés.
  
  

  Prerender, où les obtenir

  
  

  La communauté a développé un nombre important de prétendants: voir, par exemple, ici.

  
  

  Parmi de nombreuses options, OpenSource Prerender est intéressant - une version open source du prerender utilisé sur le service prerender.io , qui peut être implémentée sur votre propre serveur prenant en charge Node.js.

  
  

  Une autre chose intéressante est qu'il ne nécessite pas de serveur, le prérendeur est le plugin Prerender SPA , qui est connecté en modifiant simplement webpack.config.js, par exemple, create-react-app ou react -ilerplateplate. Le processus de pré-rendu est effectué dans le processus de "construction" du site et le résultat est placé dans index.html.

  
  

  Vous pouvez utiliser des services prêts à l'emploi qui fournissent des services de pré-rendu, une liste de certains est donnée ici et ici.

  
  

  Ici, vous pouvez également vous familiariser avec une expérience pratique de travail avec des prétendants.

  
  

  Le service Roast.io , qui fournit à la fois des services CDN et de pré-rendu (!) Est particulièrement intéressant . Le service ajoute également automatiquement (s'il n'y en a pas) des balises meta «Le lien de capture d'écran se déroule» qui améliorent l'affichage du site Web sur les réseaux sociaux.
  Le service est situé sur AWS CDN , fonctionne sur le protocole HTTPS, configuré pour SPA et React en particulier, il est très facile à utiliser. Il existe une option d' hébergement gratuite (10 Go de bande passante, 500 pages SSR).

  
  

  Donc:

  
  

  Le pré-rendu, n'étant pas une solution idéale, semble préférable pour une partie importante des développeurs d'applications React en raison du fait que:
  

  • il n'est pas nécessaire de remplir le code d'application - vous pouvez utiliser en toute sécurité votre passe-partout préféré;
  • il existe une large sélection d'implémentations - "middleware", "webpack", "CDN + prerender", "opensource" et payant;
  • l'introduction du pré-rendu est un processus simple, en particulier dans le cas des implémentations «CDN + prerender» ;
  • Il existe un soutien sérieux de Google sous la forme de Chrome sans tête ;
  • Les coûts de développement et de support des applications sont réduits.
  • il existe des options pour l'utilisation gratuite des services Web prerender.

  
  Cependant , vous devez penser à une version isomorphe (universelle) du site si:
  

  • L'application Web affiche des données changeant fréquemment;
  • Une application Web contient des centaines de pages, car le processus de pré-rendu peut prendre un temps considérable.

  
  Si le site Web ne contient que des pages statiques (HTML + CSS), aucun isomorphisme ni pré-rendu n'est requis .