The role and collation of meta tags

Reproduced

The use of META tags was a problem I had been puzzled over for some time in front of my learning. On the one hand is not very understanding the use of META tags, on the other hand, the META tag properties and values are not understood, and do not know where to come out, so this article specifically to organize the META tag, a mandatory and key tag.

What is a meta tag?
Quote from the definition of W3school below.
Meta data (metadata) is information about the data.

The tag provides metadata about the HTML document. The metadata is not displayed on the page, but is readable for the machine.

Typically, the meta element is used to specify the description of the page, the keywords, the author of the document, the last modification time, and other metadata.

The label is always in the head element.

Meta data can be used in browsers (how to display content or reload pages), search engines (keywords), or other Web services.

In fact, a simple summary of the above concept is that the:<meta> tag provides metadata about the HTML document. It is not displayed on the page, but is readable for the machine. Available for browsers (how to display content or reload pages), search engines (keywords), or other Web services.

The role of Meta
Meta data is for machine interpretation, tell the machine how to parse this page, there is also a purpose is to add the server sent to the browser HTTP header content, for example, we add the following meta tags to the page:
<meta http-equiv= "CharSet" content= "Iso-8859-1" >
<meta http-equiv= "Expires" content= "to Dec" >
Then the browser's head will include these:
Charset:iso-8859-1
Expires:31 DEC 2008
Of course, these fields make sense only if the browser can accept these additional header fields and use them in the appropriate way.

Required and optional properties for meta
Required Properties Content
The required attribute of meta is content, not necessarily a content in meta tags, but a content attribute when there is a http-equiv or name attribute. For example:

<meta name= "keywords" content= "html,asp,php,sql" >

The property in this content is the description of the keywords, so it can also be understood as a key value, it is {keywords: "Html,asp,php,sql"}.

Optional properties
In W3school, there are three optional attributes for meta, namely HTTP-EQUIV, name, and scheme. Consider that scheme is not very common, so just say the first two properties.

Http-equiv
The Http-equiv property is to add HTTP header content, to some custom, or to add additional HTTP header content that needs to be sent to the browser, we can use this property. There is also a simple explanation in the meta-action above, so let's take another example. For example, we do not want to use JS to redirect, with the HTTP header content control, then you can control:
<meta http-equiv= "Refresh" content= "5;url=http://blog.yangchen123h.cn"/>
Add this to the page, after 5 seconds will jump to the specified page, the effect can be seen W3school example

Name
The Second optional attribute is name, this property is for the browser to parse, for some browser compatibility issues, the name attribute is the most commonly used, of course, there is a premise that the browser can parse the name you write in the property can be, or there is no meaning. Let's give an example:
<meta name= "renderer" content= "WebKit" >
This meta tag means to tell the browser, with the WebKit kernel to parse, of course, if the browser has a WebKit kernel can, otherwise there is no meaning. Of course, you may have doubts about seeing this, where does this renderer come from, and how do I know? This is indicated in the development documentation for the corresponding browser, for example, this renderer is illustrated in the

Frequently used meta Tags big Summary
The following is a general summary of the META tags, I will do as much as possible to achieve full

CharSet
CharSet is the declaration of the document using the character encoding, to solve the garbled problem is the main use of it, it is worth mentioning that this charset must write the first line, otherwise it may produce garbled.

CharSet has two ways of writing.
<meta charset= "Utf-8" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
Each of the two is equivalent.

Baidu banned transcoding
Baidu will automatically transcode the Web page, this tag is prohibited Baidu automatic transcoding
<meta http-equiv= "Cache-control" content= "No-siteapp"/>
SEO Optimization section
<!--page title <title> tag (head head must)-->
<title>your title</title>
<!--page keywords Keywords-->
<meta name= "keywords" content= "your keywords";
<!--page description content description-->
< Meta name= "description" content= "your description";
<!--define Web page author author-->
<meta name= "Author" content= "Author,email address";
<!--defines the index of a web search engine, Robotterms is a set of values that use commas and splits, usually in the following ways: None,noindex, Nofollow,all,index and follow. -->,
<meta name= "Robots" content= "Index,follow";
Viewport
Viewport mainly affects the mobile page layout, for example:
<meta Name= "Viewport" content= "width=device-width, initial-scale=1.0";
Content parameters:

Width viewport widths (numeric/device-width)
Height viewport altitude (numeric/device-height)
Initial-scale Initial zoom ratio
Maximum-scale Maximum zoom ratio
Minimum-scale Minimum zoom ratio
User-scalable whether to allow user scaling (yes/no)
Each browser platform
Microsoft Internet Explorer
<!--use the latest IE version first--
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<!--turn on ClearType display effect
<meta http-equiv= "ClearType" content= "on" >
<meta name= "Skype_toolbar" content= "skype_toolbar_parser_compatible" >

<!--Pinned Site--
<!--IE 10/windows 8--
<meta name= "Msapplication-tileimage" content= "Pinned-tile-144.png" >
<meta name= "Msapplication-tilecolor" content= "#009900" >
<!--IE 11/windows 9.1--
<meta name= "Msapplication-config" content= "Ieconfig.xml" >
Google Chrome
<!--priority to use the latest Chrome version--
<meta http-equiv= "x-ua-compatible" content= "chrome=1"/>
<!--disable automatic translation--
<meta name= "google" value= "notranslate" >

<!--Select the browser to use to parse the kernel--
<meta name= "renderer" content= "Webkit|ie-comp|ie-stand" >
UC Mobile Browser
<!--Lock the screen in a specific direction--
<meta name= "screen-orientation" content= "landscape/portrait" >
<!--full Screen page--
<meta name= "Full-screen" content= "yes" >
<!--force picture display, even "text mode"--
<meta name= "Imagemode" content= "Force" >
<!--application Mode, default will be full screen, prohibit long press menu, prohibit gesture, standard layout, force picture display. -
<meta name= "Browsermode" content= "Application" >
<!--disable Night mode display--
<meta name= "Nightmode" content= "Disable" >
<!--using the Fit mode display--
<meta name= "LayoutMode" content= "Fitscreen" >
<!--disable zooming when the page has too much text
<meta name= "Wap-font-scale" content= "no" >
Ucbrowser_u3_api

QQ Mobile Browser
<!--lock screen in a specific direction--
<meta name= "x5-orientation" content= "landscape/portrait" >
<!--full-screen display-
<meta name= "X5-fullscreen" content= "true" >
<!--page is displayed in app mode-
<meta name= "X5-page-mode" content= "App" >
Apple IOS
<!--Smart App Banner--
<meta name= "Apple-itunes-app" content= "App-id=app_id,affiliate-data=affiliate_id,app-argument=some_text" >

<!--disable automatic detection and formatting of mobile phone numbers--
<meta name= "format-detection" content= "Telephone=no" >

<!--add to home screens to the main screen--
<!--enable WEBAPP full Screen mode--
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<!--set the background color of the status bar, which takes effect only when "apple-mobile-web-app-capable" content= "yes"
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >
<!--title after adding to the main screen--
<meta name= "Apple-mobile-web-app-title" content= "app title" >
Google Android
<meta name= "Theme-color" content= "#E64545" >
<!--added to main screen--
<meta name= "mobile-web-app-capable" content= "yes" >
<!--more Info:https://developer.chrome.com/multidevice/android/installtohomescreen--
APP Links
<!--IOS--
<meta property= "Al:ios:url" content= "Applinks://docs" >
<meta property= "al:ios:app_store_id" content= "12345" >
<meta property= "Al:ios:app_name" content= "app Links" >
<!--Android--
<meta property= "Al:android:url" content= "Applinks://docs" >
<meta property= "Al:android:app_name" content= "app Links" >
<meta property= "Al:android:package" content= "Org.applinks" >
<!--Web Fallback---
<meta property= "Al:web:url" content= "Http://applinks.org/documentation" >
<!--more info:http://applinks.org/documentation/--
Last--the meta used by mobile
<meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no"/>
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
<meta name= "format-detection" content= "Telephone=no, Email=no"/>
<meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no"/>
<meta name= "apple-mobile-web-app-capable" content= "yes"/><!--remove Apple's default toolbar and menu bar--
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/><!--set the Apple toolbar color--
<meta name= "format-detection" content= "Telphone=no, email=no"/><!--ignore the numbers in the page to recognize the phone, ignoring email identification

<meta name= "renderer" content= "WebKit" >
<!--prevent IE from using compatibility mode--
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and
<meta name= "handheldfriendly" content= "true" >
<!--Microsoft's Vintage browser--
<meta name= "mobileoptimized" content= ">"
<!--UC Force vertical screen--
<meta name= "Screen-orientation" content= "Portrait" >
<!--QQ Forced vertical screen--
<meta name= "X5-orientation" content= "Portrait" >
<!--UC Mandatory fullscreen--
<meta name= "Full-screen" content= "yes" >
<!--QQ Mandatory fullscreen--
<meta name= "X5-fullscreen" content= "true" >
<!--UC Application Mode--
<meta name= "Browsermode" content= "Application" >
<!--QQ Application Mode--
<meta name= "X5-page-mode" content= "App" >
<!--windows Phone Click No Highlight--
<meta name= "Msapplication-tap-highlight" content= "no" >
<!--adapt to mobile end---

The role and collation of meta tags