communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Explication détaillée de l'utilisation des balises méta en HTML

Explication détaillée de l'utilisation des balises méta en HTML

黄舟
Libérer： 2017-06-29 13:27:28
original
1915 Les gens l'ont consulté

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, utilisez la langue, l'auteur et d'autres informations de base, ainsi que les paramètres des mots-clés et des niveaux de page Web, etc., le rôle le plus important est de pouvoir effectuer 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 de la page d'accueil de Jingdong : 

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


Méta sur la page d'accueil Taobao Paramètres : 

<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

Paramètres méta pour la page d'accueil 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

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="keywords" content="DOTA2,热门游戏直播,游戏直播,高清游戏直播,手机游戏直播,电子竞技直播" />
<meta name="description" content="斗鱼 - 全民直播平台提供高清、快捷、流畅的视频直播和游戏赛事直播服务，包含DOTA2等各类热门游戏赛事直播和各种名家大神游戏直播，内容丰富，推送及时，带给你不一样的视听体验，一切尽在斗鱼 - 全民直播平台。" />
Copier après la connexion

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

<meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="新闻 新闻中心 事实派 新闻频道,时事报道">
<meta name="description" content="腾讯新闻，事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
<meta name="author" content="skeetershi" />
Copier après la connexion


Méta-paramètres sur la page d'accueil de Qidian Novel Network : 

<meta name="keywords" content="小说,小说网,言情小说,青春小说,玄幻小说,武侠小说,都市小说,历史小说,网络小说,原创网络文学" />
<meta name="description" content="小说阅读,精彩小说尽在起点小说。起点小说提供玄幻小说,武侠小说,原创小说,网游小说,都市小说,言情小说,青春小说,历史小说,军事小说,网游小说,科幻小说,恐怖小说,首发小说最新章节免费小说阅读,精彩尽在起点小说！ver:071011热门小说:。" />
<meta http-equiv="Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" />
<meta name="robots" content="all" />
<meta name="googlebot" content="all" />
<meta name="baiduspider" content="all" />
<meta name="copyright" content="本页版权 www.qidian.com 起点中文网所有。All Rights Reserved" />
<meta http-equiv="mobile-agent" content="format=wml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=xhtml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=html5; url=http://h5.qidian.com/bookstore.html" />
<meta name="application-name" content="起点中文小说网" /
<meta name="msapplication-starturl" content="/Default.aspx?_s=ie9" />
<meta name="msapplication-tooltip" content="小说阅读_起点中文小说网|免费小说,玄幻小说,武侠小说,言情小说,青春小说,小说网各类小说下载" />
<meta name="msapplication-task" content="name=起点小游戏;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" />
<meta name="msapplication-task" content="name=藏书架;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/book.ico" />
<meta name="msapplication-task" content="name=读书客户端;action-uri=http://c.qidian.com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico" />
<meta name="msapplication-task" content="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" />
<meta name="msapplication-task" content="name=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/search.ico" />
<meta property="qc:admins" content="204236767661141166375" />
Copier après la connexion

explication méta détaillée

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

http-equiv

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

X-UA-CompatibleBalise spéciale pour IE8 , utilisé pour spécifier le navigateur IE8 Simulez la méthode de rendu d'une version spécifique du expireDéfinissez le délai d'expiration de la page Web. rafraîchir Actualiser automatiquement et pointer vers une nouvelle page. set-cookieSi la page Web expire, supprimez automatiquement le cookie local. windows-targetForcer l'affichage de la page en tant que page indépendante dans la fenêtre actuelle peut empêcher votre page Web d'être appelée en tant que page frame par d'autrescontrôle du cachemécanisme de mise en cache
valeurdescriptionexemple
type de contenuLors de la définition du 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é

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

UTF-8, il représente l'encodage de langue universelle du monde

PS : La méthode ; pour les pages html5 est d'utiliser directement < ;meta charset="utf-8"/>

navigateur IE pour résoudre certains problèmes de compatibilité.


Le code ci-dessus indique au navigateur IE que, qu'une DTD soit utilisée ou non pour déclarer la norme du document, IE8/9 affichera la page à l'aide du moteur IE7. . 
<meta http-equiv="X-UA-Compatible" content="IE=7">
Copier après la connexion


Le code ci-dessus indique au navigateur IE qu'IE8/9 utilisera le moteur IE8 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 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">
Copier après la connexion


<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 Ajoutez un plug-in : Google Chrome Frame (Google Embedded Browser Framework GCF). Ce plug-in peut conserver le navigateur IE de l'utilisateur inchangé, mais lorsque les utilisateurs naviguent sur le Web, ils utilisent en fait le noyau et le support du navigateur Google Chrome. IE6, 7, 8 et autres versions du navigateur IE. 


<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
Copier après la connexion
PS : le format d'heure GMT doit être utilisé 


<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 


<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é. 


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


<meta http-equiv="cache-control" content="no-cache">
Copier après la connexion
Public : indique que la réponse peut être mise en cache par n'importe quel cache.

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用于控制页面缩放


<p style="margin-bottom: 65px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1, <br/>maximum-scale=1, minimum-scale=1, user-scalable=no"</span><span style="color: #0000ff;">></span></p>
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

 

 

总结

通过大网站对于meta的设置，可以看到常用的有，X-UA-Compatible、keywords、description。

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：L'utilisation et la définition de la balise en HTML5 Article suivant：Explication détaillée du rôle des balises méta en 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