As a cutmap, meta has always been used for SEO optimization and setting viewport tags, but recently I checked the front-end code of Taobao, JINGdong, Suning and other websites, but FOUND that the use of meta tags is diverse, which I know I have been underestimated meta tags. I wrote this article after reading the front-end code of several other large websites and browsing the relevant information. If there are any mistakes in the article, please point out and correct them immediately.

http-equiv

Http-equiv is one of the most important meta tags in the web. It is literally HTTP related, and its content values are HTTP specific headers. It interacts with servers and browsers to make web content appear accurate and timely. Content-type, Content-language, and set-cookie have been deprecated, while properties such as ClearType and ImageToolbar, which are not covered by the HTML standard, are no longer described.

content-security-policy

For security purposes, the same origin policy of the browser protects user security to some extent. However, tags such as Script, Link, and IMG are not affected by the same origin policy, which may bring security risks to our users. In this case, this attribute comes into play. In the browser, this property is set to declare which dynamic resources are allowed to be loaded to reduce XSS attacks. The Content of this property includes the control of static resources such as script, style, font and media. Due to its excessive Content, IT will not be described here. For more information about this property, you can read the Content Security Policy Reference.

Cache-control, Pragma, Expires

These three attributes are juxtaposed because they share the same attributes as HTTP headers. Literally, adding the corresponding attribute allows the browser to cache the corresponding HTML content, so on some sites (including large ones) you can see the following meta tag content

<meta http-equiv="cache-control" content="max-age=180" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
Copy the code

However, the reality is that these tags often don’t work, and even in the HTML5 specification, http-Equiv attributes don’t include these three, so if you need cache control, you’d better go with HTTP Headers.

x-dns-prefetch-control

Although the cache does not work in meta tag Settings, we can set meta tags to perform DNS resolution in advance to improve site performance. An A tag in an HTML page will automatically enable DNS advance resolution, but not in HTTPS.

refresh

The value of this property can be used to jump the page in the same way as the following function.

setTimeout(function(){
  window.location.href = "https://www.example.com"
},time)
Copy the code

Its common uses are as follows:

<meta http-equiv="refresh" content="1"> <meta http-equiv="refresh" content="0 "; <meta http-equiv="refresh" content="0; url='https://www.baidu.com'">Copy the code

Note that some browsers (Firefox) require users to manually enable Autorefreh, and the jump takes too long compared to JS execution.

default-style

This attribute specifies the preferred style sheet to use on the page. The content attribute must contain the title of the element, and the href attribute links to the CSS style sheet or the title of the

name

Name is the most frequently used attribute in our daily life. The values of author, keywords, description, robots and viewport are often used in daily life, so we will not explain them here. Here are some useful values in your application.

<meta name=" app-config "content="fullscreen=yes,useHistoryState=yes,transition=yes"> /* Whether to enable WebApp Full screen Mode */ <meta Name =" Apple-mobile-web-app-capable "content="yes"> <! -- Set status bar background color, valid only if "Apple-mobile-web-app-capable" content= "yes" --> <meta Name ="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" Content ="App Title"> /* Display an App banner at the top of the page, */ <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT" <meta name="renderer" content="webkit"> / <meta name="screen-orientation" Content ="portrait"> / / <meta name="x5-orientation" content="portrait"> / / <meta name="full-screen" <meta name=" browserMode "> <meta name=" browserMode "> Content ="application"> / <meta name="x5-page-mode" content="app" name="format-detection" content="telephone=no">Copy the code

miscellaneous

In fact the role of meta tags more than that, many websites (Google, baidu, sogou, twitter) has a set of their own specification, developers for compatibility, natural with the corresponding attributes. The corresponding meta tags are not covered here.