Maison  >  Article  >  interface Web  >  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

黄舟
黄舟original
2017-05-27 14:36:452408parcourir

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,相机,数码,配件,手表,存储卡,京东">

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="">

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="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />

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,相机,数码,配件,手表,存储卡,京东">

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="">

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="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />

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.

valeur description exemple
type de contenu Définir le jeu de caractères utilisé par la page



<meta http-equiv="content-Type" content="text/html; charset=utf-8">


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 9d54027d814bba7a6c118810bbc6025d

X-UA-Compatible Balise 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">
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">
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">
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">


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.

expire Définissez le délai d'expiration de la page Web.
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">


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">


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

set-cookie Si 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=/">


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

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


<meta http-equiv="Window-target" content="_top">


cache-control 缓存机制
<meta http-equiv="cache-control" content="no-cache">


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

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

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

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

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

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

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

name

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

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


<meta name="author" content="dashen" />
keywords 页面关键词,用于被搜索引擎收录


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


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

PS:360浏览器支持

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


<meta name="generator" content="Microsoft"/>
revised 网页文档的修改时间


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


<meta name="robots" content="none"/>

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

all:文件将被检索,且页面上的链接可以被查询

none:文件将不被检索,且页面上的链接不可以被查询;

index:文件将被检索;

follow:页面上的链接可以被查询;

noindex:文件将不被检索,但页面上的链接可以被查询;

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

copyright 网站版权信息


<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />

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!

Déclaration:
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