Les bases du SEO technique pour les développeurs

Le SEO c’est quelque chose que la plupart des développeurs essaient de refiler à l’équipe marketing. De toute façon, ça n’a pas grand chose en commun avec les activités quotidiennes des devs n’est-ce-pas? Donc pas besoin de prendre le temps de se familiariser avec tout ça. Sauf que, connaître les bonnes pratiques en SEO peut avoir de nombreux avantages pour un développeur.

• Ça peut vous aider à donner de la visibilité à des choses utiles. Rien de pire que de passer des heures à chercher des infos pour résoudre un problème technique….et de faire choux blanc. Alors, pour aider les autres vous publiez un article sur votre blog, et là, il se retrouve enfoui au fin fond des pages de résultats. Et le cycle des embrouilles continue car d’autres personnes n’auront pas accès à vos conseils pour se dépatouiller.
• Cela rend votre profil plus attrayant. Et oui, un full stack se doit de connaître le SEO. De plus en plus, on voit des offres d’emplois spécifiant le besoin de s’y connaître en référencement naturel. C’est la vie !
• Il y a pas mal de choses à apprendre en termes de performance et de rendering JavaScript.

Le SEO c’est quoi ?

Le SEO c’est l’ensemble des techniques utilisées pour s’assurer qu’un site ressortent bien dans les pages de résultats des moteurs de recherche. Le référencement naturel (SEO) est une pratique intéressante car elle recoupe pas mal d’aspects techniques de l’accessibilité Web tout en prenant en compte les besoins des utilisateurs d’un point de vue contenu. Le but ultime est de répondre aux besoins des gens avec les bonnes informations au bon moment.

Pourquoi est-ce que le SEO, c’est important ?

En tant que programmeur ou développeur, c’est normal de se demander à quoi sert cette pratique qu’on associe au marketing en ligne. C’est assez simple, Google fait la pluie et le beau temps en ce moment. Il y a des dizaines de milliards de recherche faites sur Google par mois et cela ne fait qu’augmenter. Résultat des courses, même le plus beau site au monde, avec un code impeccable ne sert à presque rien s’il n’est pas indexé correctement.

Notions de base pour comprendre le SEO technique

Pour bien se classer dans Google ou tout autre moteur de recherche, il est important d’avoir une compréhension de base du fonctionnement des moteurs de recherche.

Comment est-ce que Google lit un site ?

Il y 3 phases: crawl, indexation, présentation des résultats. Les bots savent exécuter du JS mais des fois, ils prennent votre code pour de la prose…

Ce qui nous intéresse plus particulièrement dans cette illustration du processus de Google, c’est les phases de découverte, de crawl et d’indexation. Durant la découverte, le bot se balade à travers le Web à la recherche de contenus pertinents. Puis, le bot explore les pages sur le Web selon un processus algorithmique. Suite à cela, chaque page est indexée selon son contenu (texte, image et code).

Le web moderne est plus compliqué qu’on ne le pense. Parfois, les bots ont du mal à comprendre ce qui leur est présenté :

Google Bot et le JavaScript : tout un parcours du combattant

Googlebot peut lire du javascript mais il se met en place un backlog pour déterminer quelles pages sont traitées en priorité.

Le rendering

Google a un processus d’indexation en deux vagues :

• Le bot indexe le contenu HTML dans un premier temps après le crawl
• Les pages avec du JS qui doivent être rendered sont ajoutées à une queue qui va être affichées des jours, semaines ou mois plus tard.

Des pages lentes à se charger peuvent impacter le crawl. On vous conseille donc d’aller vers du rendu hybride ou côté serveur (SSR – Server Side Rendering). Miser sur du SSR ou bien un rendering hybride

Cela permet à Google de mieux découvrir vos pages via les liens dans le contenu. Si les liens sont dans le HTML initial, Google peut commencer à passer à travers la liste de suite !

Attention il faut impérativement s’assurer que les robots et pas uniquement les navigateurs ont droit au “rendering” !

Comment tester si ça fonctionne bien ?

• Vérifiez le Cache Google
• Google Mobile Test : Google vous donne accès à la même console de debug JS que dans le navigateur
• Vérifiez Fetch & Render dans la Google Search Console
• Testez dans Rendertron !
• Utilisez Fetch and Render dans Screaming Frog
• Testez avec Ngrok en local

Voici un lien vers la documentation officielle de Google pour vous aider. Vous pouvez aussi contourner le problème avec du dynamic rendering pour spécifier au bot avec un user-agent de moteur de recherche qu’il a droit à un rendering à part. Voici les outils que l’on vous conseille dans ce cas là : Puppeteer et Rendertron.

L’art de tisser des liens en JS

Faites attention à la façon dont vous mettez en place vos liens :

• Ne mettez pas une ancre générique qui ne donne pas de contexte.
• onclick est accepté.
• N’acceptez pas les demandes d’obfusquer les liens en JS de la part des SEOs.
• On arrête avec les fragments, ce n’est pas SEO-friendly

S’il vous plaît ne faites pas des trucs pareils, cela me fait pleurer des larmes de sang :

<a href="#" onclick="goTo('stuff')">Still wrong! ಠ_ಠ</a>
<a href="javascript:goTo('stuff')">No, just don't. ಥ﹏ಥ</a>
<a href="/stuff" onclick="changePage('lol')">WAT?! ಠ益ಠ</a>
<span onclick="goTo('stuff')">WAT NO (╯°□°）╯︵ ┻━┻</span>

Attention aux réponses HTTP

• 404 VS soft 404 : Google sait identitifer une page 404 même lorsque le serveur renvoie une 200, le code 200 étant une réponse classique d’une page web bien servie. Une soft 404 est une page 200 qui pour Google ressemble à une 404. Pour éviter de lui faire perdre son temp, pensez à indiquer les 404 avec le bon code de retour.
• 302 c’est temporaire, à ne pas utiliser si vous souhaitez faire une redirection permanente.
• 301 c’est permanent et ça passe les acquis SEO : c’est notre façon favorite de faire des redirections pour cette raison.
• Les meta-refresh, c’est dépassé et d’un point de vue expérience utilisateur c’est… nope.

Vous pouvez tester vos redirections pour vous faire une idée, ou regarder du côté de Search Console, Google vous remonte ce type d’alerte.

Les images et le SEO

Voici les quelques conseils simples à prendre en compte quand on veut optimiser les images pour le référencement naturel :

• Formats next gen : JPEG 2000, qui date de 1997 mais n’est pas encore implémenté dans nos navigateurs, JPEG XR qui lui date de 2007, et WebP qui date de 2010 – pour le moment, il n’y a que WebP qui est compatible avec Chrome et Firefox. Le reste des formats n’est pas supporté malheureusement.
• Compresser les images : la compression des images, on adore ça. On vous conseille de tester Guetzli, un algorithme de compression Open Source de Google qui prend en charge vos JPEG.
• Ne pas les retailler dans le navigateur : cela va améliorer l’expérience utilisateur ainsi que votre performance.
• Avoir un attribut ALT qui a du sens pour chaque image. C’est important pour l’accessibilité mais aussi le référencement de vos images.
• Bien nommer les images : pareil pour les titres d’images. 001.jpg est bien moins SEO-friendly que pomme-rouge-spartan.jpg
• Il faut faire un lazy load qui charge quand même les balises images qui ne sont pas initialement affichées. L’image doit être trouvable par le bot de Google.

Conseils pour le SEO mobile

Fin 2017, de nouvelles règles arrivent pour le positionnement des sites sur Google mobile. Malheureusement, tout le monde n’est pas nécessairement au courant que Google dispose d’un index mobile dédié. Voici quelques conseils pour couvrir les bases du SEO mobile :

• Auditer les pop-ups pour savoir si tout est OK (pour éviter une pénalité Google)
  • Les pop-ups ne peuvent pas faire plus que 15% de l’écran
  • Pas de pop-up de choix de langue
  • Certains pop-ups légaux sont permis
  • Pas d’overlay massif !
• La vitesse de chargement est un critère de positionnement.
• Évaluer si AMP (accelerated mobile pages) est pour vous.

Validez si tout est approuvé dans l’outil de test mobile de Google.

Et si on vous embête avec les balises meta

La meta Title

C’est un élément qui compte pour le positionnement SEO, pensez à les composer en suivant ces

• 70 caractères maximum,
• Unique à chaque page,
• On utilise | (pipe, ou colonne) comme nomenclature à la fin dans les titres (si vous avez la place bien sur)

Meta descriptions

Un argument marketing de taille, pensez donc à respecter quelques régles simples :

• 155 caractères max,
• Unique à chaque page,
• Encourage au clic – doit être rédigé par un rédacteur,
• Si vous n’avez pas de contenu proposé par le marketing, laissez ça vide. C’est la recommandation officielle plutôt que de mettre n’importe quoi. Si c’est vide, le machine learning de Google va composer quelque chose. Cela ne sera pas nécessairement bon… mais ça, c’est au marketing de le savoir.

Et si le site est bilingue ?

Il faut indiquer la langue en utilisant Href lang :

• La structure URL doit toujours comprendre la langue dans un répertoire dédié du type /fr/ et /en/ ou bien si vous avez plusieurs pays à couvrir /fr-ca/, /fr-be/, /fr-fr/, etc.
• Pensez à l’attribut lang dans votre code. Par défaut celui-ci est placé sur l’élément html (root) de la page. Vous pouvez changer cet attribut à n’importe quel moment au sein de votre code si la langue change en cours de route. (et si vous utiliser WordPress, ce plugin pour ajouter des attributs hreflang et lang peut vous servir)
• Votre page d’accueil doit toujours avoir une langue par défaut pour le Google bot.
• Vous pouvez déclarer cela dans le sitemap.xml ou bien dans l’en-tête HTTP (Helmet est là pour ça en React)
• Consultez la documentation officielle pour vous aider.

Les fichiers SEO à connaître

Le fichier robots.txt

Un fichier robots.txt est à la racine et indique le sitemap.xml. Il ne doit pas être utilisé pour désindexer les pages. Le meilleur moyen de vous orienter ici est de vous inviter à lire la documentation plutôt claire de Google sur le robot.txt.

Les fichiers sitemap.xml

Un sitemap.xml est une carte de route du site Web que l’on soumet à Google pour aider l’indexation. Le maximum d’URLs pouvant être contenus dans ce fichier est de 50,000. Après cela, il faut créer un fichier sitemap_index.xml qui va lister les autres sitemap.xml du site. Aujourd’hui, beaucoup de plugins génèrent automatiquement plusieurs sitemap.xml avec un fichier index. Il faut éviter de lister les pages 404, canoniques ou bien no-index dans ce document. Il existe différents types de sitemap.xml : son, images, vidéo, news, etc.

Une fois n’est pas coutume, la documentation de Google est très bien faite ici.

Les bonnes pratiques pour vos URLs

Vos URLs comptent aussi dans tout cela, aussi bien pour l’expérience utilisateur que pour l’optimisation du rendu autour de Google (indexation comme présentation des résultats). Pour vos URLs, pensez donc à :

• 115 caractères grand maximum,
• Dans la bonne langue,
• On remplace les variables et les codes par des mots lisibles, (réécriture d’URL),
• Pas de majuscules,
• Pas d’accents,
• Pas d’emojis,
• Doit refléter la hiérarchie du site.

Ce sera tout pour ce tour d’horizon des choses à optimiser avant d’aller plus loin. N’hésitez pas à commenter si vous avez des astuces ou interrogations à partager.