Summary and detailed explanation of meta tags in HTML

meta tag function

META tag is a key tag in the HTML tag HEAD area, which provides the document character set, Using basic information such as language and author, as well as setting keywords and web page levels, the biggest role is to be able to do searchengine optimization (SEO).

PS: It is convenient for search engine robots to search and classify. Internet applications should pay attention to it.

How to write large websites?

Before understanding this tag, I searched for their Meta settings on various mainstream websites, as follows:

Meta settings on JD.com’s homepage:

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

Meta setting of Taobao homepage:

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

Meta setting of youku homepage:

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

Douyu homepage Meta settings:

meta tag function

The META tag is a key tag in the HEAD area of ​​HTML tags, providing basic information such as document character set, language, author, etc. Information, as well as the setting of keywords and web page levels, etc., are most useful for search engine optimization (SEO).

PS: It is convenient for search engine robots to search and classify, so Internet applications should pay attention to it.

How to write large websites?

Before understanding this tag, I searched for their Meta settings on various mainstream websites, as follows:

Meta settings on JD.com’s homepage:

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

Meta settings on Taobao homepage:

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

Meta settings on youku homepage:

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

meta detailed explanation

meta tag can be divided into two parts: http-equiv and name

variable

.

http-equiv

http-equiv is equivalent to the file header of http. It can return some useful information to the browser to help the browser correctly Display web page content.

Valuecontent-typeX -UA-CompatibleIE browserDTDexpiresrefresh## set-cookie the local cookie.

Description	Example
Set the character set used on the page		<meta http-equiv="content-Type" content="text/html; charset=utf-8"> When GB2312, it represents the description The encoding used by the website is Simplified Chinese; when ISO-8859-1, it means that the encoding used by the website is English; when UTF-8, it means the universal language encoding; PS: The html5 page is to directly use 9d54027d814bba7a6c118810bbc6025d
Special tag for IE8, used to specify the IE8 browser to simulate the rendering method of a specific version of	, in order to solve some compatibility issues. <meta http-equiv="X-UA-Compatible" content="IE=7"> The above code tells the IE browser that regardless of whether the document standard is declared with	, IE8/9 will use the IE7 engine to render the page. <meta http-equiv="X-UA-Compatible" content="IE=8"> The above code tells the IE browser that IE8/9 will use the IE8 engine to render the page. <meta http-equiv="X-UA-Compatible" content="IE=edge"> The above code tells the IE browser that IE8/9 and later versions will use the highest version of IE to render the page. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> The above code IE=edge tells IE to use the latest engine to render web pages, and chrome=1 can activate Chrome Frame. PS: Google adds a plug-in: Google Chrome Frame (Google Embedded Browser Framework GCF), this plug-in can keep the user's IE browser unchanged, but when the user browses the web, they actually use the Google Chrome browser core, and Supports multiple versions of IE browsers such as IE6, 7, and 8.
Set the expiration time of the web page.	<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">	PS: GMT time format must be used
automatic Refresh and point to the new page.	<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">	PS: 2 means that the page will stay for 2 seconds and then jump to the following URL
If the web page expires, then automatically delete	<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">	PS: GMT time format must be used.
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" />

The above is the detailed content of Summary and detailed explanation of meta tags in HTML. For more information, please follow other related articles on the PHP Chinese website!