À la revanche des sites, nous proposons et mettons en place des solutions et techniques pour permettre à votre site internet d’être visible sur les moteurs de recherche. Nous travaillons notamment avec un grand nombre de clients sous Ruby On Rails, framework de développement permettant de mettre en ligne rapidement une solution web même complexe. C’est pourquoi nous vous proposons aujourd’hui un article regroupant quelques fondamentaux et astuces du référencement naturel (SEO) mis en oeuvre en Ruby On Rails. Il ne s’agit pas d’une solution définitive ou complète, mais seulement d’un ensemble de techniques de base qui peuvent être étendues, améliorées et personnalisées en fonction de vos besoins.
🇬🇧 English version available here!
Retrouvez également sur Github le code source de l’application contenant les exemples cités ci-dessous.
Les sujets abordés
- Les URLs « SEO-friendly »
- Les pages d’erreur
- Les redirections
- Les Meta Tags
- Les données structurées
- Le fil d’Ariane
- Le sitemap
- Le robots.txt
- AMP
- HTTPS
- Bonus :
Les URLs « SEO-friendly »
Commençons d’abord avec les URLs. Rails utilise par défaut la clé primaire (ou également appelée id) pour générer les routes et les URL de vos ressources. Par exemple, si vous créez un nouveau modèle post, par défaut, l’URL qui permet d’accéder à la ressource sera du type /posts/1 où 1 est l’identifiant. Or, pour une meilleure expérience utilisateur (UX) mais également pour mieux se positionner dans les moteurs de recherche, nous conseillons généralement que les URLs soient composées de mots-clés associés à la ressource. Ces URLs doivent cependant être valides et uniques !
Vous pouvez développer vous-même assez facilement un système permettant de gérer cela mais dans un soucis de rapidité et de maintenabilité, nous utiliserons ici une gem (ou librairie) appelée friendly_id. Celle-ci permet de générer à partir d’une chaîne de caractères le lien associé à la ressource, également appelé slug, qui ne contiendra pas de caractères spéciaux (accents, etc.) et évitera toute duplication (deux ressources ne pouvant être accessibles via la même URL). Dans notre exemple, /posts/1 deviendra /posts/titre-du-poste où titre-du-poste correspond à un champ choisi du modèle.
Après avoir suivi les instructions pour l’installation de la gem, cela vous donne :
Les pages d’erreur
Les pages d’erreurs permettent d’indiquer à l’utilisateur mais également aux robots qui parcourent vos sites qu’une ressource n’est pas ou plus disponible. Techniquement, c’est votre serveur Rails qui va répondre avec un code HTTP différent en fonction de l’état de la ressource. Ces pages sont importantes pour votre référencement puisqu’elles servent aux moteurs de recherches, et notamment Google, à mieux comprendre le comportement et l’architecture de votre site.
Par défaut, Rails propose les pages 404 (page n’existe pas ou plus), 422 (ressource incomplète ou incorrecte) et 500 (erreur serveur) disponible dans le répertoire /public. Vous aurez besoin de personnaliser ces pages pour qu’elles reprennent le design global de votre site (avec votre layout/application.html.erb) ou pour renvoyer dynamiquement du contenu en fonction de l’utilisateur.
Pour les personnaliser, vous devrez d’abord spécifier les routes vers ces pages d’erreur :
Créez ensuite le controller associé :
N ‘oubliez pas de supprimer les anciennes pages présentes dans public :
rm public/{404, 422, 500}.html
Pour finir, spécifiez à votre application que les erreurs sont désormais générées dynamiquement :
Les redirections
Après avoir mis en production votre application, il se peut que vous ajoutez, modifiez ou supprimez certaines pages de votre site ou que vous changiez le nom d’un de vos posts et donc son slug. L’architecture de votre site s’en verra modifiée, ainsi que vos URLs. Or, si un moteur de recherche a déjà indexé votre site, il faudra redirigé vos anciennes pages, et donc anciennes URLs, vers de nouvelles pour ne pas perdre vos visiteurs sur vos pages 404. Il vous faut créer dans ce cas des redirections 301 pour spécifier qu’une page a été déplacée de manière permanente vers une autre.
Le système de routage de Rails permet de faire ces redirections 301 assez facilement dans le fichier routes.rb :
Vous pouvez également définir des expressions régulières (ou regexp) pour automatiser un certain type de redirections.
Les Meta Tags
Les balises Meta Tags permettent aux moteurs de recherche et aux réseaux sociaux de mieux comprendre le contenu de votre page et donc de gagner en visibilité, elles sont donc essentiels en SEO. Elles doivent être dynamiques puisqu’elles sont spécifiques à chaque page et devront être uniques pour éviter tous conflits de contenu dupliqué.
Ruby On Rails ne propose pas de système de gestion par défaut des Meta Tags, nous allons donc en mettre un en place avec les recommandations de cet article du Wagon.
Commencez par créer un fichier meta.yml dans le répertoire config qui contiendra les valeurs par défaut :
Nous aurons besoin ensuite d’initialiser la constante Ruby DEFAULT_META pour pouvoir utiliser les valeurs à n’importe quel endroit de votre application :
Créez ensuite les méthodes qui permettront de récupérer ces valeurs :
Ajoutez maintenant les Meta Tags à votre layout :
Et le tour est joué, vous pouvez désormais simplement définir de manière dynamique ces variables en fonction de votre ressource, comme par exemple ici pour posts#show :
Les données structurées
Les données structurées aident à envoyer les bons signaux aux moteurs de recherche à propos de votre application et de votre contenu, ils aident à augmenter la compréhension du contenu de votre site par les moteurs de recherche et améliorer la visibilité via des extraits enrichis et les résultats sélectionnés dans Knowledge Graph. Il faut vraiment faire l’effort de mettre en œuvre un schéma de balisage sur votre site car cette donnée est de plus en plus importante pour Google.
Pour savoir quel schéma utilisé sur votre site, je vous conseille cette série d’articles de Google.
Il existe différents formats pour les utiliser : JSON-LD, Microdata ou RDFA. Il est conseillé d’utiliser du JSON-LD par Google mais pour des soucis de simplicité, nous utiliserons généralement les Microdata.
La gem green_monkey permet d’intégrer facilement les propriétés Microdata directement dans votre application :
Le fil d’Ariane
Le fil d’Ariane ou « breadcrumb » permet de rappeler l’emplacement d’une page sur votre site dans l’arborescence globale. Il est important en SEO puisque Google recommande officiellement de proposer un fil d’Ariane sur votre site internet.
Ils existent quelques gems pour générer automatiquement un breadcrumb sur votre application, : gretel, loaf ou encore breadcrumbs_on_rails. Nous utiliserons cette dernière, customisable facilement et étant compatible avec Bootstrap, elle permet d’être mis en place rapidement.
Pour l’installer, il vous suffit d’ajouter la gem à votre Gemfile
Et ensuite d’ajouter aux controllers concernés par l’affichage du breadcrumb :
Petite astuce, si vous souhaitez intégrer les données structurées à votre breadcrumb, il vous faudra définir un builder :
Pour ensuite afficher votre breadcrumb dans votre layout :
Le sitemap
Le sitemap est le fichier qui contient la liste de vos URLs. Ce fichier est au format XML. Il donne aux moteurs de recherche des informations sur vos URLs et l’architecture de votre site. Il permet à des sites avec un contenu conséquent et une maillage complexe de mieux être compris par les moteurs de recherche et ainsi être mieux référencé.
Certaines gems permettent de le générer comme sitemap_generator, ou encore dynamic_sitemaps mais il est néanmoins possible de le construire par soi-même grâce la librairie XML builder.
Créez d’abord la route pour spécifier le controller qui gérera la requête :
Occupons nous ensuite de construire le controller associé :
Et pour finir la vue associée :
Le robots.txt
Le fichier robots.txt est un fichier texte utilisé pour le référencement naturel de votre site, contenant des instructions à destination des robots d’indexation des moteurs de recherche afin de leur préciser les pages qui peuvent ou non être indexées. Vous pouvez visiter robots-txt.com pour plus d’informations concernant son contenu.
Ruby On Rails propose par défaut un robots.txt présent dans le répertoire public . Vous pouvez, comme avec la gestion des pages erreurs ou le sitemap, le rendre dynamique et permettre définir des directives spécifiques à votre environnement, développement, pré-production ou production par exemple.
Spécifiez également l’URL de votre sitemap pour aider les robots à le trouver plus facilement.
AMP
Google AMP, pour « Accelerated Mobile Pages » est un protocole conçu par Google pour permettre un « Web plus rapide ». Les pages sous AMP sont une variante des pages web classiques avec du HTML et du JavaScript simplifiés. AMP ne garde uniquement que ce qui est nécessaire pour afficher les informations très rapidement. Qui dit protocole conçu et poussé par Google, dit protocole à implémenter et à respecter pour être dans les petits papiers de Google et donc dans les meilleurs places de la SERP.
D’abord, spécifiez à votre application le nouveau type mime en l’ajoutant à votre fichier config/initializers/mime_types.rb :
Vous devrez ensuite créer un nouveau layout AMP :
L’AMP nécessite d’inclure uniquement des balises CSS et non des balises externe. La petite astuce pour continuer à utiliser l’asset pipeline de Rails et le CSS compilé dans les vues est de créer un nouveau fichier de style SASS sous app/assets/stylesheets/amp/application.scss contenant le style que vous souhaitez pour vos pages AMP. Enregistrez ensuite ce fichier dans le pipe de précompilation en ajoutant dans le fichier config/application.rb.
Le dernier problème a géré est qu’AMP limite l’utilisation de certaines balises et nécessite d’en modifier d’autres pour fonctionner. Par exemple, la balise img devient amp-img, idem pour les iframes. La solution consiste à implémenter un scrubber pour personnaliser la méthode sanitize d’ActionView de Rails.
Ce scrubber essaiera de convertir le DOM original pour le rendre « AMP valid ».
Voilà à quoi cela ressemble :
Pour finir, vous pouvez créer les vues que vous souhaitez rendre disponibles en AMP comme par exemple app/views/posts/show.amp.slim :
N’oubliez pas de spécifier les URLs de vos pages AMP dans votre layout pour permettre à Google des les indexer :
HTTPS
Par défaut, si vous avez configurer votre serveur correctement avec votre certificat SSL, vous devriez avoir automatiquement votre application Ruby On Rails en HTTPS. Pour activer la fonctionnalité pour un environnement spécifique, vous devrez activer l’option suivante :
Bonus
Redirection non-www vers www
Dans le référencement, un des problèmes récurrents est le contenu dupliqué (duplicate content), qui correspond à deux pages différentes contenant le même contenu. Ce problème est très souvent dû à la duplication de contenu entre la version non-www (http://example.com) et la version www (http://www.example.com).
Pour contourner ce problème, une technique simple :
Les canonical
L’autre solution pour éviter le contenu dupliqué est l’utilisation de la balise link rel=canonical. Elle permet d’indiquer aux moteurs de recherche l’URL canonique sur une page donnée.
Si l’une des pages de votre site est accessible via plusieurs URLs, ou si différentes pages de votre site présentent un contenu similaire (par exemple, une page avec une version mobile et une version classique), vous devez indiquer explicitement à Google quelle est l’URL canonique pour ces pages, autrement dit celle qui fait autorité, faute de quoi Google choisira la page canonique à votre place ou considérera toutes les pages similaires égales.
L’astuce pour la mettre en place sur votre application Rails :
Le cache
Nous vous expliquions dans un précédent article sur les stratégies de mise en place pour SEO, le cache n’est pas négligeable surtout si votre site contient énormément d’URLS. Pour chaque crawl d’un site, le robot de Google lui dédie un temps déterminé. Plus vos pages se chargeront rapidement, plus Google crawlera de pages sur votre site.
Rails fournit un ensemble de fonctionnalités de mise en cache. Nous pourrions consacrer un article entier à ce sujet, je vous conseille donc de vous rendre sur la documentation officielle.
La compression
Lorsque vous mettez un site en ligne, vous testez généralement son état technique avec des outils comme PageSpeed qui vous permet de connaître la note qu’attribut Google à votre site en terme technique. Qui dit note attribuée par Google, dit facteur de classement pour votre SEO, il faudra donc viser la meilleure note pour éviter toutes pénalités.
Généralement, les problèmes que soulèvera PageSpeed seront la position de vos ressources JavaScript ainsi que la compression de vos assets. Pour le premier problème, il vous suffira de déplacer les appels de ceux-ci dans votre layout. Pour la compression, rien de plus simple, il suffit de l’activer grâce au middleware Rack::Deflater. Inséré correctement dans votre application, il peut réduire considérablement la taille de vos réponses.
Le filtre anti-spam
Vous l’avez déjà compris, en SEO, les liens (ou ancres) sont essentiels, ils permettent à vos visiteurs et aux robots de naviguer sur votre site. Il est alors vraiment important de connaitre la directive nofollow. Par défaut, si un robot consulte un lien, il le suit pour essayer d’indexer récursivement toute la page. Ceci vaut pour les liens internes de votre site mais également externes. Il faudra faire attention à tous les champs susceptibles de servir aux spammers de venir améliorer la visibilité de leurs propres sites en ajoutant des liens sur le votre. Pour cela, nous pouvons utiliser la gem Nokogiri. Il suffit d’inspecter les champs envoyés pouvant contenir des liens avant les sauvegarder.
La gem Nokogiri peut également être utilisé pour créer un crawler, à bon entendeur…
La gestion du H1 sur la page d’accueil
En SEO, une page correspond à un objectif de positionnement. Nous incluons généralement le logo de l’entreprise dans la balise <h1> pour la page d’accueil seulement (qui utilise le nom de marque comme attribut alt). Toutes les autres pages du site auront une balise texte <h1> pertinente à la page.
Pour conclure, Ruby On Rails étant un framework de développement rapide très modulable, il est assez aisé de mettre en place toutes sortes de recommandations pour un référencement optimisé aux petits oignons. De nombreux facteurs sont à prendre en compte lorsque l’on veut se positionner sur les moteurs de recherche, ce guide ne liste que ceux liés directement au développement, il ne faut toutefois pas oublier qu’un contenu original, de qualité et organisé avec une architecture qui répond aux besoins et attentes de vos visiteurs restent les clés pour atteindre la première position !
N’hésitez pas à partager et à poser toutes vos questions ou remarques en commentaire, nous nous ferons un plaisir d’y répondre !
Crédits :
- https://www.antoine-brisset.com/blog/seo-ruby-on-rails-1/
- https://nebulab.it/blog/abc-of-seo-for-ruby-on-rails-developers/
- https://2017doneright.com/comprehensive-guide-on-seo-in-rails-8b124ca81d37
- https://www.amberbit.com/blog/2015/4/23/seo-basics-for-rails-developers/
- https://www.inboundio.com/Blog/seo-for-ruby-on-rails-complete-guide
- http://codkal.com/seo-ruby-rails-guide/
- https://www.udemy.com/ruby-on-rails-seo/
- https://www.lewagon.com/blog/tuto-setup-metatags-rails
- https://www.pluralsight.com/guides/ruby-ruby-on-rails/using-https-with-ruby-on-rails
- https://github.com/hardhatdigital/google-page-speed-guidelines
