Meta Tags and meta tags

Meta Tags and meta tags

[Reprint]

The use of meta tags is a problem that I have been confused about for a while in front-end learning. On the one hand, I don't know the use of meta tags, but I don't know the attributes and values in meta tags, and I don't know where to come from. Therefore, this article specially sorts out meta tags, A required and key tag.

What is a meta tag?
Description of W3school definition.
Metadata (metadata) is information about data.

Tags provide metadata about HTML documents. Metadata is not displayed on the page, but is readable to machines.

In typical cases, meta elements are used to specify the page description, keywords, Document Author, last modification time, and other metadata.

The label is always in the head element.

Metadata can be used in browsers (how to display content or reload pages), search engines (keywords), or other web Services.

In fact, the above concepts are simply summarized as follows: <meta> tags provide metadata about HTML documents. It 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.

Role of meta
The data in meta is for the machine to interpret and tell the machine how to parse the page. Another purpose is to add the http header content sent from the server to the browser, for example, add the following meta tag to the page:
<Meta http-equiv = "charset" content = "iso-8859-1">
<Meta http-equiv = "expires" content = "31 Dec 2008">
The browser header will include the following:
Charset: iso-8859-1
Expires: 31 Dec 2008
Of course, these fields are meaningful only when the browser can accept these additional header fields and use them in an appropriate way.

Required and optional attributes of meta
Required attribute content
The required attribute of meta is content. Of course, it does not mean that the meta tag must have content, but when the http-equiv or name attribute exists, it must be described by the content attribute. For example:

<Meta name = "keywords" content = "HTML, ASP, PHP, SQL">

The attribute in the content is the description of keywords, so it can be understood as a key-value pair, that is, {keywords: "HTML, ASP, PHP, SQL "}.

Optional attributes
In W3school, three optional meta attributes are described: http-equiv, name, and scheme. Considering that scheme is not very common, let's just talk about the first two attributes.

Http-equiv
The http-equiv attribute adds http header content. If you want to add additional http header content to a browser, you can use this attribute. The above meta also provides a simple description, so let's take another example. For example, if we don't want to use js for redirection and use http header content control, we can control it like this:
<Meta http-equiv = "Refresh" content = "5; url = http://blog.yangchen123h.cn"/>
After adding this to the page, the page will jump to the specified page in 5 seconds. The effect can be seen in the W3school example.

Name
The second optional attribute is name, which is used by the browser for parsing. For some browser compatibility problems, the name attribute is the most commonly used, of course, there is a premise that the browser can parse the name attribute you write in, otherwise it is meaningless. Let's take an example:
<Meta name = "renderer" content = "webkit">
This meta tag tells the browser to use the webkit kernel for parsing. Of course, it is only possible for the browser to have the webkit kernel. Otherwise, it is meaningless. Of course, you may be wondering where the renderer came from. How can I know it? This is shown in the development document of the corresponding browser. For example, this renderer is described in the 360 browser. 360 browser kernel control Meta tag description

Summary of frequently-used meta tags
Next, we will summarize the commonly used meta tags. I will try to make them as full as possible.

Charset
Charset is the character encoding used in the declaration document. It is mainly used to solve the garbled problem. It is worth mentioning that this charset must write the first line, otherwise, garbled characters may occur.

Charset can be written in two ways.
<Meta charset = "UTF-8">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
Both are equivalent.

Transcoding prohibited by Baidu
Baidu will automatically transcode the webpage. This label prohibits Baidu's automatic transcoding.
<Meta http-equiv = "Cache-Control" content = "no-siteapp"/>
SEO Optimization
<! -- Page title <title> label (head header required) -->
<Title> your title </title>
<! -- Page keyword keywords -->
<Meta name = "keywords" content = "your keywords">
<! -- Description -->
<Meta name = "description" content = "your description">
<! -- Define the webpage author -->
<Meta name = "author" content = "author, email address">
<! -- Defines the indexing method of a Web search engine. robotterms is a group of values separated by commas (,). Generally, the following values are available: none, noindex, nofollow, all, index, and follow. -->
<Meta name = "robots" content = "index, follow">
Viewport
Viewport mainly affects the layout of mobile pages, for example:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
Content parameter:

Width viewport width (numeric value/device-width)
Height viewport height (numeric value/device-height)
Initial-scale initial scaling ratio
Maximum-scale maximum scaling ratio
Minimum-scale min scaling ratio
Whether user-scalable allows user Scaling (yes/no)
Various browser platforms
Microsoft Internet Explorer
<! -- Use the latest ie version first -->
<Meta http-equiv = "x-ua-compatible" content = "ie = edge">
<! -- Whether to enable 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
<! -- Use the latest chrome version first -->
<Meta http-equiv = "X-UA-Compatible" content = "chrome = 1"/>
<! -- Disable automatic translation -->
<Meta name = "google" value = "notranslate">
360 browser
<! -- 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 display page -->
<Meta name = "full-screen" content = "yes">
<! -- Force image display, even if it is "text mode" -->
<Meta name = "imagemode" content = "force">
<! -- Application Mode: full screen by default. Do not press the menu long, disable gestures, standard layout, and force the image to be displayed. -->
<Meta name = "browsermode" content = "application">
<! -- Disable nighttime display -->
<Meta name = "nightmode" content = "disable">
<! -- Display in screen-fit mode -->
<Meta name = "layoutmode" content = "fitscreen">
<! -- Disable Zoom when the page contains too much text -->
<Meta name = "wap-font-scale" content = "no">
UCBrowser_U3_API

QQ mobile browser
<! -- Lock the screen in a specific direction -->
<Meta name = "x5-orientation" content = "landscape/portrait">
<! -- Full screen display -->
<Meta name = "x5-fullscreen" content = "true">
<! -- The page will be displayed in application 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 format of mobile phone numbers -->
<Meta name = "format-detection" content = "telephone = no">

<! -- Add to Home 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">
<! -- Add the title to the home screen -->
<Meta name = "apple-mobile-web-app-title" content = "App Title">
Google Android
<Meta name = "theme-color" content = "# E64545">
<! -- Add 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/ -->
Final: meta commonly used on mobile terminals
<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"/> <! -- Delete the default toolbar and menu bar of Apple -->
<Meta name = "apple-mobile-web-app-status-bar-style" content = "black"/> <! -- Set the color of the apple toolbar -->
<Meta name = "format-detection" content = "telphone = no, email = no"/> <! -- Ignore digit recognition on the page as a phone number and email recognition -->
<! -- Enable the speed mode of the 360 browser (webkit) -->
<Meta name = "renderer" content = "webkit">
<! -- Avoid IE using compatibility mode -->
<Meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<! -- 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 model -->
<Meta name = "x5-page-mode" content = "app">
<! -- Windows phone click without highlights -->
<Meta name = "msapplication-tap-highlight" content = "no">
<! -- Adapt to the Mobile end -->