Utiliser les balises sans baliser

Pour qu’un contenu web soit agréable à lire et optimisé pour le référencement, on utilise des balises pour en modifier l’apparence et pour ajouter des informations destinées uniquement aux moteurs de recherche. Si ces balises sont des éléments du code html de la page, des outils permettent de les ajouter très simplement à votre contenu.

Qu’est-ce qu’une balise ?

Une balise est un élément de code html qui permet de donner une commande à l’ordinateur. C’est pourquoi elles ne sont pas visible par le lecteur de la page mais définissent ce qui apparaît ou non et l’aspect qu’aura le texte. Par exemple, le code :

<p>Ce paragraphe contient évidement une balise paragraphe, <strong>une balise gras</strong> et une balise de <s>soulignement du texte</s>.</p>

donne :

Ce paragraphe contient évidement une balise paragraphe, une balise gras et une balise de soulignement du texte.

Pour fonctionner la balise doit être ouverte avec les marqueurs <> et fermée avec les marqueurs </>

Les balises sont utiles pour améliorer à la fois l’aspect visuel de votre contenu, notamment son organisation, et le référencement de votre site.

On distinguera donc trois grand types de balises :

  • les balises d’organisation de la page ;
  • les balises de mise en page et d’insertion de contenu ;
  • et les balises d’information sur la page.

Structurer une page html grâce à des balises

Une page web est constituées de deux parties distinctes qui sont chacune délimitées par des balises.

La première d’entre elles est le <head>. Le contenu inséré dans cette zone n’apparait pas sur la page mais permet de donner des renseignements sur celle ci comme le titre de la page, le sujet qu’elle traite mais également des informations techniques comme la feuille de styles à laquelle elle se rattache.

La partie de la page qui s’affichera à l’écran est encadrée par la balise <body>. Dans cette partie, des espaces différents pourront être délimités par diverses balises, notamment les <div>, <header>,<nav>, <section> et <footer>.

Je ne m’étendrai pas davantage sur ces multiples balises car vous n’aurez pas à vous en préoccuper si vous utilisez un CMS.

Néanmoins, si vous souhaitez en savoir plus sur la création de pages html je vous invite à consulter l’excellent cours d’Openclassroom.

Insérer du contenu et le mettre en page grâce aux balises

Il y a deux possibilités pour ajouter les balises à un contenu.

La première, que je ne recommande pas à des utilisateurs novices, est d’aller taper les balises dans le code. Le souci c’est qu’il faut savoir s’y retrouver et qu’on risque de faire des erreurs.

La seconde, utilisable par la plupart d’entre vous qui utilisez un CMS (WordPress, Drupal ou autre) vous permet de taper vos contenus dans un interface surmonté de ce type de pavé :

Capture d'ecran wysiwyg WordPress

Cela s’appelle un Wysiwyg (What you see is what you get). Il s’agit d’un outil permettant d’insérer les balises à votre contenu simplement en cliquant sur des boutons. C’est la méthode la plus simple et donc celle que je vous recommande. Il vous permettra de mettre du texte en gras, en italique, de créer des listes à puces ainsi que d’insérer des liens ou des images.

Balises de titre

Quand on écrit un article, on lui donne un titre et on met des sous titres sur chaque paragraphe.

Pour mettre ces titres en valeur on serait tenté de les mettre en gras et de les souligner ou de leur attribuer une police plus importante.

Ce n’est pas la bonne solution.

En effet, votre site internet contient déjà toutes les informations de style pour les sous titres. Il faudra utiliser les balise de titre <h1>, <h2>, <h3>,…,<h6> pour que l’affichage des titres se fasse simplement et de façon harmonisée sur tout votre site. Pour mettre ces balises il faudra utiliser le menu déroulant « paragraphe » parfois aussi appelé « format » dans le wysiwyg.

C’est également important pour le référencement de votre contenu. Google attachera une plus grande importance à un titre qu’a du texte.

Optimiser le référencement grâce à des balises d’information

Les balises suivantes ne vont pas influer sur l’apparence du site mais uniquement sur le référencement.

Les balises <title> et <Meta> permettent d’ajouter ce qu’on appelle des méta données. Cela signifie que ce sont des informations supplémentaires à propos de ce qui est inscrit dans votre page qui n’apparaissent pas directement sur celle-ci.

Placée en haut de la page html, dans une partie appelée en-tête (entre les balises <head> et </head>) ces informations seront utilisées par les moteurs de recherche pour le référencement de la page.

La balise <title> permet d’indiquer le titre de la page. C’est ce titre qui apparaît lors d’une recherche Google. C’est également ce titre qui apparait dans l’onglet correspondant à la page sur votre navigateur.  Exemple :

<title> Parler web : Utiliser les balises sans baliser</title>

Les balises <Meta> sont un peu particulières. En effet, elles ne comportent qu’une seule partie et le texte est contenu à l’intérieur de la balise. Par exemple :

<META NAME= »Description » CONTENT= »description de votre article »>

Elles peuvent servir à contenir plusieurs informations dont notamment la description du contenu de la page qui sera utilisée par Google pour l’affichage dans les résultats de recherche.

Elles peuvent également contenir, entre autre, des informations sur l’auteur du contenu, le copyright de la page, la langue utilisée, des mots clés, l’éditeur, les autorisations d’indexage pour les robots, ou la redirection automatique de la page.

Toutes ces informations peuvent influer sur le référencement de la page et un maximum d’entre-elles doivent être renseignées. Un grand nombre le sont par défaut par votre CMS. Les autres vous seront proposées au remplissage par des plugins d’aide au référencement.

Des extensions comme Yoast SEO, notamment, vous permettent de modifier les balises< titre> et <Meta> de chaque page de votre site.

Capture d'ecran Yoast SEO

 

Les balises les plus courantes  :

Document

<html> : document HTML

<head> : en-tête, on y trouvera les données qui seront lues par les moteurs de recherche mais n’apparaitront pas sur la page

<title> : titre de la page.

<META NAME= »Description » CONTENT= »description de votre article »> : Description de l’article pour les moteurs de recherche.

<body> : corps du document, c’’est l’endroit où sera mis ce que l’on veut voir affiché sur la page

<nav> : bloc de navigation

<footer> : pied-de-page

Titres

<h1><h2><h3> : titre 1er, 2ème, 3ème niveau (… et ainsi de suite jusqu’à h6)

Éléments de texte

<p> : paragraphe

<ul> : liste à puce

<li> : élément d’une liste

<a href= »http://quelquechose »> : lien hypertexte

<img scr= »lienversl’image » alt « description de l’image »> : Image

<blockquote> : bloc de citation

<strong> : met en gras

Tableau

<table> : tableau

<tr> : ligne du tableau

<td> : cellule du tableau (colonne)

 

Sources :

http://css.mammouthland.net/balises-html.php

http://www.rankspirit.com/balises.php

 

Laisser un commentaire