Qu'est-ce que la méta en html. Que sont les balises méta, comment les remplir et les vérifier correctement : exemples tirés de la pratique. Qu'avons-nous appris

Disons que l'on n'est pas d'accord.
Robert Louis Stevenson.

C'est la leçon dans laquelle nous allons parler de ce qui est balises méta, pour quoi et comment ils sont utilisés et comment les remplir correctement.

Comme je l'ai dit dans , balises méta sont situés dans l'en-tête de la page html, entre les balises et , et ne sont en aucun cas affichés par le navigateur (à l'exception du contenu de la balise "title"). Cependant, les balises méta pour un site Web jouent un rôle très important. Leur ajout et leur optimisation peuvent grandement aider le site dans sa vie.

Je recommande d'utiliser uniquement les balises méta qui vraiment nécessaires au fonctionnement du site Web. N'encombrez pas la zone "tête" avec des instructions inutiles, car toute erreur ici peut avoir de tristes conséquences. Si vous savez ce que vous faites, les balises META n'en bénéficieront que, mais si vous videz tout ici, vous pouvez avoir des problèmes difficiles à diagnostiquer.

première balise meta très important. De plus, cette balise meta est tout aussi importante pour moteurs de recherche et pour les visiteurs. Les premiers dans le classement des résultats de recherche attachent une grande importance aux mots-clés contenus dans la balise title, les seconds voient son contenu comme un lien vers le site dans les mêmes résultats de recherche :

Avec le contenu de la même balise meta est également affiché dans le titre de la fenêtre :

En HTML, la balise meta "title" est ajoutée comme ceci :

Le contenu de la balise meta "title"

Contenu de la page principale

De plus, comme je l'ai dit plus tôt, mots clés, que vous ajoutez à la balise meta "title", sera perçu de manière extrêmement positive par les moteurs de recherche. Par conséquent, lorsque vous remplissez cette balise, essayez d'y inclure les bons mots-clés. Soit dit en passant, ils seront discutés plus loin.

§ 2. Meta tag "keywords" (mots clés)

Dès le début, brièvement sur ce que sont, en fait, ces mêmes "mots-clés".

Les mots qui caractérisent le mieux le contenu de la page html et qui en seront la clé. Il peut s'agir de mots simples ou de phrases, mais ils nécessairement doit apparaître dans le texte de la page. Selon eux, les moteurs de recherche déterminent la pertinence d'une page par rapport à une requête particulière.

Par exemple, pour cette page mots clés il y aura des "balises meta", "titre de la balise meta", "mots clés de la balise meta", etc.

Plus en détail sur les mots-clés, en particulier, et sur l'optimisation du site, en général, nous en parlerons.

Pour faciliter la tâche des moteurs de recherche, la balise meta "keywords" est utilisée. Dans ce document, le webmaster prescrit des mots-clés pour la page. Le code HTML de la balise Meta "keywords" ressemble à ceci :

Liste de mots-clés">
Le contenu de la balise meta "title"

Contenu de la page principale

Les mots clés doivent être ajoutés un par un, séparés par des virgules, au singulier. Par exemple, pas "mots-clés", mais "mot-clé". De plus, le comportement irresponsable des webmasters, qui, afin d'obtenir des positions plus élevées dans les moteurs de recherche, ont rempli la balise méta «mots clés» non seulement avec des mots clés, mais également avec de nombreux dérivés de ceux-ci, a conduit au fait que les moteurs de recherche se sont pratiquement arrêtés faire attention à cette balise. . Actuellement à droite la méta-balise "mots clés" remplie n'est utilisée par les moteurs de recherche que comme l'un des nombreux facteurs de classement (loin d'être le principal). S'ils voient des "mots clés" devant eux, dans lesquels ils ont fourré toutes les variantes possibles de mots clés, cela devient alors le premier signal pour eux du manque de fiabilité de cette page.

§ 3. Balise Meta "description" (description de la page)

La prochaine balise méta importante est la balise "description", qui doit contenir une brève description de la page. C'est "court" et c'est "description de la page". Il suffit d'ajouter une ou deux petites phrases pour indiquer à quoi et pour qui cette page est destinée.

Une caractéristique importante de la balise meta "description" est le fait que, dans le cas de son Corriger c'est sur sa base que les moteurs de recherche forment un extrait de page dans les résultats de recherche (une brève description sous le lien vers la page) :

Si les moteurs de recherche n'aiment pas la façon dont la balise méta "description" est remplie, l'extrait est formé de morceaux de phrases (extraits de la page entière) qui sont pertinents pour la requête.

Ainsi, la bonne balise meta « description » contient nécessairement un mot-clé (phrase) et décrit brièvement et précisément de quoi parle la page et pour qui. "Description" et "titre" forment deux balises méta très importantes, qui déterminent si l'utilisateur passera de Résultats de recherche Site ou pas ! Par conséquent, il, comme "titre", doit être écrit pour chaque pages !

H Le code TML pour créer la balise meta "description" serait :

Le contenu de la balise meta "description"">
Le contenu de la balise meta "title"

Contenu de la page principale

Passons maintenant à la description des principales balises meta techniques du groupe "HTTP-EQUIV" (équivalents HTTP).

§ 4. Balises meta techniques

Les balises méta techniques signifient beaucoup pour un site Web. Avec leur aide, vous pouvez contrôler l'affichage de la page, les paramètres d'indexation, etc. Dans ce didacticiel, nous aborderons les balises méta techniques de base.

• type de contenu- type de document et son encodage. Cette balise meta est nécessaire pour l'affichage correct des caractères par le navigateur.
  Il existe de nombreux encodages. La plupart d'entre eux, vous ne les rencontrerez même jamais. Sans oublier le fait que vous les utiliserez vous-même. Les navigateurs modernes déterminent automatiquement le type d'encodage, mais vous pouvez le spécifier vous-même pour être plus sûr. Si vous créez un document html dans système opérateur Windows, dont la langue est le russe, alors l'encodage sera "windows-1251", et le code pour insérer la balise meta est le suivant :

  Le contenu de la balise meta "title"

  Contenu de la page principale
  

• langue du contenu- en précisant la langue du document. La valeur de cette balise meta facultative est utilisée à la fois par les robots d'exploration et les serveurs Web. Code intégré:

  Le contenu de la balise meta "title"

  Contenu de la page principale
  

• rafraîchir- temps (en secondes) après lequel le document se rechargera automatiquement ou ira vers une autre page html avec l'adresse (url) spécifiée. Par exemple, pour recharger automatiquement le document toutes les 30 secondes, vous devez insérer cette balise meta comme ceci :

  Le contenu de la balise meta "title"

  Contenu de la page principale
  

  Et, pour, après 5 secondes, aller sur la page http://www.site/, vous devez l'écrire comme ceci :

  Le contenu de la balise meta "title"

  Contenu de la page principale
  

• des robots- la balise meta, qui est responsable des paramètres d'indexation des pages. La balise meta "robots" peut avoir les valeurs suivantes :
  • indice- la page est indexée ;
  • pas d'index- la page n'est pas indexée ;
  • suivre- les liens hypertextes présents sur la page sont pris en compte ;
  • pas de suivi- les liens hypertextes présents sur la page ne sont pas pris en compte
  • tout- remplace "index" et "follow", c'est-à-dire la page est indexée et les hyperliens présents sur celle-ci sont pris en compte (agit par défaut) ;
  • rien- remplace "noindex" et "nofollow", c'est-à-dire La page n'est pas indexée et les liens hypertexte qu'elle contient ne sont pas pris en compte.

  Code pour insérer la balise meta "robots":

  Le contenu de la balise meta "title"

  Contenu de la page principale
  

auteur et droits d'auteur- des balises méta qui vous permettent d'indiquer la paternité et le propriétaire du contenu de la page. Intégrer le code HTML :

Le contenu de la balise meta "title"

Contenu de la page principale

§ 5. Conclusion

Ce sont toutes les balises méta en HTML dont un débutant aura besoin. Les autres sont spécifiques et vous en aurez peut-être besoin après avoir acquis de l'expérience et savoir exactement ce que vous faites. De tout ce qui précède, je recommande fortement d'utiliser sur chaque page de votre site Web :

Titre de la page

Utilisez de l'acier au besoin, mais n'en faites pas trop. N'oubliez pas que les balises méta ne rendront pas votre site intéressant, elles ne peuvent qu'aider le navigateur et le serveur Web à afficher correctement les pages du site, et le moteur de recherche à les trouver.

Et cette section de mon site est enfin terminée et nous parlerons ensuite de la façon de commencer à promouvoir et promouvoir votre site sur Internet. Voici quelques-uns de mes conseils expérience personnelle optimisation des pages du site. Cliquez sur "Suivant".

Balises méta- ce sont des attributs optionnels placés dans l'en-tête de la page, entre les balises et, qui ne sont en aucun cas affichés par le navigateur (à l'exception du contenu de la balise Contenu de la page principale

"description" (description de la page)

La description utilisé lors de la création d'une courte description d'une page spécifique de votre site. Presque tous les moteurs de recherche en tiennent compte lors de l'indexation, ainsi que lors de la création d'une annotation dans les résultats de recherche. En l'absence de "description", les moteurs de recherche donnent la première ligne du document ou un extrait contenant des mots clés dans l'annotation. Il s'affiche après le lien lors de la recherche de pages dans un moteur de recherche, il est donc conseillé non seulement d'indiquer une brève description du document, mais de faire de son contenu un message publicitaire attrayant.

Ainsi la bonne la description doit contenir un mot-clé, décrire brièvement et précisément de quoi parle cette page Web. "Description" et "titre" forment une paire de valeurs très importante qui détermine si l'utilisateur passera des résultats de recherche à la page Web ou non ! Par conséquent, "description" et "titre" doivent être écrits pour chaque les pages Web!

Code HTML avec "description" :

Contenu de la page principale

"Auteur" et "Copyright"

Ces valeurs ne sont généralement pas utilisées en même temps. Une fonction auteur et droits d'auteur- identification de l'auteur ou de la propriété du contenu de la page. « Auteur » contient le nom de l'auteur de la page Web, mais si le site Web appartient à une organisation, il est plus approprié d'utiliser la valeur « Copyright ».

Code HTML avec "auteur" :

Contenu de la page principale

"Robots"

des robots- génère des informations sur les documents hypertextes, qui sont envoyées aux robots des moteurs de recherche.

"robots" peut avoir les significations suivantes :

• indice- la page doit être indexée ;
• pas d'index- la page n'est pas indexée ;
• suivre- les liens hypertextes présents sur la page sont pris en compte ;
• pas de suivi- les liens hypertextes présents sur la page ne sont pas pris en compte
• tout- inclut les valeurs d'index et de suivi, activées par défaut ;
• rien- inclut les valeurs noindex et nofollow.

Code HTML avec "robots" :

Contenu de la page principale

Groupe de valeurs d'attribut Équiv HTTP

"Type de contenu"

type de contenu définit le type de document et son encodage.

Code HTML avec "Content-Type" :

Contenu de la page principale

En HTML5, la spécification de l'encodage est simplifiée :

"rafraîchir"

Rafraîchir- délai (en secondes) avant que le navigateur ne rafraîchisse la page. De plus, il peut être utilisé téléchargement automatique une autre page html avec l'adresse donnée (url).

Code HTML avec "refresh" :

Contenu de la page principale

Le navigateur comprendra cette entrée, comment télécharger en 5 secondes nouvelle page, spécifié dans le paramètre URL, dans ce cas, il s'agit d'une transition vers le site site. La valeur "refresh" permet de créer une redirection (redirect) vers un autre site. Si l'URL n'est pas spécifiée, elle mise à jour automatique page en cours après le nombre de secondes spécifié dans l'attribut teneur.

	Notez qu'il n'y a pas de guillemets avant http dans l'URL.

"Contenu-Langage"

Contenu-Langue spécifie la langue du document. Peut être utilisé par les moteurs de recherche lors de l'indexation des pages. La combinaison du champ Accept-Language (envoyé par le navigateur) avec le contenu Content-language peut être une condition pour que le serveur sélectionne une langue ou une autre.

Code HTML avec "content-language" :

Contenu de la page principale

Dans le langage HTML5, la spécification est simplifiée :

Ce didacticiel ne répertorie pas toutes les balises méta que vous pouvez rencontrer lors de l'apprentissage de l'artisanat Web. Les autres sont spécifiques et vous apprendrez à les connaître à l'avenir lors de l'étude de nos leçons. De tout ce qui précède pour une utilisation sur chaque la page de votre site est recommandée avec les balises meta et leurs attributs illustrés dans l'exemple suivant :

Exemple HTML :

Essayez-le vous-même Contenu de la page principale

Tâches

Tache finale

Dans cette leçon, vous avez découvert les balises META les plus importantes, dont l'objectif principal est de fournir des métadonnées structurées sur une page Web.

Il est temps de revoir ce que vous avez appris et d'effectuer quatre tâches simples :

Mots clés

• Décider vous-même "

Avec une seule balise définissez les mots-clés : "HTML,CSS,JavaScript" pour la page Web actuelle.

Les balises META sont conçues pour fournir des métadonnées structurées sur une page Web.

Bonne journée à tous. Alexey Gulynin est en contact. Dans le dernier article, nous avons discuté créer des formulaires en HTML. Dans cet article, je voudrais parler de balises méta en HTML. En fait, les balises méta portent des informations de service spéciales et sont divisées en plusieurs types : pour les moteurs de recherche, pour la page, pour le navigateur. Je dois dire tout de suite que toutes les balises méta sont insérées dans le titre du document, c'est-à-dire entre les balises et .

Commençons progressivement à nous occuper des balises META pour les moteurs de recherche.

Balises méta pour les moteurs de recherche sont d'une grande importance car ils affectent l'optimisation de la page.

Écrivons toutes les balises méta pour les moteurs de recherche :

Balises HTML, balises meta du moteur de recherche, balises meta du navigateur, balises meta de la page"/>

La balise meta description est responsable de la description de la page, je recommande de la mettre sur chaque page, car cette balise meta affecte les résultats des moteurs de recherche.
La balise meta keywords contient tous les mots clés auxquels votre page correspond, et je vous recommande également de la mettre sur chaque page de votre site.
La balise meta robots est nécessaire pour indiquer au moteur de recherche s'il faut indexer cette page et suivre les liens qu'elle contient.

Cette balise Meta a 4 valeurs :

index, follow - la page doit être indexée et suivre les liens qu'elle contient.
index, nofollow - la page doit être indexée et il n'est pas nécessaire de suivre les liens qu'elle contient
noindex, follow - la page n'a pas besoin d'être indexée, mais vous devez suivre les liens qu'elle contient
noindex, nofollow - la page n'a pas besoin d'être indexée et vous n'avez pas besoin de suivre les liens qu'elle contient.
Habituellement, toutes les informations sur ce qui doit être indexé et ce qui ne l'est pas sont contenues dans le fichier robots.txt, qui devrait être absolument sur n'importe quel site, mais à propos de fichier donné Nous en parlerons dans l'un des articles suivants.

Jetons un coup d'oeil maintenant balises méta pour la page. Je note tout de suite que les balises meta de la page sont facultatives et ne portent que des informations informatives. Écrivons les plus courants d'entre eux:

J'écrirai brièvement sur chacune de ces balises méta, bien que tout soit transparent ici.
La balise meta author fait référence à l'auteur de cette page. Très rarement vu nulle part, sauf que les débutants l'insèrent généralement dans leur site.
La balise meta du générateur indique ce qui a été fait cette page. Habituellement, cette balise est présente dans tous les systèmes de gestion de contenu (CMS), tels que Joomla, WordPress. Et généralement, les gens suppriment cette balise méta pour cacher que leur site est créé sur ce CMS (cependant, si vous regardez le code de la page, il devient clair sur quoi il est créé).
La balise meta de réponse pointe vers l'e-mail de l'auteur.
La balise meta site-created indique quand le site a été créé.
C'est à vous d'inclure ou non des balises méta pour les pages de votre site, mais je n'y vois pas beaucoup d'intérêt.

Il reste un autre groupe de balises meta - c'est balises méta du navigateur. Il s'agit également d'un groupe très important de balises META. Immédiatement des exemples :

La balise meta Content-type est, à mon avis, la balise meta la plus importante, car elle spécifie le type de page et l'encodage. Si vous ne spécifiez pas cette balise meta, il se peut qu'à l'avenir il y ait problèmes d'encodage de site Web. A propos de comment décider ce problème, vous pouvez lire dans cet article.
La balise meta Content-language spécifie la langue de la page. Habituellement, les navigateurs eux-mêmes reconnaissent la langue sur la page.
La balise Meta Refresh est responsable de l'actualisation de la page. Dans ce cas, il est écrit que toutes les 10 secondes la page sera mise à jour et la transition vers mon site. L'actualisation automatique de la page peut être nécessaire, par exemple, pour une page contenant des commandes d'une boutique en ligne.

Élément (de l'anglais. métadonnées- metadata) définit des données (on les appelle aussi balises meta) qui servent à stocker des informations destinées aux navigateurs et aux moteurs de recherche. Par exemple, les moteurs de recherche se réfèrent aux balises META pour récupérer des descriptions de sites, des mots-clés et d'autres données. Plusieurs balises meta sont autorisées, elles sont toutes placées dans le conteneur . En règle générale, les attributs de toute balise méta sont réduits à des paires nom=valeur, dont les noms sont définis par les mots-clés content , name ou http-equiv .

Syntaxe

Balise de fermeture

Non requis.

Exemple

spécification

Chaque cahier des charges passe par plusieurs étapes d'approbation.

• Recommandation (recommandation) - la spécification est approuvée par le W3C et recommandée en tant que norme.
• Recommandation du candidat ( Recommandation éventuelle) - le groupe responsable de la norme est convaincu qu'elle atteint ses objectifs, mais le soutien de la communauté de développement est nécessaire pour mettre en œuvre la norme.
• Recommandation proposée ( Recommandation suggérée) - à ce stade, le document est soumis au Conseil consultatif du W3C pour approbation finale.
• Ébauche de travail - Une ébauche plus mature après discussion et amendements pour examen par la communauté.
• Brouillon de l'éditeur ( Projet éditorial) est une version préliminaire de la norme après que les modifications ont été apportées par les éditeurs du projet.
• ébauche ( Avant-projet de cahier des charges) est la première version préliminaire de la norme.

Se démarquer est le standard de vie HTML ( Living ) - il n'adhère pas à la numérotation traditionnelle des versions, car il est en développement constant et est mis à jour régulièrement.

×

Navigateurs

La notation suivante est utilisée dans la table du navigateur.

• - l'élément est entièrement pris en charge par le navigateur ;
• - l'élément n'est pas perçu par le navigateur et est ignoré ;
• - peut apparaître pendant le fonctionnement diverses erreurs, ou l'élément est pris en charge avec des réserves.

Le nombre indique la version du navigateur à partir de laquelle l'élément est pris en charge.

L'une des utilisations de la balise META consiste à spécifier les en-têtes HTTP qui doivent être envoyés au client avant l'envoi de la page Web elle-même. Par example:

<meta http-equiv="Content-Type" content="text/html" />

Cette entrée spécifie que la page doit être envoyée avec l'en-tête HTTP Content-Type: text/html. Cet en-tête indique au navigateur ou à un autre programme le type de document envoyé. Cependant, malgré le fait que les serveurs Web étaient initialement censés lire les balises méta à l'intérieur des pages Web envoyées au client et générer des en-têtes HTTP en fonction de leur contenu, en pratique, cela n'est pas implémenté dans les serveurs Web les plus utilisés, respectivement, les serveurs Web. ne modifiez pas les en-têtes HTTP envoyés au client, et le client (navigateur Web) traite lui-même ces balises méta (en particulier, les données des balises méta peuvent remplacer les données reçues des en-têtes HTTP).

De plus, les balises méta peuvent être utilisées pour indiquer au navigateur des informations sur le document lorsque les en-têtes HTTP ne sont pas disponibles (par exemple, si la page est ouverte localement à partir du disque plutôt que chargée à partir d'un serveur Web).

Dans la forme générale, les métadonnées sont écrites sous la forme suivante : la balise méta spécifie l'attribut de nom (nom) et l'attribut de contenu associé (contenu), qui décrit certains aspects de la page Web, par exemple, les mots clés :

<méta nom="mots clés" contenu= « wikipédia, encyclopédie » / >

Fonctions des balises meta

Les fonctions des balises méta sont assez diverses, mais pour le moment il n'y a pas de standardisation claire de celles-ci. Cependant, il existe plusieurs utilisations principales pour les balises meta :

• Les balises Meta sont capables d'identifier la paternité de la page Internet, son adresse, la fréquence de ses mises à jour ;
• Les balises META sont utilisées par les moteurs de recherche pour indexer et créer des titres pour les documents hypertextes ;
• N'étant pas affichées, les balises méta affectent l'affichage des pages Internet.

Groupes de balises META

Les balises META sont divisées en deux groupes principaux - NAME et HTTP-EQUIV. Le groupe NAME est responsable des informations textuelles sur la page, son auteur et les recommandations pour les moteurs de recherche. Les HTTP-EQUIV sont effectivement équivalents aux en-têtes hypertexte, ils forment l'en-tête de la page et déterminent comment il est géré. En règle générale, ils contrôlent les actions des navigateurs et sont utilisés pour générer les informations fournies par les en-têtes réguliers.

NOM Groupe

Auteur de la balise Meta et droit d'auteur

Méta balise PICS-Label

Balise Meta de fenêtre cible

Définition de la fenêtre de la page chargée.

Balise méta de la barre d'outils Image

Désactive les panneaux de contrôle d'image. Habituellement utilisé lors de l'affichage de bannières, d'images d'arrière-plan, de cartes d'image, etc., lorsque la sortie de ce panneau n'est pas souhaitable.

<méta http-equiv="imagetoolbar" content="non" />

Signification des balises meta

Les métadonnées d'une page Web étaient à l'origine destinées à aider moteurs de recherche attribuer une page Web à une catégorie ou à une autre. Dans les années 90, les balises méta étaient activement utilisées pour promouvoir votre site, notamment en fournissant des métadonnées fausses ou redondantes. Après cela, les moteurs de recherche ont commencé à prêter peu d'attention aux métadonnées ; maintenant plus important est la structuration correcte de la page Web et la présence de un grand nombre liens vers le site à partir de ressources faisant autorité.

En raison du fait que les balises méta sont purement une fonction de service et, en outre, augmentent considérablement la taille d'un document hypertexte, les concepteurs Web novices préfèrent souvent les ignorer. De plus, les balises méta du groupe HTTP-EQUIV sont assez difficiles à utiliser, car elles définissent des paramètres de formatage de page stricts. Cependant, les balises méta rendent l'indexation d'une page Web plus efficace dans les moteurs de recherche.