Detailed analysis of html meta tag usage and attributes

This article brings you a detailed analysis of the use and attributes of html meta tags. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

Since I started self-studying the front-end, I didn’t have much contact with meta tags. I mainly focused on tags that can be displayed, such as span, button, h1, etc. Sometimes I check the source code of some well-known websites and find a lot of meta in the head tag.

Today let’s learn the use of meta and see what attributes it has.

1. Definition and function

meta, that is, metadata (Metadata) is the data information of data.

This tag provides metadata for the HTML document. The metadata will not be displayed on the client, but will be parsed by the browser.

is usually used to specify the description, keywords, last modification time of the file, author and other metadata of the web page.

Metadata can be called using browsers (how content is displayed or pages are reloaded), search engines (keywords), or other web services.

2. Attributes

charset(new in htm5)	Definition document The character encoding
#content	defines meta-information related to the http-equiv or name attribute.
http-equiv	http response header
name	Attribute name
scheme (htm5 obsolete)	Scheme for translating the value of the content attribute

1 , charset

HTML5 new attribute, defines the character encoding of the current page

New writing method:

<meta charset="UTF-8">

Old writing method:

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

HTML5 The new writing method is preferred

2. Name attribute

a. Keywords, keywords of the current web page, to facilitate search engine identification and improve search accuracy

<meta name="keywords" content="cdn，网络加速，运营商">

b, description, a brief description of the current web page. If you search with Baidu, the description content will be displayed under each title of the search results to facilitate users to quickly locate

<meta name="description" content="本公司专注提供CDN网络加速，同时也提供云计算服务">

c, viewport, this Meta is a bit complicated. It is mainly used in mobile web pages and requires a separate article. I will temporarily skip

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

d and robots. The indexing method of search engine crawlers

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

content value There are all, none, index, noindex, follow, and nofollow. The default is all. The specific instructions are as shown in the table:

all	Documents can be Index, the links in the document can be queried
none	The document cannot be indexed, and the links in the document cannot be queried
index	The document can be indexed
noindex	The document cannot be indexed, but the links in the document can be queried
follow	The links in the document can be queried
nofollow	The document can be indexed, but the The link cannot be queried

e, author, the author of the document

<meta name="author" content="liuhw，liuhuansir@126.com">

f, copyright, the copyright statement of the document

<meta name="copyright" content="liuhw">

g, revisit-after, the time interval for search engine crawlers to revisit. If your website is not updated frequently, you can set this time to be slightly longer, which can slightly reduce the pressure on the server and save bandwidth resources

<meta name="revisit-after" content="5 days" >

h. renderer, the rendering method of dual-core browsers, specifies which browser core is used for rendering by default, for example, 360 browser:

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

3, http-equiv

Simulate the header in http and send some information back to the server

a, expires, the expiration time of the web page, after expiration, you need to revisit the server

<meta http-equiv="expires" content="Sunday 26 October 2018 01:00 GMT" />

b, pragma (compatible with http1.0 , 1.1), cache-control (new in http1.1), set the cache method, it is recommended to use cache-control, the content of this attribute refers to cache-control

<meta http-equiv="cache-control" content="no-cache">

c, refresh in http, automatic refresh And jump to the url

<meta http-equiv="refresh" content="5；URL=http://www.liuhw.club/"> //5秒后跳转向我自己的域名

d and set-cookie declared in content, add cookie

<meta http-equiv="set-cookie" content="TOKEN_KEY=81BBF72619795017B6AC214AE705F1F8; Domain=10.1.100.111; Path=/">

e, content-Type, the character encoding of the document, the same as charset, it is recommended to use charset

<meta http-equiv="content-type" content="text/html;charset=gb2312">

f, x-ua-compatible, tell the browser which version to use to render the document

<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

To summarize, the above only lists some commonly used attributes, and those that are not listed are needed. Check the documentation later

[Related recommendations: HTML5 video tutorial]

The above is the detailed content of Detailed analysis of html meta tag usage and attributes. For more information, please follow other related articles on the PHP Chinese website!