Optimiser le HTML pour le référencement

Cet article va vous indiquer comment utiliser les balises HTML pour mieux structurer votre contenu, afin de mettre en valeur les données importantes de vos articles.

Les balises HTML importantes

Les balises HTML permettent de structurer un document cohérent. Elles indiquent la valeur sémantique de leur contenu et sont également utilisées par les moteurs pour restituer leurs résultats.

<title> - Titre de page

Cette balise devrait contenir le thème abordé sur la page. Evitez l'accumulation excessive de mots-clés; définissez simplement et ponctuellement le thème abordé, avec des mots clés pertinents et une expression cohérente pour l'utilisateur.

<title>Améliorer le code HTML pour le référencement Google</title>

<meta name="description"> - Description de la page

La meta description peut être utilisée pour afficher une description ciblée afin d'éviter que le moteur de restitue des portions de texte. Elle peut contenir des mots clés en rapport avec le thème abordé, et doit surtout être une description du thème étudié sur la page.

<meta name="description" content="Un guide qui va vous permettre d'améliorer la mise en valeur de votre contenu pour le moteur de recherche Google en optimisant l'utilisation et la valeur sémantique des balises HTML. Quelles sont les balises nécessaires à la bonne structuration du document, et comment mettre en exergue un contenu pertinent.">

<title> et <meta name="description">, utilisés pour restituer les résultats

Ces deux balises, placés dans l'entête du document HTML, doivent aussi être pertinentes pour l'utilisateur, car leur contenu (ou une partie) peut être utilisé par les moteurs de recherche pour afficher leurs résultats. C'est le cas du moteur de recherche le plus utilisé, Google:

Résultat d'une recherche Google

<meta name="viewport"> - Pour les mobiles

Optez pour une ressource qui va s'adapter automatiquement quelque soit le terminal du visiteur en utilisant des solutions « responsives ». Dès lors, utilisez cette balise qui va permettre d'indiquer au terminal comment l'affichage doit se faire. Il existe plusieurs solutions, dont une qui est recommandée:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Les balises Open Graph

Les balises Open Graph peuvent donner les informations concernant votre page aux principaux réseaux sociaux existants, comme Twitter, Google+, Facebook, etc.

<meta property="og:title" content="Optimisation des balises HTML pour améliorer le référencement">
<meta property="og:type" content="article">
<meta property="og:url" content="https://css-ig.net/articles/optimiser-html-referencement">
<meta property="og:image" content="https://css-ig.net/images/optimiser-html-referencement/resultats-recherche-google.png">
<meta property="og:site_name" content="Optimisation Web">
  • La balise og:title: contient le titre du document
  • La balise og:type: représente le type de document (article, website)
  • La balise og:url: contient le lien canonique du document
  • La balise og:image: donne une représentation imagée du document
  • La balise og:site_name: contient le nom du site.
<head>

Enfin, il faut ajouter cette mention dans la balise head afin de préciser de vous utilisez ce protocole.

<meta name="robots" /> - Indexation

Il n'est pas nécessaire de spécifier cette meta si vous souhaitez que la page soit indéxée. A l'inverse, il est utile de désigner au moteur qu'une page n'a pas un réel intérêt pour l'utilisateur, et qu'il est donc préférable de ne pas l'indexer.

<meta name="robots" content="noindex,follow">

Cette valeur va indiquer au robot que la page n'est pas réellement utile lors d'une recherche: il ne va donc pas l'indexer, mais il va suivre les liens du documents pour continuer son indexation.

<meta name="keywords" /> - Expressions

Cette meta n'est pas un facteur pris en compte par Google pour les résultats qui vous seront restitués lors d'une recherche. Elle peut néanmoins être utile dans le cas où vous utilisez un moteur de recherche interne à votre site, qui exploite les données contenues dans cette balise.

<meta name="keywords" content="optimiser, code, html, référencement">

<h1> - Thème de page

Le <h1> peut être utilisé pour désigner le thème. Il peut reprendre un contenu relativement proche au <title> en utilisant des mots-clés différents (synonymes). Il ne devrait être utilisé qu'une fois par document.

<h1>Optimiser le HTML pour le référencement</h1>

<h2>, <h3> - Thèse, développement

Les balises devraient être organisées par valeurs : <h1> représente le thème, <h2> un sous-thème. Celui-ci est développé avec du texte, des illustrations. Une précision <h3> peut être employée, puis un nouveau sous-thème <h2> à nouveau déployé.

<h2 id="balise-meta">Les balises meta utiles</h2>

Une ancre peut être employée pour identifier la balise; cela permet de créer des liens hypertextes précis qui ouvrent une page, et positionne le contenu souhaité. Cette ancre peut contenir un mot clé secondaire, en évitant scrupuleusement les abus.

<h3 id="meta-description">La balise meta description</h3>

<a> - Lien hypertexte

Le lien hypertexte relie les pages entre elles : c'est la pertinence du thème d'origine par rapport à la destination qui donne une réelle importance au lien. Le lien qui mène de la page A vers la page B devrait être réversible par rapport à leurs contenus respectifs.

<a href="/optimisation-referencement/balise-html.html">
optimiser le HTML pour le référencement
</a>

Créez des liens pertinents qui vont emmener l'utilisateur sur une page dont le thème est évident au premier coup d'oeil: le thème de la page de destination devrait être conforme voire identique au thème du lien. Le nom de l'arborescence a également une importance relative, mais elle ne doit pas être surchargée en mots-clés.

# - Les ancres identifiées

Pour emmener l'utilisation à un endroit précis de la page, vous pouvez spécifier des ancres. Ces ancres permettent au robot d'identifier une partie du contenu pour affiner la recherche dans la page. La pertinence de la destination est de rigueur.

<a href="/optimisation-referencement/balise-html.html#balise-meta">
les balises meta
</a>

<p>, <strong> et <em> - Contenu

La balise de paragraphe détermine le contenu textuel, qui devrait être rédigé de manière naturelle, et qui devrait tout aussi naturellement contenir des mots-clés en rapport avec le thème abordé. Vous pouvez designer l'importance d'une expression en utilisant <strong> et / ou <em>.

<p>
L'optimisation du <strong>code HTML pour le référencement</strong> représente la mise en valeur de vos mots-clés de votre article.
</p>

<img> - Contenu illustré

La balise <img> permet d'insérer une image qui va ajouter une illustration explicative au contenu. Elle ne devrait être utilisée à titre décoratif, où CSS sera plus approprié. Annoncez toujours les valeurs réelles aux attributs alt, width, et height.

<img alt="Des lignes de codes HTML optimisées" src="code-html-optimise.png" height="150px" width="250px">

<picture> - pour les mobiles

Vous pouvez choisir d'utiliser <picture> pour que le navigateur choisisse la bonne image à télécharger, selon la définition utilisée par le client (mobile). Ainsi, le navigateur peut charger une version mobile de l'image.

<picture>
<source media="(max-width: 480px)" srcset="image-mobile.png">
<img alt="description" src="image-normale.png">
</picture>

Gabarit HTML5

Ce gabarit type vous permettra de créer un document valide HTML5, qu'il faut bien évidemment remplir avec vos informations.

<!doctype html>
<html lang="fr">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<title>Titre avec des mots-clés</title>
<meta name="description" content="Description ciblée avec des mots-clés">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Titre du document pour les réseaux sociaux">
<meta property="og:type" content="article">
<meta property="og:image" content="Lien complet vers une image">
<meta property="og:url" content="Lien canonique de l'article">
<meta property="og:site_name" content="Titre du site">
<link rel="publisher" href="Lien vers votre page Google+">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<article>
	<h1>Le titre avec des mots-clés</h1>
	<p>Contenu</p>
	<p>Contenu</p>

	<h2>Développement avec mots-clés</h2>
	<p>Contenu</p>
	<picture>
	<source media="(max-width: 480px)" srcset="image-mobile.png">
	<img alt="description précise de l'image" src="image-normale.png">
	</picture>

	<h3>Sous-développement avec mots-clés</h3>
	<p>Contenu</p>
	<p>Contenu et <a href="page-importante.html">lien hypertexte ciblé</a> </p>
	
	<h2>Développement avec mots-clés</h2>
	<p>Contenu</p>
	<p>Contenu</p>
</article>

<footer>
	<p>Pied de page, et <a href="ne-pas-indexer.html" rel="nofollow">lien normal</a> </p>
</footer>

</body>
</html>

Ces indications devraient vous permettre de mieux structurer votre code HTML pour mettre en valeur un contenu pertinent. Pour éviter les sanctions, évitez la sur-optimisation.