Une balise html (Hyper Text Markup Language) est un codage informatique qui permet d’indiquer à un navigateur internet la structure et hiérarchie d’une page web.
Actuellement c’est le code html5 qui est le plus utilisé. Découvrez les balises html les plus utiles en référencement naturel, à quoi servent-elles ? Qu’apportent t’elles au contenu d’une page web ?
A quoi ressemble une balise en code html ?
Une balise de code html est constituée de chevrons ouvrants et fermants, le nom de la balise, des attributs ainsi qu’une autre balise de fermeture qui se caractérise par une barre oblique entre le chevron ouvrant et le nom de la balise.
Ce n’est pas très clair n’est-ce pas ? Je vous donne un exemple de syntaxe :
<h1 style="color:blue;">Les balises html utiles en référencement naturel</h1>
Dans l’exemple ci-dessus (qui n’est autre que le titre principal de mon article) nous avons une balise title hn. Voici comment elle se compose :
- Un chevron ouvrant représenté par le symbole <
- Le nom de la balise : h1 qui correspond à une balise titre de page
- L’attribut : style pour donner un style à la balise
- La valeur : “color:blue;” qui indique la couleur de la police dans la balise
- Un chevron fermant représenté par un >
- Le contenu concerné par la balise
- Une balise fermante avec un chevron + une barre oblique + le nom de la balise + le chevron fermant
Le code html contient un grand nombre de balises qui sont obligatoirement utilisées dans une page web. Elles structurent le document, donnent des indications aux navigateurs, et ces derniers se chargent d’afficher correctement votre page. Au-delà du texte, le langage html permet aussi d’afficher des images, des vidéos, musiques et tout autres médias. Le code html d’un site internet n’est pas visible de l’internaute lambda, mais si vous êtes curieux, je vous invite à presser sur la touche F12 de votre clavier, et vous devriez voir ça :
Comment se compose une page HTML ?
Pour indiquer au navigateur que le document qu’il va lire est en html, il faut lui dire d’une certaine manière. Ainsi, le document html commence dès la première ligne de code par :
< !DOCTYPE html>
Ensuite votre page est construite de la même manière que le dessin d’un bonhomme ! En langage html5 ça donne :
- Une tête : la balise <head>
- Un corps : la balise <body>
- Des pieds : la balise <footer>
Le tout étant inclu dans une balise <html>.
Voici un exemple :
<!DOCTYPE html> <html> <head> <title>Le titre de votre doc</title> </head> <body> <!-- votre contenu--> </body> </html>
Que contient la balise head dans un doc html ?
À l’intérieur de la balise <head> d’un document html, on retrouve de nombreuses informations avec notamment des balises meta données et des scripts.
Les balises méta données les plus connus et utiles en référencement naturel sont :
- La balise title : c’est le titre de la page reprise en lien bleu dans les résultats de moteurs de recherche. Elle ressemble à ça :
<title>Les balises utiles en référencement naturel | Grossemain</title>
- La balise meta description : C’est la description de la page, un résumé de son contenu que l’on retrouve en dessous des liens bleus dans les résultats Google. La balise ressemble à ça :
<meta name="description" content="la description de votre page en 150 caractères environ">
Les balises scripts contiennent des informations pour le chargement de scripts javascript comme par exemple le code suivi Analytics de votre site, ou le chargement de vos styles CSS.
Vous retrouverez également des balises <link> avec par exemple le chargement des polices.
En gros tout ce qui est contenu dans la balise <head> représente le cerveau de la page et génère tout ce qu’il faut pour afficher correctement le contenu imbriqué dans le <body>
Que retrouve t’on dans la balise <body> d’une page html ?
La réponse est simple : on y retrouve ce que vous voulez voir apparaître sur votre page web. Le body c’est le corps visible de votre page, tous les contenus textes et imagse s’y trouvent et vous pouvez les mettre en page comme vous le souhaitez grâce à des styles CSS, des balises <div> ou <span> (voir chapitre suivant « quels sont les balises de documents html les plus connus ? »)
Contenu de la balise Footer, à quoi ça sert ?
La balise footer se trouve dans la balise body tout à la fin. En générale dans cette partie on retrouve des liens vers les mentions légales, les crédits de création du site, des catégories, les liens vers les réseaux sociaux et autres informations complémentaires. Au-delà des informations visibles, on peut également y insérer des scripts de chargement de fichiers Javascript. L’avantage étant que les scripts sont chargés en derniers et donc cela améliore la vitesse de chargement de la page. Malin !
Quels sont les balises de documents html les plus connus ?
Dans un document html on retrouve systématiquement les mêmes morceaux de code. Le langage html5 contient pas loin de 140 balises toutes reconnues pas les navigateurs internet (Chrome de Google, Mozilla Firefox, Opéra…). Chacunes d’entre elles va fournir des informations sur les éléments de votre page de site internet, typographies, couleurs, taille de la typo, éléments graphiques…
A noter : Les éléments graphiques, la forme et la mise en page peuvent être traités directement dans le code html, mais il est plus conseillé d’utiliser le code CSS pour des questions de poids de fichiers et de simplicité.
Les documents html contiennent également d’autres informations de méta-données.
Les balises « header » ou titre dont nous avons déjà parlé dans l’article dédié à l’utilisation des balises Hn :
<h1> | <h2> | <h3> | <h4> | <h5> | <h6>
Utilisez ces balises pour structurer vos contenus textes avec différents niveaux. Le H1 est le titre principal de votre page, il doit être unique. Plus vous allez en profondeur dans le sujet, plus vous utiliserez des balises pour aider à la lecture et la compréhension de votre page.
<p>
C’est la balise paragraphe qui est la plus classique, elle indique un paragraphe texte dans votre contenu.
<img>
La balise image permet d’intégrer un document image dans votre contenu. Elle est suivie d’une indication de source avec une url afin que le navigateur puisse récupérer le bon contenu. Par exemple :
<img src=" l’url de votre image.jpeg">
Dans cette même balise, vous pouvez y insérer l’attribut “alt” pour indiquer aux moteurs de recherche une description de la photo. Très importante dans le référencement, la balise alt vous permet de référencer des photos avec des mots clés, et ainsi vous donner plus de chance d’être visible dans Google Image par exemple.
Voilà à quoi va ressembler la balise image complète avec la balise alt avec l’exemple ci-dessous :
<img src=" l’url de votre image.jpeg" alt="a quoi ressemble une balise html" >
La particularité de la balise <img> c’est qu’elle est auto-fermante. Pour être plus clair, elle n’a pas besoin d’une autre balise du type </img>.
<a>
La balise de lien hypertexte <a> est indispensable en développement web et en référencement naturel. Cette balise sert à créer des liens vers des ressources externes comme : une adresse mail, des images, une page web interne ou externe à votre site, une vidéo, des documents, des sections de pages… La balise se compose de différents attributs : href et rel.
Voici un exemple :
<a href=www.grossemain.fr/romain-maillet/ rel= "nofollow">le texte de votre lien appelé ancre de lien</a>
En référencement, le lien est très important, il faut savoir que les robots de Google et des autres moteurs de recherche suivent ces liens sauf si vous leur indiquez de ne pas les suivre. L’attribut rel= “nofollow” indique au moteur de ne pas suivre ce lien.
L’ancre de lien tant qu’a elle est également d’une très grande importance en SEO ! En effet, Google prend le texte des liens très au sérieux, elle permet d’indiquer ce dont va parler la page pointée.
<ul> | <ol> |<li>
Ces 3 balises de liste sont utilisées pour créer une énumération ou liste de mots.
Il y a les listes ordonnées, et les listes à puces.
La liste ordonnée est traitée avec la balise <ol>. En utilisant cette balise suivie de <li> vous obtiendrez une liste de nombre débutant par le numéro 1.
Exemple :
Top 3 des moteurs de recherches :
<ol> <li> Google</li> <li>Bing</li> <li>Qwant</li> </ol>
Les listes ordonnées et listes à puces sont très utiles en référencement et en rédaction de contenus. Elles indiquent à Google l’importance du contenu et peuvent notamment être reprisent dans une réponse dans les résultats de moteurs de recherche.
<div> et <span>
Ces deux balises sont plus utilisées pour créer des sections dans une page. Elles sont généralement plus utiles pour la mise en page mais aussi pour la gestion des scripts.
<strong> et <em>
Les balises strong et <em> permettent la mise en gras ou italique de mots et extraits de texte.
La balise strong sert à mettre du texte en gras
La balise em sert à mettre du texte en italique
On les utilise surtout pour indiquer à l’utilisateur et aux moteurs de recherche l’importance des mots dans un contenu rédactionnel. Ces balises sont très utilisées en rédaction SEO pour améliorer le positionnement sur certains mots clés et enrichir la longue traîne. Cependant, les balises strong et em doivent être utilisées avec parcimonie et sur des mots clés de la même famille ou du même champs sémantique que votre mot clé principal (sujet de votre contenu).
Pour plus d’informations lisez mon article sur comment rédiger pour google et l’utilisateur
Pour conclure, si vous débutez en langage html, je vous conseille de suivre quelques cours sur Openclassroom, ou consulter les vidéos tutoriels sur Youtube. Pour ce qui concerne les techniques de référencement, suivez le blog et mes actualités SEO pour être en mesure d’améliorer votre site internet.
Si vous recherchez un Consultant SEO à nantes, N’hésitez pas à me contacter.