Collection and sorting of meta tags in common webpage headers and meta tags in Webpage Headers

Collection and sorting of meta tags in common webpage headers and meta tags in Webpage Headers
<Meta> element Summary

Tags provide metadata about HTML documents. Metadata is not displayed on the page, but is readable to machines. It can be used in browsers (how to display content or reload pages), search engines (keywords), or other web Services. -- W3School

Required attributes

Attribute	Value	Description
Content	Some text	Define metadata related to the http-equiv or name attribute

Optional attributes

Attribute	Value	Description
Http-equiv	Content-type/expire/refresh/set-cookie	Associate the content attribute with the HTTP header.
Name	Author/description/keywords/generator/revised/others	Associate the content attribute with a name.
Content	Some text	Defines the format used to translate the content property value.

SEO Optimization

References

• Page keywords, each page should have a unique set of keywords that describe the content of the page.
  Users may search for and accurately describe descriptive and representative keywords and phrases of the information provided on the webpage. If the TAG content is too short, the search engine may not consider the content as relevant. It cannot exceed 874 characters.

<meta name="keywords" content="your tags" />

• Page Description. Each page should contain a description tag that cannot exceed 150 characters and can accurately reflect the content of the page.

<meta name="description" content="150 words" />

• The search engine index method. robotterms is a set of values separated by commas (,). Generally, there are several values: none, noindex, nofollow, all, index, and follow. Make sure that the nofollow and noindex attribute values are used correctly.

<Meta name = "robots" content = "index, follow"/> <! -- All: the file will be retrieved, and the link on the page can be queried; none: the file will not be retrieved, and the link on the page cannot be queried; index: files will be retrieved; follow: links on the page can be queried; noindex: files will not be retrieved; nofollow: links on the page cannot be queried. -->

• Page redirection and refresh: the number in the content indicates the time (in seconds), and the amount of time is refreshed. If a url is added, the webpage is redirected to the specified webpage (the search engine can automatically detect the webpage and is easily punished by the engine as misleading ).

<meta http-equiv="refresh" content="0;url=" />

• Others

<Meta name = "author" content = "author name"/> <! -- Define the webpage author --> <meta name = "google" content = "index, follow"/> <meta name = "googlebot" content = "index, follow "/> <meta name =" verify "content =" index, follow "/>

Mobile Devices

• Viewport: optimizes the display of mobile browsers. If it is not a responsive website, do not use initial-scale or disable scaling.
  For most 4.7-5-inch devices, the viewport width is set to 360px; for 5.5-inch devices, for iPhone 6, it is set to 375px; and for ipone6 plus, it is set to 414px.

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/> <! -- 'Width = device-width' causes black borders to appear when the iPhone 5 is added to the home screen and the page is opened in full screen WebApp mode -->

1. Width: width (numeric value/device-width) (range: 200 to 10,000, default value: 980 pixels)
2. Height: height (numeric value/device-height) (range: 223 to 10,000)
3. Initial-scale: initial scaling ratio (range:> 0 to 10)
4. Minimum-scale: minimum scale that allows users to scale
5. Maximum-scale: maximum scale allowed by users
6. User-scalable: Can a user manually scale down (no, yes)
7. Minimal-ui: the upper and lower status bars can be minimized during page loading. (Deprecated)

Note: many people use initial-scale = 1 to non-responsive websites, which will render the website in 100% width. You need to manually move the page or scale the page. If you use user-scalable = no or maximum-scale = 1 at the same time as initial-scale = 1, you cannot zoom in/out the webpage to see all the content.

• WebApp full screen mode: camouflage app, offline application.

<Meta name = "apple-mobile-web-app-capable" content = "yes"/> <! -- Enable WebApp full screen mode -->

• Hide the status bar/set the status bar color: It takes effect only when WebApp full screen mode is enabled. The value of content is default | black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

• Title after being added to the home screen

<Meta name = "apple-mobile-web-app-title" content = "title">

• Automatically recognize numbers as phone numbers

<meta content="telephone=no" name="format-detection" /> 

• Ignore recognized email addresses

<meta content="email=no" name="format-detection" />

• Add the Smart App Banner to the Smart App advertisement bar: Tell the browser the app corresponding to the website, and display and download banner (for example) on the page ). References

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 

• Other references

<! -- Optimized for handheld devices, mainly for some old browsers that do not recognize viewport, such as BlackBerry --> <meta name = "HandheldFriendly" content = "true"> <! -- Microsoft's old-fashioned browser --> <meta name = "MobileOptimized" content = "320"> <! -- Uc force portrait --> <meta name = "screen-orientation" content = "portrait"> <! -- QQ Forced vertical screen --> <meta name = "x5-orientation" content = "portrait"> <! -- UC force full screen --> <meta name = "full-screen" content = "yes"> <! -- QQ forced full screen --> <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 "NONE" --> <meta name = "msapplication-tap-highlight" content = "no">

Webpage Problems

• Declarative Encoding

<meta charset='utf-8' />

• The latest version of IE and Chrome are preferred.

<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1"/> <! -- About X-UA-Compatible --> <meta http-equiv = "X-UA-Compatible" content = "IE = 6"> <! -- Use IE6 --> <meta http-equiv = "X-UA-Compatible" content = "IE = 7"> <! -- Use IE7 --> <meta http-equiv = "X-UA-Compatible" content = "IE = 8"> <! -- Use IE8 -->

• Browser kernel control: Many browsers in China are webkit and Trident. The webkit kernel supports high-speed browsing, And the IE kernel is compatible with web pages and old websites. The website that adds meta tags can control the kernel rendering that the browser chooses. References

 <meta name="renderer" content="webkit|ie-comp|ie-stand">

The default Kernel Mode of the domestic dual-core browser is as follows:
1. sogou high-speed browser and QQ Browser: IE kernel (compatible mode)
2. 360 extreme speed browser and browser: Webkit kernel (extreme speed mode)

• Prohibit the browser from accessing the page content from the cache of the Local Computer: in this way, visitors will not be able to browse offline.

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

• Windows 8

<Meta name = "msapplication-TileColor" content = "#000"/> <! -- Windows 8 tile color --> <meta name = "msapplication-TileImage" content = "icon.png"/> <! -- Windows 8 tile icon -->

• Site Adaptation: Mainly used for PC-Mobile Page correspondence.

<Meta name = "mobile-agent" content = "format = [wml | xhtml | html5]; url = url"> <! -- [Wml | xhtml | html5] select one of the Protocol languages based on the mobile phone page. url = "url" indicates the mobile phone page URL corresponding to the current PC page, the two must have a one-to-one relationship. -->

• Transcoding statement: Opening a webpage with Baidu may transcode the webpage (such as posting an advertisement). To avoid transcoding, you can add the following meta.

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

Other references

COMPLETE LIST OF HTML META TAGS
W3C META TAGS
Ages in HTML5
MDN META TAGS