Le SEO et les méta-données
Le SEO (search engine optimisation), primordial pour tous ceux qui souhaitent être référencés par un moteur de recherche (au hasard Google) ou partager leurs pages web. De nombreuses actions sont à faire pour faciliter la vie des robots qui explorent le web. Faisons donc un petit tour !
Spoiler, ça va être un peu long.
Les méta-données
Aspect #1 : les méta-données. Ce sont des informations supplémentaires sur la page telle que l’auteur, une description, le type de contenu, etc. Ces informations sont destinées à des systèmes où à des utilisateurs avancés.
Elles prennent la forme de balises que l’on intègre au HTML du site, tout simplement.
<!-- Exemple de métadonnées -->
<meta content="Mes métas à moi">
Bon, ne croyez pas que c’est aussi simple. Comme toujours, on va avoir des problèmes. De nombreuses variantes sont attendues par différents sites, et sur certaines technologies, leur intégration peut être complexe, notamment tous ces frameworks JS qui réécrivent tout le DOM (vous, Angular et React ! Je ferai peut-être un prochain article là-dessus). En effet, les crawlers, ou robots indexeurs, n’exécutent pas tous le JavaScript et peuvent ne pas voir les modifications apportées après coup par celui-ci.
Mais que faut-il inclure ?
C’est le moment de faire notre liste d’outils, histoire de savoir ce qu’il manque. L’objectif est d’obtenir un affichage correct sur Google et lors du partage sur les plus gros sites et les réseaux sociaux.
Pour l’affichage sur les réseaux, chaque site a un affichage différent. Il faut donc essayer pour s’assurer du rendu.
Voici quelques bonnes adresses pour tester, c’est le starter-pack, mais si ça fonctionne ici, ça devrait fonctionner partout :
La base des méta-données
Certaines balises sont indispensables pour une page web. Deux des plus importantes qui doivent toujours être présentes sont le titre et la description. Il en existe beaucoup, beaucoup d’autres. La documentation de Mozilla est très bien faite si besoin. Les balises méta sur developer.mozilla.org
La balise title
Le titre de la page qui est affiché sur tous les partages, mais aussi dans l’onglet et dans l’historique du navigateur. Balise obligatoire donc, qui doit être concise et représentative de la page. Un titre, quoi.
La balise description
Même principe, c’est la description de la page web qui apparaîtra dans le corps des cartes de partages. Cette description ne doit tout de même pas être trop longue sous peine d’être tronquée. Pour donner une idée, elle devrait contenir entre 150 et 200 caractères.
Opengraph
OpenGraph est un protocole créé par Facebook pour enrichir les liens vers les pages web. C’est marrant, on dirait que c’est exactement ce que l’on cherche !
Pour le mettre en pratique, ajoutez les balises qui semblent les plus nécessaires. N’hésitez pas à parcourir la documentation pour ajouter celles qui vous paraissent utiles.
Un exemple pour ce site.
<!-- Type de contenu, on écrit des articles -->
<meta property="og:type" content="article">
<!-- Le nom du site -->
<meta property="og:site_name" content="Romain.Vidal.Fr">
<!-- L'URL de la page (sur mon environnement de dev) -->
<meta property="og:url"
content="http://localhost:1313/article/un_peu_de_seo/">
<!-- Titre de la page, la même chose que la balise title -->
<meta property="og:title" content="Romain.Vidal.Fr | Un peu de SEO">
<!-- Même chose que la balise description -->
<meta property="og:description"
content="Le SEO (search engine optimisation), primordial pour tout ce qui souhaite être référencé par un moteur de recherche (au hasard Google). De nombreuses choses sont à faire pour faciliter la vie des robots qui explore le web. Faisons donc un petit tour !">
Twitter propose à peu près la même chose, que l’on peut rajouter au besoin. Comme le spécifie la documentation, Twitter utilise tout d’abord les propriétés Twitter et se replie sur Open Graph si elles n’existent pas.
<!-- Type d'affichage préféré, le mode 'summary', voir la doc pour les alternatives -->
<meta name="twitter:card" content="summary">
<!-- Le nom de domaine -->
<meta name="twitter:domain" content="romain-vidal.fr">
<!-- Même chose que la balise title -->
<meta name="twitter:title" content="Romain.Vidal.Fr | Un peu de SEO">
<!-- Même chose que la balise description -->
<meta name="twitter:description"
content="Le SEO (search engine optimisation), primordial pour tout ce qui souhaite être référencé par un moteur de recherche (au hasard Google). De nombreuses choses sont à faire pour faciliter la vie des robots qui explore le web. Faisons donc un petit tour !">
<!-- URL de la page -->
<meta name="twitter:url"
content="http://localhost:1313/article/un_peu_de_seo/">
JSON LD
Le JSON LD est un autre format (oui, encore un) qui permet d’intégrer des métadonnées structurées. Comme ça, ça ne parle pas trop. Ce nouveau format de données, plus précis, permet à Google d’afficher des fils d’Ariane, des FAQ, des extraits d’avis, des recettes de cuisine et bien d’autres choses sur les pages de recherche.
Par exemple, Le Monde propose une recherche sur son site et un accès rapide aux catégories principales.
L’affichage dans les résultats de recherche peut faire une différence assez
notable entre deux sites. Par exemple, ici entre Decathlon et Modress avec la
recherche achat sandale. Ne demandez pas pourquoi
émoticône haussant les épaules
Si on le compare à Decathlon sur la même recherche.
On remarque que le fil d’Ariane est plus clair. Par ailleurs, des notes de produits sont ajoutées ainsi que des infos sur les prix possibles. Une jolie image vient illustrer le produit. De quoi aider l’utilisateur avant même d’ arriver sur le site.
Techniquement
Le format JSON LD permet donc d’insérer des métadonnées
un peu plus complexes dans la page au travers de balises script avec le
type application/ld+json.
<script type="application/ld+json">
// JSON LD
</script>
Google propose une longue liste de possibilités allant du fil d’Ariane aux exercices mathématiques.
La liste des possibilités offerte par Google
Une fois le script créé, il est conseillé de le faire valider par Google à ces deux adresses :
Ensuite, Google l’affichera ou ne l’affichera pas selon ses propres choix. Les images seront certainement présentes, si vous êtes en page 8 n’espérez peut-être pas voir apparaître votre barre de recherche personnalisée.
Les histoires de caches
Des robots indexeurs passent régulièrement sur votre site pour voir s’il y a eu du changement, découvrir les nouvelles pages, supprimer les anciennes, etc. Selon le trafic, le nombre de partages, la renommée du site, le contenu, le référencement va se mettre plus ou moins rapidement à jour. Ça peut être assez long, par exemple, quand vous tenez un blog que personne ne lit. émoticône regardant vers le bas d'un air triste
Certains acteurs du web offrent la possibilité de mettre à jour ce cache. D’autres non. Par exemple, si votre site est partagé sur Teams de Microsoft, il peut se passer plusieurs jours, voire semaines pour que le cache soit correctement mis à jour. Facebook propose un outil pour que son crawler revisite votre page.
Le fameux robots.txt
Le fichier robots.txt est un fichier texte utilisé pour donner des instructions aux robots pour l’indexation.
Le respect du fichier robots.txt est volontaire pour les robots web. Les robots bienveillants, comme ceux utilisés par les principaux moteurs de recherche, respecteront les instructions du fichier robots.txt. Les robots qui cherchent, par exemple, des adresses e-mails et d’autres données sensibles en feront fi. Si les robots de Google évitent de visiter les pages bloquées par le fichier robots.txt, cela n’empêche pas votre résultat de figurer dans les recherches Google. Les raisons ici.
Le fichier robots.txt sert donc seulement à limiter l’accès des robots à certaines ressources. Une utilité pratique peut être, par exemple, pour une adresse générant pour chaque utilisateur un PDF personnalisé. On ne souhaite dans ce cas pas que la page soit indexée, car ce ne serait pas pertinent et utiliserait des ressources inutilement.
C’est bien beau, et au final ?
Au final ça commence tout de suite à faire beaucoup de texte juste pour les robots.
Voilà un example de ce à quoi ça ressemble pour ce site :
<!-- La langue du document, le seul qui ne soit pas dans le head -->
<html lang="fr">
<head>
<!-- Encodage de la page et 'Zoom' par défaut -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Style du site -->
<link rel="stylesheet"
href="/style.b3795ec09890b2cb2704452060a62f4d5fc5a7796548e20cf72730a60b5e7b4d.css"
integrity="sha256-s3lewJiQsssnBEUgYKYvTV/Fp3llSOIM9ycwpgtee00=">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180"
href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32"
href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16"
href="/favicon/favicon-16x16.png">
<!-- Manifest pour les autres types d'image grand format -->
<link rel="manifest" href="/favicon/site.webmanifest">
<!-- Méta-data de base pour affichage, historique navigateur, etc -->
<title>Romain.Vidal.Fr | Un peu de SEO</title>
<meta name="description"
content="Le SEO (search engine optimisation), primordial pour tout ce qui souhaite être référencé par un moteur de recherche (au hasard Google). De nombreuses choses sont à faire pour faciliter la vie des robots qui explore le web. Faisons donc un petit tour !">
<!-- Partage sur le web et certains réseaux comme Facebook -->
<meta property="og:type" content="article">
<meta property="og:site_name" content="Romain.Vidal.Fr">
<meta property="og:url"
content="http://localhost:1313/article/un_peu_de_seo/">
<meta property="og:title" content="Romain.Vidal.Fr | Un peu de SEO">
<meta property="og:description"
content="Le SEO (search engine optimisation), primordial pour tout ce qui souhaite être référencé par un moteur de recherche (au hasard Google). De nombreuses choses sont à faire pour faciliter la vie des robots qui explore le web. Faisons donc un petit tour !">
<!-- Partage sur des réseaux de type twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="romain-vidal.fr">
<meta name="twitter:title" content="Romain.Vidal.Fr | Un peu de SEO">
<meta name="twitter:description"
content="Le SEO (search engine optimisation), primordial pour tout ce qui souhaite être référencé par un moteur de recherche (au hasard Google). De nombreuses choses sont à faire pour faciliter la vie des robots qui explore le web. Faisons donc un petit tour !">
<meta name="twitter:url"
content="http://localhost:1313/article/un_peu_de_seo/">
<!-- Sur certain article, une image de couverture -->
<meta property="og:image" content="link">
<meta property="og:image:alt" content="alt">
<meta name="twitter:image:src" content="link">
<meta name="twitter:image:alt" content="alt">
</head>
<doby><!-- ... --></doby>
</html>
Bon, on commence à en avoir pas mal, c’est déjà bien.
Les performances
Eh bien oui, les performances sont une métrique phare des moteurs de recherche. Figurez-vous que plus votre site affichera un contenu rapidement, clair et précis, moins les moteurs de recherche auront du mal à indexer vos résultats. Évident. Quelques métriques ont déjà été abordées dans cet article, si ça vous intéresse.
Bonnes pratiques de conception d’un blog
Le contenu
Si le contenu vient parmi les derniers points ce n’est pas qu’il est le moins important, mais là-dessus pas de règle particulière. Soyez clair sur le thème abordé, et soyez libre de faire ce que bon vous semble ! Il faut juste être cohérent avec sa ligne éditoriale, poser les thèmes principaux clairement, bref, écrire un bon article.
Avec tout ça, j’espère que vous arriverez à vous propulser, non pas vers les tops, mais tout droit vers le cœur de votre audience, et que vous ferez découvrir des sujets qui vous tiennent à cœur à tous vos lecteurs.
Faut-il traduire ?
Oui ! Mais quoi ? Eh bien tout, y compris les balises meta. C’est le seul conseil ici.
Conclusion
Le référencement n’est pas une mince affaire, il faut avoir réfléchi correctement au public visé et travailler sur plusieurs fronts avant d’obtenir des résultats.
Si le travail sur les méta-données est important, il faut avant tout créer un contenu utile et honnête. Le contenu est la clé d’un référencement de qualité. Pour un blog, c’est le travail de rédaction qui est le principal effort. Le reste est présent uniquement pour rendre l’expérience utilisateur légèrement plus agréable.