élément < meta >

Aperçu

Les balises meta fournissent des métadonnées sur les documents HTML. Les métadonnées ne sont pas affichées sur la page, mais elles sont lisibles par machine. Elles peuvent être utilisées par les navigateurs (comment afficher le contenu ou recharger la page), les moteurs de recherche (mots-clés) ou d'autres services web.

Attributs requis

Attributs facultatifs

Optimisation SEO

Documents de référence

• Mots-clés de la pageChaque page web doit avoir un ensemble de mots-clés uniques décrivant le contenu de la page.
  Utilisez des mots-clés et des expressions descriptifs et représentatifs que les gens sont susceptibles de rechercher et qui décrivent avec précision les informations fournies sur la page. Si le contenu balisé est trop court, les moteurs de recherche peuvent ne pas le considérer comme pertinent. De plus, la balise ne doit pas dépasser 874 caractères.

<meta name="keywords" content="your tags" />

• Description de la pageChaque page web doit avoir une balise de description qui ne dépasse pas 150 caractères et reflète fidèlement le contenu de la page.

<meta name="description" content="150 words" />

• Méthodes d'indexation des moteurs de rechercherobotterms est un ensemble de valeurs séparées par des virgules, généralement avec les valeurs suivantes : none, noindex, nofollow, all, index et follow. Assurez-vous que les valeurs d'attribut nofollow et noindex sont utilisées correctement.

<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->

• Redirection et actualisation de la pageLe nombre dans content représente le temps (en secondes), c'est-à-dire après combien de secondes actualiser. Si une url est ajoutée, il redirigera vers la page spécifiée (les moteurs de recherche peuvent le détecter automatiquement, et cela peut facilement être considéré comme trompeur par les moteurs et entraîner une pénalité).

<meta http-equiv="refresh" content="0;url=" />

• Autre

<meta name="author" content="author name" /> <!-- 定义网页作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

Appareils mobiles

• viewportIl peut optimiser l'affichage dans les navigateurs mobiles. Si le site web n'est pas responsive, n'utilisez pas initial-scale ni ne désactivez le zoom.
  Pour la plupart des appareils de 4.7-5 pouces, définissez la largeur du viewport sur 360px ; pour les appareils de 5.5 pouces, définissez-la sur 400px ; pour l'iPhone 6, définissez-la sur 375px ; pour l'iPhone 6 Plus, définissez-la sur 414px.

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

1. width: width (valeur numérique / device-width) (plage de 200 à 10,000, par défaut 980 pixels)
2. height: height (valeur numérique / device-height) (plage de 223 à 10,000)
3. initial-scale: rapport de zoom initial (plage de >0 à 10)
4. minimum-scale: le rapport minimum auquel l'utilisateur est autorisé à zoomer
5. maximum-scale : le rapport maximal jusqu'auquel l'utilisateur est autorisé à zoomer
6. user-scalable : indique si l'utilisateur peut zoomer manuellement (no, yes)
7. minimal-ui : permet de réduire les barres d'état supérieure et inférieure lors du chargement de la page. (Obsolète)

Notez que beaucoup de personnes utilisent initial-scale=1 sur des sites web non responsives, ce qui fait que le site s'affiche sur 100 % de la largeur, obligeant les utilisateurs à déplacer manuellement la page ou à zoomer. Si user-scalable=no ou maximum-scale=1 est utilisé avec initial-scale=1, les utilisateurs ne pourront pas zoomer avant/arrière pour voir tout le contenu.

• Mode plein écran WebAppSe déguiser en application, pour les applications hors ligne.

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

• Masquer la barre d'état / Définir la couleur de la barre d'étatNe prend effet que lorsque le mode plein écran WebApp est activé. La valeur de content est default | black | black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

• Titre après l'ajout à l'écran d'accueil

<meta name="apple-mobile-web-app-title" content="标题">

• Ignorer la reconnaissance automatique des nombres comme numéros de téléphone

<meta content="telephone=no" name="format-detection" />

• Ignorer la reconnaissance des e-mails

<meta content="email=no" name="format-detection" />

• Ajouter une bannière Smart AppIndique au navigateur l'application correspondant à ce site web et affiche une bannière de téléchargement sur la page (comme illustré ci-dessous).Documents de référence

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

• Autre Documents de référence

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

Relatif aux pages web

• Déclarer l'encodage

<meta charset='utf-8' />

• Préférer la dernière version d'IE et de Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

• Contrôle du moteur du navigateurDe nombreux navigateurs nationaux sont à double moteur (WebKit et Trident). Le moteur WebKit offre une navigation à haut débit, tandis que le moteur IE assure la compatibilité avec les pages web et les sites plus anciens. Les sites web dotés de la balise meta peuvent contrôler le moteur que le navigateur utilise pour le rendu.Documents de référence

<meta name="renderer" content="webkit|ie-comp|ie-stand">

Les modes de moteur par défaut des navigateurs double cœur nationaux sont les suivants :
1. Sogou High-Speed Browser, QQ Browser : moteur IE (mode compatibilité)
2. 360 Speed Browser, Maxthon Browser : moteur WebKit (mode vitesse)

• Empêcher le navigateur d'accéder au contenu de la page depuis le cache de l'ordinateur localAvec ce paramètre, les visiteurs ne pourront pas naviguer hors ligne.

<meta http-equiv="Pragma" content="no-cache">

• Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

• Adaptation du sitePrincipalement utilisé pour la correspondance entre les pages PC et mobiles.

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
 -->

• Déclaration de transcodageLors de l'ouverture d'une page web avec Baidu, elle peut être transcodée (par exemple, des publicités peuvent être insérées). Pour éviter le transcodage, vous pouvez ajouter la balise meta suivante.

<meta http-equiv="Cache-Control" content="no-siteapp" />

Autres documents de référence

LISTE COMPLÈTE DES BALISES META HTML
BALISES META W3C
MÉTABALISES dans HTML5
BALISES META MDN

Source : http://segmentfault.com/a/1190000002407912