L'une de mes devises dans la vie et dans les affaires est la suivante: "Si Google vous dit de faire quelque chose, vous feriez mieux de le faire."

Et quand il s'agit d'utiliser des balises META HTML pour le référencement, aucun de nous ne devrait déconner.

Cela dit, vous savez comment c'est avec la recherche Google. Les algorithmes changent constamment et ce que Google juge important une année tombe facilement au bord du chemin le lendemain. C'est pourquoi certaines des balises META que vous pourriez rencontrer ne sont rien de plus que des vestiges hérités de ce que Google utilisé se soucier de.

Ce guide vous aidera à vous concentrer sur les balises META dont vous avez absolument besoin et sur ce que vous pouvez en faire.

Que sont les balises Meta HTML?

La tête d'une page Web contient de nombreuses informations sur le contenu qui s'y trouve. C'est ici que vous trouverez vos balises META HTML ainsi que les liens CSS ou JavaScript qui s'appliquent à la page.

Voici un exemple de l'apparence d'un récent article WebDesigner Depot sur les bibliothèques CSS:

WebDesigner Depot - Balises Meta HTML

Vous pouvez glaner quelques détails importants sur la page uniquement à partir de cet extrait:

  • Le (méta) titre
  • La méta description
  • Le type de méta-contenu et la fenêtre d'affichage

Ce sont toutes des balises META. La plupart du temps, ils sont écrits en HTML sous forme de paire nom / valeur. Par exemple

Essentiellement, les balises META ne sont rien de plus que des données sur les données de votre page Web. Ils n'apparaissent jamais sur la page. Ils sont juste en arrière-plan, attendant que les robots de recherche détectent le code HTML et l'utilisent pour améliorer les résultats de recherche de la page. Ils sont également utiles pour les navigateurs, les flux RSS et les plateformes de médias sociaux qui fournissent ces informations (et affichent le contenu) aux utilisateurs.

Quelles balises Meta devez-vous utiliser?

On pourrait dire que toutes les balises META reconnues par Google et d'autres moteurs de recherche valent la peine d'être utilisées. Mais comme pour tout ce que vous faites dans la conception et le développement Web, vous devez choisir judicieusement vos batailles.

Donc, plutôt que de passer votre temps à remplir vos pages Web avec toutes les balises META possibles, familiarisez-vous avec celles qui sont disponibles et celles qui valent la peine d'être utilisées.

Titre

Exemple HTML

5 Ways to Beef Up Your WordPress Security Today

Qu'est ce que ça fait?

Cela indique le nom de la page.

En avez-vous vraiment besoin?

Oui, celui-ci est non négociable car il indique aux moteurs de recherche quel est le nom de la page.

Cette balise est pratique si vous souhaitez également personnaliser votre titre spécifiquement pour les résultats de recherche. Supposons donc que vous ayez écrit un titre de clickbait afin que les visiteurs qui le voient sur le site soient obligés de cliquer. Quelque chose comme:

Comment gagner un salaire à six chiffres avec rien de plus que votre ordinateur portable, votre passeport et votre meilleur ami

Cette chaîne de titre comporte 98 caractères et il est impossible pour Google de l'afficher en entier. Plutôt que de réécrire le titre de votre site, vous pouvez utiliser la balise de titre pour donner à Google un titre plus conforme à ses normes, comme:

Earn 6 Figures with Your Laptop, Passport, and Your Best Friend

Cela fait 56 caractères, dans la limite de titre de Google, et fonctionne aussi bien que l'original

La description

Exemple HTML

Wqu'est-ce que ça fait?

Ceci est un bref résumé de ce qui se trouve sur la page. Dans la recherche, il s'agit de la description de la page qui apparaît sous le titre de la page et l'URL.

En avez-vous vraiment besoin?

Oui, c'est une autre balise META essentielle.

Si vous laissez à Google le soin de créer une description de la page, il ne sera probablement rien de plus que les 160 premiers caractères de ce qu'il y trouve. Et si vous avez des annonces en haut de la page, du texte alternatif d'image ou tout autre élément que ses machines peuvent lire, vous risquez de vous retrouver avec une méta description merdique.

Alors, prenez le temps d'en rédiger un.

Jeu de caractères

Exemple HTML

Qu'est ce que ça fait?

Cette balise Meta définit le jeu de caractères que le navigateur doit utiliser pour interpréter le contenu.

En avez-vous vraiment besoin?

UTF-8 n'est pas le seul jeu de caractères ni universellement acceptable. Assurez-vous donc que vous avez défini le jeu de caractères par défaut pour votre site Web à l'aide de cette balise Meta.

Si vous ne savez pas si votre site Web a besoin d'un caractère différent, reportez-vous à cette liste. Il est sûr de dire que si le site Web doit être traduit pour un public international, vous devrez certainement utiliser une balise de jeu de caractères différente de celle d’UTF-8.

Hreflang

Exemple HTML

Qu'est ce que ça fait?

Cette balise indique à Google dans quelle langue ou dialecte régional le contenu de la page est écrit, afin qu'il puisse le montrer aux bons utilisateurs.

En avez-vous vraiment besoin?

Il y a plusieurs raisons d'utiliser cette balise META:

  1. Lorsque vous avez créé un site Web international avec différentes versions traduites;
  2. Lorsque vous avez écrit le contenu dans un dialecte spécifique, comme en-nous contre. en-gb;
  3. Lorsque votre page contient un mélange de langues ou de dialectes et que vous souhaitez que chacun d'eux soit détecté.

Fenêtre

Exemple HTML

Qu'est ce que ça fait?

Il fournit des instructions sur la façon dont Google doit afficher votre page sur tous les appareils, mais c'est particulièrement important dans ce monde axé sur les mobiles.

En avez-vous vraiment besoin?

Oui. La balise META de la fenêtre d'affichage est celle que Google s'est donné beaucoup de mal pour expliquer. Fondamentalement, si vous ne l'incluez pas ou s'il est utilisé de manière incorrecte, vous pouvez perturber l'expérience de visualisation des utilisateurs sur les appareils mobiles.

C'est pourquoi Google recommande de définir le contenu sur largeur = largeur de l'appareil, échelle initiale = 1 à chaque fois. Si vous essayez d'introduire des variables comme l'échelle minimale, vous risquez de nuire à l'apparence de votre site Web car il se transforme de quelque chose d'aussi simple que l'orientation portrait en paysage.

Lien canonique

Exemple HTML

Qu'est ce que ça fait?

Lorsque vous avez du contenu en double sur votre site Web ou des pages très similaires les unes aux autres, la balise META canonique indique à Google quelle page est l'original et devrait y avoir du trafic.

En avez-vous vraiment besoin?

Google ne prend pas la gentillesse de dupliquer le contenu. Mais disons que votre article "5 façons de renforcer votre sécurité WordPress aujourd'hui" est une réécriture d'un article intitulé "7 façons de renforcer la sécurité WordPress" de 2015.

Plutôt que de laisser Google vous pénaliser pour avoir un contenu similaire sur votre site Web (et, par conséquent, essayer de classer deux fois pour la même chose), vous utiliserez cette balise META pour montrer à Google où se trouve l'original.

Cela serait également utile si vous modifiez la structure de votre URL et souhaitez vous assurer que tout le trafic est dirigé vers le lien le plus récent.

Des robots

Exemple HTML

Ou:

Qu'est ce que ça fait?

Les balises META des robots indiquent à tous les robots de recherche («robots») ou robots spécifiques («googlebot», «bingbot», «duckduckbot», etc.) comment traiter une page. Cela concerne généralement la façon dont une page doit être indexée.

En avez-vous vraiment besoin?

Par défaut, les moteurs de recherche vont indexer et suivre les liens sur chaque page que vous créez sur votre site Web.

Il y a plusieurs raisons pour lesquelles vous pourriez demander aux moteurs de recherche de faire autrement:

  • noindex: Utilisez-le lorsque vous souhaitez masquer une page de la recherche. (Ne vous fiez pas à cela pour la sécurité, rappelez-vous: ce n'est qu'une suggestion.)
  • pas de suivi: Ceci est utile pour les blogs qui acceptent le contenu des contributeurs mais ne vérifient pas le contenu. De cette façon, si des liens d'affiliation sont implantés sur la page, Google ne les suivra pas.
  • nosnippet ou extrait max: Cela contrôle la façon dont votre texte, image ou extrait de vidéo apparaît dans la recherche.
  • noarchive: S'il existe des versions plus anciennes d'une page en cache, utilisez-la pour interdire aux moteurs de recherche de les afficher.
  • indisponible_après: (date): C'est un bon pour une promotion limitée, comme autour des ventes du Black Friday. Bien que vous souhaitiez peut-être générer du trafic vers la page d'octobre à décembre, il est logique de le retirer de la recherche une fois les vacances terminées et les offres ne sont plus valables.

Vérification du site Google

Exemple HTML

Qu'est ce que ça fait?

C'est l'une des méthodes que vous pouvez utiliser pour vérifier la propriété de votre site pour Google Search Console.

En avez-vous vraiment besoin?

Vous n'avez pas besoin de cette balise META si vous avez choisi l'une des autres options. Par exemple, vous pouvez vérifier la propriété du site via votre code de suivi Google Analytics ou en mettant à jour votre enregistrement DNS. Si vous préférez, vous pouvez simplement ajouter la balise Meta HTML à votre en-tête.

Cartes Twitter et Open Graph (médias sociaux)

Exemple HTML

     

Qu'est ce que ça fait?

Les balises META Open Graph (comme l'extrait ci-dessus) indiquent à Facebook et LinkedIn comment afficher les métadonnées d'une page ou d'une publication partagée sur ces plateformes de médias sociaux.

Les balises META de la carte Twitter font de même, à l'exception de Twitter et demandent généralement votre identifiant (@) également.

En avez-vous vraiment besoin?

Cela peut aider, mais c'est loin d'être essentiel. D'après mon expérience, lorsque je remplis les métadonnées de base (c'est-à-dire le titre, la méta description, l'image en vedette) pour une page de mon site Web, c'est exactement ce qui apparaît lorsque je le fais la promotion sur les réseaux sociaux.

Emballer

Il ne s'agit en aucun cas d'une liste exhaustive de toutes les balises META existantes.

Par exemple, vous pouvez rencontrer des pages Web contenant des balises META héritées comme celles qui déclarent l'auteur, le droit d'auteur ou l'évaluation. Celles-ci ne sont plus nécessaires et vous ne devriez pas perdre votre temps avec elles.

Qu'est-ce que c'est, est une liste exhaustive des balises META HTML que vous devrait utiliser lorsque cela est pertinent.

Donc, concentrez-vous sur la possibilité pour les moteurs de recherche de savoir exactement ce dont ils ont besoin pour indexer votre page tout en empêchant vos documents HTML d'être dépassés par des balises inutiles.

Image sélectionnée via Unsplash.