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

巴扎黑
巴扎黑original
2017-05-21 10:04:391672parcourir

Ce qui suit vous apportera un résumé de l'utilisation des balises méta html (recommandé). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

Le rôle de la balise méta

La balise META est une balise clé dans la zone HEAD de Les balises HTML, fournissant les caractères du document. Des informations de base telles que la collection, la langue, l'auteur, etc., ainsi que les paramètres de mots-clés et de niveaux de page Web, etc., sont très utiles pour 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 :


Code XML/HTMLCopier le contenu dans le presse-papiers

  1. <méta charset="gbk">

  2. <méta nom="description" contenu="JD.COM- Un professionnel centre commercial en ligne complet qui vend des dizaines de milliers de produits de marque de haute qualité tels que des appareils électroménagers, des communications numériques, des ordinateurs, des grands magasins ménagers, des vêtements, des produits maternels et infantiles, des livres, de la nourriture, etc. Des services pratiques et honnêtes vous offrent un expérience d'achat en ligne agréable ! >= "Mots clés" content

    =
  3. "Achats en ligne, centre commercial en ligne, téléphone mobile, ordinateur portable, ordinateur, MP3, CD, VCD, DV, appareil photo, numérique, accessoires, montre, carte mémoire, Jingdong "
  4. >Méta-paramètres sur la page d'accueil de Taobao : Code XML/HTML

    Copier le contenu dans le presse-papiers

<


méta

charset="utf-8">

  1. <méta http-equiv="X-UA-Compatible" content

    =
  2. "IE=edge,chrome=1 "
  3. ><méta nom= "rendu" content

    =
  4. "webkit"
  5. ><méta nom="spm-id" contenu

    =
  6. "a21bo"
  7. > <méta nom="description" contenu

    =
  8. "Taobao - La plateforme de commerce en ligne la plus grande et la plus sûre d'Asie, proposant toutes sortes de vêtements, de beauté, de maison, numériques, de recharge de cartes de téléphone/points... 800 millions d'offres spéciales de haute qualité, et offre également une garantie transactions (recevoir d'abord, payer plus tard), compensation anticipée, compensation de trois pour un pour les contrefaçons, retours et échanges sans raison pendant sept jours, maintenance numérique gratuite et autres services de garantie de transaction sécurisée, vous permettant de profiter des achats en ligne en toute tranquillité. esprit! "
  9. ><méta nom= "keyword" content

    =
  10. ""
  11. >Paramètres méta pour la page d'accueil de youku :Code XML/HTML

    Copier le contenu dans le presse-papiers
  1. <méta charset="utf-8">

  2. <méta http-equiv="Compatible X-UA" contenu="IE=Edge">

  3. <meta name="title" content="Youku - Le premier site Web vidéo de Chine, proposant la lecture vidéo, la publication vidéo et la vidéo recherche - Youku Video" />

  4. <méta nom ="mots-clés" content="Vidéo, partage vidéo, recherche vidéo, lecture vidéo, vidéo Youku" />

  5. <méta nom="description" contenu = "Plateforme de services vidéo, fournissant la lecture vidéo, la publication vidéo, la recherche vidéo, le partage vidéo" />

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


Code XML/HTMLCopier le contenu dans le presse-papiers

  1. <méta http-equiv="Content-Type" content= "text/html; charset=utf-8" />

  2. <méta nom="renderer" content="webkit|ie-comp|ie-stand">

  3. <méta http-equiv="Compatible X-UA" content="IE=Edge,chrome=1">

  4. < ;meta name="keywords" content="DOTA2, diffusion en direct de jeux populaires, diffusion en direct de jeux , diffusion en direct de jeux haute définition, diffusion en direct de jeux mobiles, diffusion en direct d'e-sports" />

  5. < meta nom="description" contenu=" Douyu - la plateforme nationale de diffusion en direct fournit une haute définition, rapide et Services de diffusion vidéo en direct et d'événements de jeu fluides. Il comprend des diffusions en direct de divers événements de jeux populaires tels que DOTA2 et diverses diffusions en direct de jeux célèbres. Il est riche en contenu et diffusé en temps opportun, vous offrant une expérience audiovisuelle différente. le tout sur Douyu - la plateforme nationale de diffusion en direct. " />

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


Code XML/HTMLCopier le contenu dans le presse-papiers

  1. <méta charset="UTF-8">

  2. <méta nom="rendu" content="webkit" />

  3. <méta http-equiv="Compatible X-UA" content="IE=edge,chrome=1">

  4. <meta name="keywords" content="News News Center Fact News Channel, Current Affairs Report">

  5. <méta nom="description" content="Tencent News, factuel. Centre d'actualités, y compris les actualités, les actualités nationales, les actualités internationales, les actualités sociales, les commentaires sur l'actualité, les images d'actualité, les sujets d'actualité, les forums d'actualités, l'armée, l'histoire , portail professionnel d'information sur l'actualité ">

  6. <meta nom ="auteur" contenu="skeetershi" />

Métaparamètres sur la page d'accueil de Qidian Novel.com :


Code XML/HTMLCopier le contenu dans le presse-papiers

  1. <méta nom="mots-clés" contenu ="Roman, roman de site Web, roman d'amour, roman jeunesse, roman fantastique, roman d'arts martiaux, roman urbain, roman historique, roman en ligne, littérature originale en ligne" />

  2. <méta nom="description" contenu ="Lecture de romans, les romans merveilleux sont tous dans Qidian Novels. Qidian Novels propose des romans fantastiques, des romans d'arts martiaux, des romans originaux, des romans de jeux en ligne, des romans urbains, des romans d'amour, des romans jeunesse, des romans historiques, des romans militaires, romans de jeux en ligne, romans de science-fiction, romans d'horreur, lecture gratuite des derniers chapitres des premiers romans, toute l'excitation est dans Qidian Novels ! . <

  3. méta
  4. http-equiv="Content-Type" id ="meta_ContentType" content="text/html;charset=UTF-8" /> <

  5. méta
  6. nom="robots" contenu=" tous" /><

  7. méta
  8. nom="googlebot" content="all" />< ;

  9. méta
  10. nom="baiduspider" content="all" /> ; <

  11. méta
  12. nom="copyright" content="Le droit d'auteur de cette page www.qidian.com appartient à Qidian Chinese Network. Tous droits réservés" />

  13. <méta http-equiv="mobile-agent" contenu="format=wml; url=http://m.qidian.com" /><méta 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" />

  14. <méta nom="nom-application" content="起点中文小说网" /   

  15. <meta name="msapplication-starturl " content="/Default.aspx?_s=ie9" />

  16. <meta name="msapplication-tooltip" content="小说阅读_起点中文小说网|免费小说,玄幻小说,武侠小说,言情小说,青春小说,小说网各类小说下载" />

  17. <meta name="msapplication-task" content="name=起点小游戏;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" /> ;

  18. <méta nom="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" />

  19. <méta name="msapplication-task" content="name=读书客户端;action-uri=http://c.qidian .com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico" />

  20. <méta nom="msapplication-task" content="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" />

  21. <méta nom="msapplication -task" content="name=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www .qidian.com/Images/ie9/search.ico" />

  22. <méta property="qc:admins" content="204236767661141166375" />

meta详解

meta标签可分为两大部分:http-equiv和name变量。

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 le contenu de la page Web.

Valeur Description Exemple
type de contenu Définissez le jeu de caractères utilisé par la page Lorsque
描述 例子
content-type 设定页面使用的字符集            

GB2312时,代表说明网站是采用的编码是简体中文;

ISO-8859-1时,代表说明网站是采用的编码是英文;

UTF-8时,代表世界通用的语言编码;

PS:html5页面的做法是直接使用

X-UA-Compatible IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题。

以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  
以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。  
以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。  
           

以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

PS:谷歌添加一个插件:Google Chrome Frame(谷歌内嵌浏览器框架GCF),这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

expires 设定网页的过期时间。            

PS:必须使用GMT的时间格式

refresh 自动刷新并指向新页面。            

PS:2代表页面停留2秒后跳转到后面的网址上

set-cookie 如果网页过期,那么自动删除本地cookie。            

PS:必须使用GMT的时间格式。

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

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

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

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

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

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

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

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

GB2312, le représentant indique que le codage utilisé par le site Web est le chinois simplifié lorsque ISO-8859-1, le représentant indique que le codage utilisé par le site Web est l'anglais ; UTF-8 , représente le codage de langage universel au monde PS : La méthode pour les pages html5 consiste à utiliser directement
Compatible X-UA Balise spéciale pour IE8, utilisée pour spécifier le navigateur IE8 pour simuler la méthode de rendu de une version spécifique du navigateur IE Cela résoudra certains problèmes de compatibilité. Le code ci-dessus indique au navigateur IE si ou not Utilisez DTD pour déclarer les normes du document, et IE8/9 utilisera le moteur IE7 pour afficher la page.
Le code ci-dessus indique au navigateur IE qu'IE8/9 utilisera le moteur IE8 pour afficher la page.
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 le rendu. la page.
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 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 du navigateur Google Chrome et prend en charge plusieurs versions de navigateurs IE telles que IE6, 7 et 8. .
expire Définissez le délai d'expiration de la page Web. PS : le format d'heure GMT doit être utilisé
rafraîchir rafraîchir et pointer automatiquement Nouvelle page. PS : 2 signifie que la page restera pendant 2 secondes puis passera à l'URL suivante
set-cookie Si la page Web expire, le cookie local est automatiquement supprimé. ​ ​ ​ ​<🎜>PS : le format d'heure GMT doit être utilisé. <🎜>
windows-targetForcer l'affichage de la page comme une page indépendante dans le fenêtre, ce qui peut empêcher que votre propre page Web soit appelée comme page cadre par d'autres td>
contrôle de cache Mécanisme de mise en cache ​​​​​Public : indique que la réponse peut être mise en cache par n'importe quelle zone de cache. Privé : Indique que tout ou partie du message de réponse d'un seul utilisateur ne peut pas être traité par le cache partagé. Cela permet au serveur de décrire uniquement une réponse partielle d'un utilisateur qui n'est pas valide pour les demandes des autres utilisateurs. no-cache : Indique que le message de demande ou de réponse ne peut pas être mis en cache. no-store : utilisé pour empêcher la divulgation involontaire d'informations importantes. L'envoyer dans le message de demande entraînera l'utilisation de la mise en cache par les messages de demande et de réponse. max-age : indique que le client peut recevoir des réponses avec une durée de vie ne dépassant pas le temps spécifié en secondes. min-fresh : Indique que le client peut recevoir des réponses avec un temps de réponse inférieur à l'heure actuelle plus l'heure spécifiée. max-stale : indique que le client peut recevoir des messages de réponse au-delà du délai d'attente. Si vous spécifiez une valeur pour les messages périmés au maximum, le client peut recevoir des messages de réponse qui dépassent la valeur spécifiée du délai d'expiration.

nom

L'attribut name est principalement utilisé pour décrire les pages Web, et la valeur de l'attribut correspondante est le contenu. Le contenu du contenu est principalement utilisé par les robots des moteurs de recherche pour trouver des informations et. classer les informations.

Valeur Description Exemple
auteur Annotation Auteur de la page Web
mots-clés Mots-clés de page à inclure par les moteurs de recherche
description Description de la page pour l'inclusion dans les moteurs de recherche
viewport est utilisé pour contrôler le zoom de la page td>
renderer Spécifie comment les navigateurs double cœur affichent les pages par défaut . //Noyau du kit Web par défaut/ / Mode de compatibilité IE par défaut//Mode standard IE par défaut
描述 例子
author 标注网页的作者
keywords 页面关键词,用于被搜索引擎收录
description 页面描述,用于搜索引擎收录
viewport 用于控制页面缩放
renderer 指定双核浏览器默认以何种方式渲染页面。 //默认webkit内核//默认IE兼容模式//默认IE标准模式

PS:360浏览器支持

generator 说明网站的采用的什么软件制作
revised 网页文档的修改时间
robots 用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。            

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

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

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

index:文件将被检索;

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

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

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

copyright 网站版权信息

PS : prise en charge du navigateur 360

générateur Décrivez le logiciel utilisé pour créer le site Web
révisé Heure de modification du document web
robots td> Utilisé pour indiquer au robot de recherche quelles pages doivent être indexées et quelles pages n'ont pas besoin d'être indexées. Valeur : all|none|index|noindex|follow|nofollow, par défaut allall : le fichier sera récupéré et les liens sur la page peuvent être interrogés aucun ; : Le fichier ne sera pas récupéré, et les liens sur la page ne peuvent pas être interrogés ;

index : le fichier sera récupéré

suivre : les liens sur la page peuvent être interrogés ; 🎜>noindex : Le fichier ne sera pas récupéré, mais les liens sur la page peuvent être interrogés ; nofollow : Le fichier ne sera pas récupéré, mais les liens sur la page peuvent être interrogés.
copyright Informations sur les droits d'auteur du site Web

RésuméGrâce aux méta-paramètres des grands sites Web, vous pouvez voir que ceux couramment utilisés incluent la compatibilité X-UA, des mots-clés et une description. Le résumé (recommandation) ci-dessus de l'utilisation des balises méta html est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez Script Home.

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