Voici un index qui regroupe les balises les plus importantes pour un concepteur de page web souhaitant optimiser son site pour les moteurs de recherche, avec une brève explication de l’utilité de chaque balise :
1. Les balises essentielles pour toutes les pages html
<!DOCTYPE html>
Cette balise définit la version de HTML utilisée pour le document. Elle doit être placée en tout début de fichier pour assurer une interprétation correcte du code HTML par les navigateurs et les moteurs de recherche.
<html lang="fr">
La balise <html> englobe tout le contenu de la page, et l’attribut lang permet de spécifier la langue principale du contenu, ce qui est important pour le référencement et l’accessibilité.
<head>
Cette balise englobe les métadonnées du document, qui fournissent des informations sur la page aux navigateurs et aux moteurs de recherche.
<meta charset="UTF-8">
La balise <meta> avec l’attribut charset indique l’encodage de caractères utilisé pour le document, afin d’assurer l’affichage correct des caractères spéciaux et accentués.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cette balise permet de définir le comportement de la page sur les appareils mobiles et d’assurer un affichage adaptatif (responsive) en fonction de la taille de l’écran.
<meta name="description" content="Description courte et pertinente de la page">
Cette balise fournit une description concise et pertinente de la page, qui peut être affichée dans les résultats de recherche et influencer le taux de clics.
<title>Titre de la page - Nom de votre site</title>
La balise <title> définit le titre de la page, qui est un élément essentiel pour le référencement et l’affichage des résultats de recherche.
<h1>, <h2>, <h3>…
Les balises de titres permettent de structurer le contenu en sections hiérarchiques, facilitant la navigation et l’interprétation du contenu par les moteurs de recherche.
2. Les balises utiles pour le référencement et l’accessibilité :
<header>, <nav>, <main>, <article>, <section>, <aside> et <footer>
Ces balises sémantiques structurent le contenu de la page et facilitent la compréhension du contenu par les moteurs de recherche et les outils d’accessibilité.
<a href="<https://www.example.com>">Lien</a>
La balise <a> crée des liens hypertextes vers d’autres pages ou ressources, ce qui est essentiel pour la navigation et la découverte de contenu par les moteurs de recherche.
<img src="image.jpg" alt="Description de l'image">
La balise <img> permet d’insérer des images dans la page. L’attribut alt fournit la description textuelle de l’image, qui est importante pour l’accessibilité et l’indexation des images par les moteurs de recherche.
<link rel="canonical" href="https://www.example.com/url-canonique">
La balise <link> avec l’attribut rel="canonical" permet d’indiquer l’URL canonique d’une page, ce qui est utile pour éviter les problèmes de contenu dupliqué et améliorer le référencement.
<meta name="author" content="Auteur de la page">
Cette balise permet d’indiquer l’auteur de la page, ce qui peut ajouter de la crédibilité et de la confiance pour les visiteurs et les moteurs de recherche.
Balises de données structurées (schema.org)
Ces balises permettent d’ajouter des informations supplémentaires sur le contenu de la page, facilitant la compréhension et l’indexation par les moteurs de recherche. Elles sont généralement implémentées en utilisant la syntaxe JSON-LD et les vocabulaires schema.org. Voir l’annexe sur les données structurées pour comprendre leur utilisation !
3. Balises pour charger des ressources externes et/ou créer des liens vers d’autres ressources :
<link rel="stylesheet" href="styles.css">
Cette balise permet de lier une feuille de style externe au document HTML, ce qui facilite la maintenance et l’optimisation du code CSS.
<script src="script.js" defer></script>
La balise <script> permet d’intégrer du code JavaScript dans la page. L’attribut defer assure que le script est exécuté après le chargement du contenu de la page, améliorant ainsi les performances.
<meta name="robots" content="index, follow">
Cette balise permet de donner des instructions aux moteurs de recherche concernant l’indexation de la page et le suivi des liens. Par exemple, « index, follow » indique aux moteurs de recherche d’indexer la page et de suivre les liens qu’elle contient.
<link rel="alternate" href="<https://www.example.com/en/>" hreflang="en">
La balise <link> avec l’attribut rel="alternate" et hreflang permet d’indiquer aux moteurs de recherche des versions alternatives de la page dans d’autres langues. Cela aide à mieux cibler les résultats de recherche en fonction de la langue de l’utilisateur.
<link rel="icon" href="favicon.ico" type="image/x-icon">
La balise <link> avec l’attribut rel="icon" permet de définir une icône (favicon) pour la page, qui s’affiche dans l’onglet du navigateur et dans les signets. Cela améliore la visibilité et la reconnaissance de la marque.
Balises Open Graph
Ces balises permettent d’optimiser la visibilité et la présentation de la page lorsqu’elle est partagée sur les réseaux sociaux, en fournissant des informations telles que le titre, la description, l’image et l’URL.
→ Voir l’annexe sur les balises Open Graph pour voir un exemple d’implémentation !
4. Balise pour les informations supplémentaires (non obligatoires mais recommandées)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Cette balise permet d’assurer la compatibilité de la page avec les anciennes versions d’Internet Explorer en indiquant le mode d’affichage le plus récent.
<meta name="copyright" content="Droits d'auteur, année">
Cette balise permet d’afficher les informations sur les droits d’auteur de la page, ce qui est utile pour protéger le contenu et établir l’autorité du site.
<meta name="application-name" content="Nom de l'application">
Cette balise peut être utilisée pour indiquer le nom d’une application web associée à la page. Cela peut être utile pour les moteurs de recherche et les plates-formes qui référencent les applications web.
<time datetime="2022-01-01">1er janvier 2022</time>
La balise <time> permet de baliser les dates et les heures de manière sémantique, ce qui facilite la compréhension et le traitement des informations temporelles par les moteurs de recherche et les outils d’accessibilité.
<meta name="keywords" content="mot-clé1, mot-clé2, mot-clé3">
Bien que cette balise ait perdu de son importance pour le référencement, elle peut toujours être utilisée pour indiquer les mots-clés principaux de la page. Cependant, il est préférable de se concentrer sur la qualité et la pertinence du contenu pour un meilleur référencement.
Annexes
Exemple d’utilisation des balises Schema.org
Dans cet exemple, j’ai utilisé la syntaxe JSON-LD et le vocabulaire Schema.org pour décrire une recette de tarte aux pommes. Les informations structurées incluent le nom de la recette, l’auteur, la date de publication, la description, les temps de préparation et de cuisson, les ingrédients, les instructions et la note globale.
En ajoutant ces balises Schema.org, les moteurs de recherche peuvent mieux comprendre le contenu de la page et afficher des résultats de recherche enrichis
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recette de la tarte aux pommes - Les Gourmandises de Sophie</title>
<meta name="description" content="Découvrez notre délicieuse recette de la tarte aux pommes, simple et rapide à réaliser.">
<!-- Données structurées de la page -->
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Tarte aux pommes",
"author": {
"@type": "Person",
"name": "Sophie"
},
"datePublished": "2020-10-05",
"description": "Une délicieuse recette de tarte aux pommes, simple et rapide à réaliser.",
"prepTime": "PT30M",
"cookTime": "PT45M",
"totalTime": "PT1H15M",
"recipeYield": "8 parts",
"image": "https://www.example.com/images/tarte-aux-pommes.jpg",
"recipeIngredient": [
"1 pâte brisée",
"4 pommes",
"50 g de sucre",
"2 œufs",
"20 cl de crème fraîche",
"1 cuillère à café de cannelle"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Préchauffez le four à 180°C (thermostat 6)."
},
{
"@type": "HowToStep",
"text": "Étalez la pâte brisée dans un moule à tarte et piquez le fond avec une fourchette."
},
{
"@type": "HowToStep",
"text": "Pelez et coupez les pommes en fines lamelles, puis disposez-les sur la pâte."
},
{
"@type": "HowToStep",
"text": "Dans un bol, mélangez les œufs, le sucre, la crème fraîche et la cannelle, puis versez le mélange sur les pommes."
},
{
"@type": "HowToStep",
"text": "Enfournez la tarte et faites cuire pendant 45 minutes, jusqu'à ce qu'elle soit dorée."
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"ratingCount": "120"
}
}
</script>
<!-- Fin données structurées -->
</head>
<body>
<!-- Contenu de la page : titre, recette, instructions, etc. -->
</body>
</html>Résultat visuel :
Ressources externes
https://www.hostinger.fr/tutoriels/balisage-schema-org
https://blog.hubspot.fr/marketing/schema-org
https://fr.semrush.com/blog/guide-balisage-schema/Balises open graph
Voici un exemple concret d’application des balises Open Graph pour partager une recette de cuisine sur les réseaux sociaux :
<!DOCTYPE html>
<html lang="fr" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recette de la tarte aux pommes - Les Gourmandises de Sophie</title>
<meta name="description" content="Découvrez notre délicieuse recette de la tarte aux pommes, simple et rapide à réaliser.">
<!-- Balises Open Graph -->
<meta property="og:title" content="Tarte aux pommes">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com/recettes/tarte-aux-pommes">
<meta property="og:image" content="https://www.example.com/images/tarte-aux-pommes.jpg">
<meta property="og:description" content="Pâte brisée, sucre vanillé, beurre, pomme">
<meta property="og:site_name" content="marmiton.org">
<meta property="article:published_time" content="2020-10-05T12:00:00+01:00">
<meta property="article:author" content="Sophie">
<!-- Fin balises Open Graph -->
</head>
<body>
<!-- Contenu de la page : titre, recette, instructions, etc. -->
</body>
</html>Type de résultat obtenu :
Ressources externes complémentaires :
https://www.referenseo.com/guide-seo/open-graph/
Balises Open Graph, Twitter cards et SEO : le guide ultime pour les optimiser pour votre référencement
https://blog.hubspot.fr/marketing/open-graph-facebook