Meta is often used to define page descriptions, keywords, last modified dates, and other metadata. This metadata serves browsers (how pages are laid out or reloaded), search engines, and other Web services.

composition

The meta tag has two attributes: http-equiv and name.

1. The name attribute

The name attribute is used to describe the web page, such as keywords, descriptions, and so on. The corresponding attribute value is Content. The content in content is the specific description of the name filling type, which is convenient for search engine to grab. The syntax format of the name attribute in the meta tag is:

<meta name="Parameters" content="Specific description">.Copy the code

The name attribute has the following parameters: (A-C are common attributes)

A. Keywords

Description: used to tell search engines the keywords of your web page. For example:

<meta name="keywords" content="Lxxyx, blog, liberal arts, front end.">
Copy the code

B. Description (description of website content)

Description: Used to tell search engines about the main content of your site. For example:

<meta name="description" content="Liberal arts student, love front end and programming. Currently a sophomore, this is my front end blog.">
Copy the code

C. Viewport (mobile window)

This property is often used to design mobile web pages. Viewport has been used in frameworks such as Bootstrap,AmazeUI, etc.

Examples (commonly used examples) :

<meta name="viewport" content="width=device-width, initial-scale=1">
Copy the code

Robots (define how search engine crawlers index)

Robots tell the crawler which pages need to be indexed and which pages do not need to be indexed. The content of the parameters have all, none, index, noindex, follow, nofollow. The default is all. For example:

<meta name="robots" content="none">
Copy the code

The specific parameters are as follows:

1. None: Search engines will ignore this page, equivalent to noindex, nofollow. 2. Noindex: Search engines do not index this page. 3. Nofollow: The search engine does not continue to search other pages through the link index of this page. 4. All: Search engine will index this page and continue through this page link index, equivalent to index, follow. 5. Index: Search engine index this page. 6. Follow: The search engine continues to search other pages through the link index of this page.

E. author

Description: Examples for annotating web page authors:

<meta name="author" content="Lxxyx,[email protected]">
Copy the code

F. Generator (Web page creation software)

Example of software used to indicate what kind of web page is made:

<meta name="generator" content="Sublime Text3">
Copy the code

G. Copyright

Description: Example for marking copyright information:

<meta name="copyright" content="Lxxyx"> // This website is copyrighted by Lxxyx.Copy the code

H. evisit-after(Search engine crawler revisit time)

Note: If the page is not often updated, in order to reduce the search engine crawler pressure on the server, you can set a crawler revisit time. If the revisit time is too short, the crawlers will use the default time they define. For example:

<meta name="revisit-after" content="7 days" >
Copy the code

I. Renderer (dual-core browser rendering)

Description: Renderer is intended for dual-core browsers and specifies how the dual-core browsers will render the page by default. Take the 360 browser for example. For example:

<meta name="renderer" content="webkit"> // Default webKit kernel <meta name="renderer" content="ie-comp"Default IE compatibility mode <meta name="renderer" content="ie-stand"> // Default IE standard modeCopy the code

2. HTTP – equiv properties

Attribute syntax format is:

<meta http-equiv="Parameters" content="Specific description">
Copy the code

A. Content-type (set the web page character set)

Use to set the web page character set, easy browser parsing and rendering page

<meta http-equiv="content-Type" content="text/html; charset=utf-8"<meta charset= <meta charset="utf-8"Word-wrap: break-word! Important; "> < span style =" box-sizing: border-boxCopy the code

B. x-uA-compatible (which version the browser uses to render the current page)

Description: Tells the browser which version to render the page in. (This is usually set to the latest mode, and is common in frameworks.) For example:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> // Specify IE and Chrome to render the current page using the latest versionCopy the code

C. Cache-control (specifies the caching mechanism for the request and response to follow)

Use 1.

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

There are several ways to use it:

  • No-cache: Sends a request first and verifies with the server whether the resource has been changed. If not, cache is used.

  • No-store: do not allow caching, go to the server and download the full response every time. (Safety measures)

  • Public: Cache all responses, but not required. Because max-age can do the same thing

  • Private: Only a single user is cached, so no relays are allowed to be cached. (For example, CDN does not allow caching of private responses)

  • Maxage: Indicates how long the response can be cached and reused from the start of the current request without going to the server to rerequest it. For example, max-age=60 indicates that the response can be cached and reused for 60 seconds

Usage 2.(Prohibit Baidu automatic transcoding)

Note: Used to prevent the current page from being automatically transcoded by Baidu when browsing on the mobile terminal. Although Baidu’s intention is good, but the transcoding effect is often unsatisfactory. So you can add the sentence in the example in the head, can avoid baidu automatic transcoding. For example:

<meta http-equiv="Cache-Control" content="no-siteapp" />
Copy the code

D. Expires

Note: It is used to set the expiration time of the web page. After the expiration, the web page must be retransmitted to the server. For example:

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
Copy the code

F.refresh(automatically refresh and point to a page)

Description: The page will be set within the time, automatically refresh and adjust to the set url. For example:

<meta http-equiv="refresh" content="2; URL=http://www.lxxyx.win/"> < p style = "max-width: 100%; clear: bothCopy the code

F. set-cookie

Note: If the page is expired. Cookies stored locally on the web page will also be automatically deleted.

<meta http-equiv="Set-Cookie" content="name, date"<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> // ExamplesCopy the code