Common Meta Tags Compilation
Category Programming Techniques
< meta > Element
Overview
>
The meta tag provides metadata about an HTML document. Metadata is not displayed on the page but is readable by machines. It can be used for browsers (how to display content or reload pages), search engines (keywords), or other web services.
Required Attributes
Attribute | Value | Description |
---|---|---|
content | some text | Defines metadata related to the http-equiv or name attribute |
Optional Attributes
Attribute | Value | Description |
---|---|---|
http-equiv | content-type / expire / refresh / set-cookie | Associates the content attribute with an HTTP header. |
name | author / description / keywords / generator / revised / others | Associates the content attribute with a name. |
content | some text | Defines the format used to translate the value of the content attribute. |
SEO Optimization
Page Keywords, each web page should have a unique set of keywords that describe the content of that page.
<meta name="keywords" content="your tags" />
Page Description, each web page should have a description tag that does not exceed 150 characters and accurately reflects the content of the web page.
<meta name="description" content="150 words" />
Search Engine Indexing Method, robotterms is a set of values separated by commas (,), and usually has the following values: none, noindex, nofollow, all, index, and follow. Ensure the correct use of nofollow and noindex attribute values.
<meta name="robots" content="index,follow" /> <!-- all: The file will be searched, and the links on the page can be queried; none: The file will not be searched, and the links on the page cannot be queried; index: The file will be searched; follow: The links on the page can be queried; noindex: The file will not be searched; nofollow: The links on the page cannot be queried. -->
Page Redirection and Refresh: The number in the content represents the time (seconds), that is, how long after the refresh. If a URL is added, it will redirect to the specified web page (search engines can automatically detect, and it is also very easy to be regarded as misleading by the engine and be punished).
<meta http-equiv="refresh" content="0;url=" />
Others
<meta name="author" content="author name" /> <!-- Define the web page author --> <meta name="google" content="index,follow" /> <meta name="googlebot" content="index,follow" /> <meta name="verify" content="index,follow" />
Mobile Devices
Viewport: Can optimize the display of mobile browsers. If it is not a responsive website, do not use initial-scale or disable zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <!-- `width=device-width` will cause the iPhone 5 to have black edges when added to the home screen in WebApp full-screen mode -->
width: width (value / device-width) (range from 200 to 10,000, default is 980 pixels)
height: height (value / device-height) (range from 223 to 10,000)
initial-scale: initial scale (range from >0 to 10)
minimum-scale: the minimum scale allowed for users to zoom in
maximum-scale: the maximum scale allowed for users to zoom out
user-scalable: whether users can manually zoom (no, yes)
minimal-ui: can minimize the upper and lower status bars when the page is loaded. (Deprecated)
Note that many people use initial-scale=1 on non-responsive websites, which will render the website at 100% width, and users need to manually move the page or zoom in. If used with initial-scale=1, user-scalable=no or maximum-scale=1, users will not be able to zoom in/out to see all the content.
WebApp Full-Screen Mode: Pretend to be an app, offline app.
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Enable WebApp full-screen mode -->
Hide Status Bar/Status Bar Color Setting: Only effective when the 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" />
English: COMPLETE LIST OF HTML META TAGSW3C META TAGSMETA TAGS in HTML5MDN META TAGS
Source: http://segmentfault.com/a/1190000002407912
** Click to Share Notes
-
-
-