Commonly used meta organization-HTML Tutorial-php.cn

The
tag provides metadata about the HTML document. The metadata is not displayed on the page, but is machine-readable. It can be used by browsers (how content is displayed or pages are reloaded), search engines (keywords), or other web services.

　Required attributes

Property Value Description

content some text Define meta-information related to http-equiv or name attribute

　Optional attributes

Property Value Description

http-equiv content-type/expire/refresh/set-cookie Associate the content attribute to the HTTP header.

name author/description/keywords/generator/revised/others Associate the content attribute to a name.

content some text Define the format used to translate content attribute values.

　SEO optimization

　Reference documentation

Page Keywords, each web page should have a unique set of keywords that describe the content of that web page.
Use descriptive and representative keywords and phrases that people are likely to search for, and accurately describe the information provided on the page. Mark content that is too short and search engines may not consider it relevant. Also tags should not exceed 874 characters.
<meta name="keywords" content="your tags">
Copy after login
Page Description, each web page should have a description tag that is no longer than 150 characters and accurately reflects the content of the web page.
<meta name="description" content="150 words">
Copy after login
Search engine indexing method, robotterms is a set of values separated by commas (,), usually with the following values: none, noindex, nofollow, all, index and follow. Make sure to use the nofollow and noindex attribute values correctly.
<meta name="robots" content="index,follow">

Copy after login
Page redirection and refresh: The number in the content represents the time (seconds), that is, how long it takes to refresh. If you add a url, it will redirect to the specified web page (search engines can automatically detect it, and it can easily be regarded as misleading by the engine and be punished).
<meta http-equiv="refresh" content="0;url=">
Copy after login
Others
<meta name="author" content="author name"> 
<meta name="google" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="verify" content="index,follow">
Copy after login
　Mobile devices

viewport: Can optimize the display of mobile browsers. If the website is not responsive, do not use initial-scale or disable scaling.
The viewport width of most 4.7-5-inch devices is set to 360px; 5.5-inch devices are set to 400px; iphone6 is set to 375px; iphone6 plus is set to 414px.
<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;">

Copy after login
width: width (number / device-width) (range from 200 to 10,000, default 980 pixels)

height: height (numeric value / device-height) (range from 223 to 10,000)

initial-scale: initial scaling (ranging from >0 to 10)

minimum-scale: The minimum ratio the user is allowed to zoom to

maximum-scale: The maximum ratio the user is allowed to zoom to

user-scalable: whether the user can manually shrink (no,yes)

minimal-ui: You can minimize the upper and lower status bars when the page loads. (deprecated)

　Note that many people use initial-scale=1 on non-responsive websites, which causes the website to render at 100% width and the user needs to manually move the page or zoom. If user-scalable=no or maximum-scale=1 is used together with initial-scale=1, the user will not be able to zoom in/out the web page to see the entire content.

WebApp full screen mode: Disguise app, offline application.
<meta name="apple-mobile-web-app-capable" content="yes"> 
Copy after login
Hide status bar/set status bar color: Only takes effect when WebApp full screen mode is turned on. The value of content is default | black | black-translucent.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Copy after login
Title after adding to home screen
<meta name="apple-mobile-web-app-title" content="标题">
Copy after login
Ignore numbers and automatically recognize them as phone numbers
<meta content="telephone=no" name="format-detection"> 
Copy after login
Ignore identifying email
<meta content="email=no" name="format-detection">
Copy after login
Add Smart App Banner Smart App Banner: Tell the browser the app corresponding to this website, and display the download banner on the page (as shown below). Reference documentation
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 
Copy after login
Other Reference documents

<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

<meta name="msapplication-tap-highlight" content="no">
Copy after login
　Webpage related

Declare encoding
<meta charset="utf-8">
Copy after login
Prioritize using the latest version of IE and Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta http-equiv="X-UA-Compatible" content="IE=6">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=8">
Copy after login
Browser kernel control: Many domestic browsers have dual kernels (webkit and Trident). The webkit kernel allows high-speed browsing, and the IE kernel is compatible with web pages and old versions of websites. Websites that add meta tags can control which kernel rendering the browser chooses. Reference documentation
 <meta name="renderer" content="webkit|ie-comp|ie-stand">
Copy after login
The default kernel mode of domestic dual-core browsers is as follows:

　1. Sogou high-speed browser, QQ browser: IE kernel (compatibility mode)

　2. 360 Speed Browser, Aoyou Browser: Webkit kernel (speed mode)

Prohibit the browser from accessing page content from the local computer’s cache: With this setting, visitors will not be able to browse offline.
<meta http-equiv="Pragma" content="no-cache">
Copy after login
Windows 8
<meta name="msapplication-TileColor" content="#000"> 
<meta name="msapplication-TileImage" content="icon.png"> 
Copy after login
Site Adaptation: Mainly used for PC-mobile page correspondence.
<meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url">

Copy after login
Transcoding statement: Opening a webpage with Baidu may cause it to be transcoded (such as posting advertisements). To avoid transcoding, you can add the following meta
<meta http-equiv="Cache-Control" content="no-siteapp">
Copy after login
Please click here to read the original text

Property	Value	Description
http-equiv	content-type/expire/refresh/set-cookie	Associate the content attribute to the HTTP header.
name	author/description/keywords/generator/revised/others	Associate the content attribute to a name.
content	some text	Define the format used to translate content attribute values.