communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Résumé et explication détaillée des balises méta en HTML

Résumé et explication détaillée des balises méta en HTML

黄舟
Libérer： 2017-05-27 14:36:45
original
2444 Les gens l'ont consulté

Fonction de balise méta

La balise META est une balise clé dans la zone de la balise HTML HEAD, qui fournit le jeu de caractères du document , En utilisant des informations de base telles que la langue et l'auteur, ainsi que en définissant des mots-clés et des niveaux de page Web, le rôle le plus important est de pouvoir faire de la recherche l'optimisation des moteurs (SEO).

PS : Il est pratique pour les robots du moteur de rechercheIndexde rechercher et de classer les applications Internet qui devraient y prêter attention.

Comment écrire sur les grands sites internet ?

Avant de comprendre cette balise, j'ai recherché leurs paramètres méta sur divers sites Web grand public, comme suit :

Paramètres méta sur la page d'accueil de JD.com : 

<meta charset="gbk">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
Copier après la connexion
Copier après la connexion

Méta-paramètres sur la page d'accueil de Taobao : 

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！">
<meta name="keyword" content="">
Copier après la connexion
Copier après la connexion

Méta-paramètres sur la page d'accueil de youku : 

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />
Copier après la connexion
Copier après la connexion

Paramètres méta de la page d'accueil de Douyu :

fonction de balise méta

La balise META est une balise clé dans la zone HEAD des balises HTML, fournissant le document jeu de caractères, le rôle le plus important de l'utilisation d'informations de base telles que la langue et l'auteur, ainsi que de la définition des mots-clés et des niveaux de page Web, est de permettre l'optimisation des moteurs de recherche (SEO).

PS : Il est pratique pour les robots des moteurs de recherche de trouver et de classer les applications Internet.

Comment écrire sur les grands sites internet ?

Avant de comprendre cette balise, j'ai recherché leurs paramètres méta sur divers sites Web grand public, comme suit :

Paramètres méta sur la page d'accueil de JD.com : 

<meta charset="gbk">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
Copier après la connexion
Copier après la connexion

Méta-paramètres sur la page d'accueil de Taobao : 

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！">
<meta name="keyword" content="">
Copier après la connexion
Copier après la connexion

Méta-paramètres sur la page d'accueil de youku : 

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />
Copier après la connexion
Copier après la connexion

méta explication détaillée

la balise méta peut être divisée en deux parties : http-equiv et nomvariable.

http-equiv

http-equiv est équivalent à l'en-tête de fichier http. Il peut renvoyer des informations utiles au navigateur pour aider le navigateur à afficher correctement la page Web. contenu.

valeurdescriptionexemple
type de contenuDéfinir le jeu de caractères utilisé par la page



<meta http-equiv="content-Type" content="text/html; charset=utf-8">
Copier après la connexion


GB2312, Cela signifie que l'encodage utilisé par le site Web est le chinois simplifié ; lorsque

ISO-8859-1, cela signifie que l'encodage utilisé par le site Web est l'anglais lorsque

UTF-8 ; signifie le langage universel Encodage

PS : La méthode pour la page html5 consiste à utiliser directement

X-UA-CompatibleBalise spéciale pour IE8, utilisée pour spécifier le navigateur IE8 afin de simuler la méthode de rendu d'une version spécifique du navigateur IE pour résoudre certains problèmes de compatibilité. 
<meta http-equiv="X-UA-Compatible" content="IE=7">
Copier après la connexion
Le code ci-dessus indique au navigateur IE que, que la norme du document soit déclarée ou non avec DTD, IE8/9 utilisera le moteur IE7 pour afficher la page. 
<meta http-equiv="X-UA-Compatible" content="IE=8">
Copier après la connexion
Le code ci-dessus indique au navigateur IE que IE8/9 utilisera le moteur IE8 pour afficher la page. 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Copier après la connexion
Le code ci-dessus indique au navigateur IE que IE8/9 et les versions ultérieures utiliseront la version la plus élevée d'IE pour afficher la page. 
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Copier après la connexion


Le code ci-dessus, IE=edge, indique à IE d'utiliser le dernier moteur pour afficher les pages Web, et chrome=1 peut activer Chrome Frame.

PS : Google ajoute un plug-in : Google Chrome Frame (Google Embedded Browser FrameworkGCF), ce plug-in peut garder le navigateur IE de l'utilisateur inchangé, mais lorsque l'utilisateur navigue sur le Web, il utilise réellement Google Chrome noyau du navigateur et prend en charge plusieurs versions des navigateurs IE tels que IE6, 7 et 8.

expireDéfinissez le délai d'expiration de la page Web. 
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
Copier après la connexion


PS : le format d'heure GMT doit être utilisé

rafraîchir Actualiser automatiquement et pointer vers une nouvelle page. 
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
Copier après la connexion


PS : 2 signifie que la page reste pendant 2 secondes puis passe à l'URL suivante

set-cookieSi la page Web expire, alors automatiquement supprimez le cookie local. 
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
Copier après la connexion


PS : le format d'heure GMT doit être utilisé.

windows-target强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用


<meta http-equiv="Window-target" content="_top">
Copier après la connexion


cache-control缓存机制
<meta http-equiv="cache-control" content="no-cache">
Copier après la connexion


Public：指示响应可被任何缓存区缓存。

Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。

no-cache：指示请求或响应消息不能缓存。

no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。

min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

name

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

值描述例子
author标注网页的作者


<meta name="author" content="dashen" />
Copier après la connexion
keywords页面关键词，用于被搜索引擎收录


<meta name="keywords" content="新闻,新闻中心, 新闻频道">
Copier après la connexion
description页面描述，用于搜索引擎收录


<meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
Copier après la connexion
viewport用于控制页面缩放
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1, user-scalable=no">
Copier après la connexion
renderer指定双核浏览器默认以何种方式渲染页面。
<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式
Copier après la connexion

PS：360浏览器支持

generator说明网站的采用的什么软件制作


<meta name="generator" content="Microsoft"/>
Copier après la connexion
revised网页文档的修改时间


<meta name="revised" content="设计网, 6/24/2015"/>
Copier après la connexion
robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。


<meta name="robots" content="none"/>
Copier après la connexion

取值：all|none|index|noindex|follow|nofollow, 默认all

all：文件将被检索，且页面上的链接可以被查询；

none：文件将不被检索，且页面上的链接不可以被查询；

index：文件将被检索；

follow：页面上的链接可以被查询；

noindex：文件将不被检索，但页面上的链接可以被查询；

nofollow：文件将不被检索，页面上的链接可以被查询。

copyright网站版权信息


<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
HTML，meta
source：php.cn
Article précédent：Introduction détaillée aux pratiques de réutilisation du code HTML Article suivant：Introduction détaillée à l'implémentation de logo.ico dans les pages Web HTML
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...
Depuis 2024-04-16 09:34:16
0
0
4687
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal