De Microfly.info.
m (Page créée avec « Catégorie:Documentation HTML/CSS == Sources == *http://www.alsacreations.com/article/lire/628-balises-meta.html == Élément title == (utile et obligatoire, mais pas une... ») |
m |
||
| Ligne 7 : | Ligne 7 : | ||
De nombreux sites parlent de «META Title» pour désigner cet élément, bien qu’il ne s’agisse absolument pas d’une balise META. Il s’agit d’un élément HTML différent de meta, qui s’écrit généralement ainsi: | De nombreux sites parlent de «META Title» pour désigner cet élément, bien qu’il ne s’agisse absolument pas d’une balise META. Il s’agit d’un élément HTML différent de meta, qui s’écrit généralement ainsi: | ||
| - | < | + | <source lang="html4strict"><title>Titre de la page</title></source> |
Le contenu de cet élément n’apparait pas directement dans la page, mais est utilisé de diverses manières: | Le contenu de cet élément n’apparait pas directement dans la page, mais est utilisé de diverses manières: | ||
| Ligne 30 : | Ligne 30 : | ||
Si vous n’en utilisez qu’une, ce sera sans doute celle-là. Elle se présente ainsi... | Si vous n’en utilisez qu’une, ce sera sans doute celle-là. Elle se présente ainsi... | ||
En HTML 4 et XHTML 1.x : | En HTML 4 et XHTML 1.x : | ||
| - | + | <source lang="html4strict"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></source> | |
| - | < | + | |
Il s’agit d’un équivalent, placé dans le code HTML, de l’en-tête HTTP Content-Type, qui permet d’indiquer le type de document et son encodage. | Il s’agit d’un équivalent, placé dans le code HTML, de l’en-tête HTTP Content-Type, qui permet d’indiquer le type de document et son encodage. | ||
| Ligne 42 : | Ligne 41 : | ||
En HTML 5 : | En HTML 5 : | ||
| - | < | + | <source lang="html4strict"><meta charset="utf-8"></source> |
Comme vous pouvez le constater, elle a été considérablement simplifiée avec la venue de HTML5. Il est recommandé de la placer au tout début de la section <head>, surtout avant <title>, car ce dernier peut déjà être concerné par l'encodage des caractères. | Comme vous pouvez le constater, elle a été considérablement simplifiée avec la venue de HTML5. Il est recommandé de la placer au tout début de la section <head>, surtout avant <title>, car ce dernier peut déjà être concerné par l'encodage des caractères. | ||
| Ligne 53 : | Ligne 52 : | ||
Pour rappel, voici un exemple de balise META Description: | Pour rappel, voici un exemple de balise META Description: | ||
| - | < | + | <source lang="html4strict"><meta name="description" content="Tout sur les apparitions muettes de la Banane Masquée dans le cinéma colombien des années 20 et 30." /></source> |
| - | la Banane Masquée dans le cinéma colombien des années 20 et 30." /></ | + | |
On conseille généralement de ne pas utiliser la même description pour les différentes pages d’un site. Dans l’idéal, chaque page aura sa propre description habilement composée. Voici quelques conseils pour la rédaction de cette description: | On conseille généralement de ne pas utiliser la même description pour les différentes pages d’un site. Dans l’idéal, chaque page aura sa propre description habilement composée. Voici quelques conseils pour la rédaction de cette description: | ||
| Ligne 69 : | Ligne 67 : | ||
Notez qu’une page ne sera pas «pénalisée» par un moteur de recherche parce qu’elle n’utilise pas de META Description. Mais si vous n’en utilisez pas, faites attention à ne pas utiliser la balise du tout, et évitez les balises sans contenu: | Notez qu’une page ne sera pas «pénalisée» par un moteur de recherche parce qu’elle n’utilise pas de META Description. Mais si vous n’en utilisez pas, faites attention à ne pas utiliser la balise du tout, et évitez les balises sans contenu: | ||
| - | < | + | <source lang="html4strict"><meta name="description" content="" /> <!-- À éviter --></source> |
Dernière chose: fournir une META Description ne garantit pas qu’elle sera effectivement utilisée par les moteurs de recherche dans leurs pages de résultats! | Dernière chose: fournir une META Description ne garantit pas qu’elle sera effectivement utilisée par les moteurs de recherche dans leurs pages de résultats! | ||
Version du 13 février 2012 à 11:13
Sommaire |
Sources
Élément title
(utile et obligatoire, mais pas une balise META)
De nombreux sites parlent de «META Title» pour désigner cet élément, bien qu’il ne s’agisse absolument pas d’une balise META. Il s’agit d’un élément HTML différent de meta, qui s’écrit généralement ainsi:
<title>Titre de la page</title>
Le contenu de cet élément n’apparait pas directement dans la page, mais est utilisé de diverses manières:
- par le navigateur web, dans le titre de la fenêtre, les onglets, comme titre des marque-pages (favoris), etc.;
- par les moteurs de recherche et divers outils, comme titre d’un résultat de recherche par exemple.
Cet élément est par ailleurs obligatoire en HTML.
Enfin, notez que son importance pour le référencement des pages est primordiale. Un élément title bien rédigé devrait, dans l’idéal:
- être lisible pour un lecteur humain,
- être informatif ou attrayant pour un lecteur humain,
- refléter le contenu de la page,
- contenir des mots-clé pertinents,
- faire moins de 70 caractères (pas une règle absolue, mais Google par exemple coupe les titres trop longs entre 65 et 70 caractères dans les pages de résultat, et les titres trop longs diluent le poids des différents mots-clé).
Le sujet est vaste mais nous en resterons ici. Revenons à nos balises META…
META Content-Type
(très utile)
Si vous n’en utilisez qu’une, ce sera sans doute celle-là. Elle se présente ainsi... En HTML 4 et XHTML 1.x :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />Il s’agit d’un équivalent, placé dans le code HTML, de l’en-tête HTTP Content-Type, qui permet d’indiquer le type de document et son encodage.
Utiliser cette balise META n’est pas indispensable. En effet, les informations qu’elle donne devraient logiquement être envoyées par le serveur web, au moment où il envoie la page HTML au navigateur. Mais redoubler cette information dans la page HTML elle-même permet d’avoir une information sur l’encodage des caractères utilisé (UTF-8 ou ISO-8859-1 ou d’autres encore), ce qui s’avèrera très utile dans les cas suivants:
- Le serveur web, mal configuré, n’envoie pas les informations sur l’encodage. Le navigateur web va alors tenter de les trouver dans le code HTML de la page.
- Dans tous les cas où la page HTML est un fichier local, ouvert directement par l’utilisateur et pas consulté depuis un serveur web. Par exemple pour la documentation en HTML fournie avec un logiciel, pour une page d’information sur un CD ou DVD, lorsque l’utilisateur enregistre une page web dans ses documents, etc.
Nous reviendrons sur les différentes META utilisant l’attribut http-equiv un peu plus loin. En HTML 5 :
<meta charset="utf-8">Comme vous pouvez le constater, elle a été considérablement simplifiée avec la venue de HTML5. Il est recommandé de la placer au tout début de la section <head>, surtout avant <title>, car ce dernier peut déjà être concerné par l'encodage des caractères.
META Description
(utile)
Cette META permet de fournir une description courte (deux à trois phrases courtes) de la page web. Cette description est notamment utilisée (dans certains cas) par les principaux moteurs de recherche, pour fournir le court texte d’aperçu des pages de résultats, ou bien par les réseaux sociaux (Facebook, Google+) pour définir le paragraphe de texte associé au lien partagé.
Pour rappel, voici un exemple de balise META Description:
<meta name="description" content="Tout sur les apparitions muettes de la Banane Masquée dans le cinéma colombien des années 20 et 30." />On conseille généralement de ne pas utiliser la même description pour les différentes pages d’un site. Dans l’idéal, chaque page aura sa propre description habilement composée. Voici quelques conseils pour la rédaction de cette description:
- elle doit être unique, et pas dupliquée sur d’autres pages du site;
- elle doit refléter fidèlement le contenu de la page;
- elle doit être attractive pour l’utilisateur dont le regard «scanne» une page de résultats de moteur de recherche;
- elle doit reprendre les principaux mots-clé de la page et être plutôt brève (on recommande de ne pas dépasser 200 caractères, bien qu’il ne s’agisse pas d’une règle stricte).
On ne dispose pas toujours d’un contenu spécifique pour la META Description de chaque page. Dans ce cas, trois stratégies possibles:
- ne pas utiliser la balise META Description du tout;
- utiliser une META Description seulement pour certaines pages clé, ou uniquement pour la page d’accueil;
- extraire un contenu des contenus disponibles en base de données, par exemple le texte d’accroche pour une page d’article ou le début de la description du produit pour une page produit.
Notez qu’une page ne sera pas «pénalisée» par un moteur de recherche parce qu’elle n’utilise pas de META Description. Mais si vous n’en utilisez pas, faites attention à ne pas utiliser la balise du tout, et évitez les balises sans contenu:
<meta name="description" content="" /> <!-- À éviter -->
Dernière chose: fournir une META Description ne garantit pas qu’elle sera effectivement utilisée par les moteurs de recherche dans leurs pages de résultats!