Commonly used HTML meta tag attributes (required for website compatibility and optimization)_HTML/Xhtml_Web page production

Original address: http://segmentfault.com/blog/ciaocc/1190000002407912
Author: ciaocc
The copyright belongs to ciaocc. Please indicate the copyright when reprinting.

Summary 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. —— W3School

Required attributes

属性	值	描述
content	some text	定义与http-equiv或name属性相关的元信息

Optional attributes

属性	值	描述
http-equiv	content-type / expire / refresh / set-cookie	把content属性关联到HTTP头部。
name	author / description / keywords / generator / revised / others	把 content 属性关联到一个名称。
content	some text	定义用于翻译 content 属性值的格式。

SEO optimization

Reference document

Page keywords, each web page should have a unique set of keywords that describe the content of the 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.

Copy code

The code is as follows:

Page description , each web page should have a description tag of no more than 150 characters that accurately reflects the content of the web page.

Copy code

The code is as follows:

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.

Copy code

The code is as follows:

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 punished).

Copy code

The code is as follows:

Others

Copy code

The code is as follows:

mobile device

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; the 5.5-inch device is set to 400px; the iphone6 ​​is set to 375px; the iphone6 ​​plus is set to 414px.

Copy code

The code is as follows:

1.width: width (number/device-width) (range from 200 to 10,000, default is 980 pixels)
2.height: height (number/device-height) (range from 223 to 10,000)
3.initial-scale: The initial scaling ratio (ranging from >0 to 10)
4.minimum-scale: The minimum scale the user is allowed to zoom to
5.maximum-scale: The user is allowed to zoom to The maximum ratio of (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.

Copy codeThe code is as follows:

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.

Copy code

The code is as follows:

Title added to home screen

Copy code

The code is as follows:

Ignore digits that are automatically recognized as phone numbers

Copy the code

The code is as follows:

Ignore recognition email

Copy code

The code is as follows:

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 document

Copy code

The code is as follows:

Others Reference Documents

XML/HTML CodeCopy content to clipboard

2. <meta name="HandheldFriendly" content="true">
4. <meta name="MobileOptimized" content="320">
6. <meta name="screen- orientation" content="portrait">
8. <meta name="x5- orientation" content="portrait">
10. <meta name="full- screen" content="yes">
12. <meta name="x5- fullscreen" content="true">
14. <meta name="browsermode" content="application">
16. <meta name="x5- page-mode" content="app">
18. <meta name="msapplication- tap-highlight" content="no">

Web related

Declaration encoding

Copy code

The code is as follows:

Prioritize using the latest version of IE and Chrome

Copy code

The code is as follows:

Browser kernel control: Many domestic browsers have dual cores (webkit and Trident). The webkit core allows high-speed browsing, and the IE core is compatible with web pages and old versions of websites. Websites that add meta tags can control which kernel rendering the browser chooses. Reference document

Copy code

The code is as follows:

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 cache of the local computer: With this setting, visitors will not be able to browse offline.

Copy code

The code is as follows:

Windows 8

Copy code

The code is as follows:

Site adaptation: Mainly used for PC-mobile page correspondence.

Copy code

The code is as follows:

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

Copy code

The code is as follows:

Other reference documents

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn