Original link: http://caibaojian.com/mobile-meta.html
<!DOCTYPE html> <!-- use HTML5 doctype, case insensitive -->
<html lang="zh-cmn-Hans"> <!-- More standard lang attribute writing http://zhi.hu/XyIa -->
<head>
<!-- Declare the character encoding used by the document -->
<meta charset='utf-8'>
<!-- Prioritize the latest version of IE and Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- page description-->
<meta name="description" content="max 150 characters"/>
<!-- Page Keywords-->
<meta name="keywords" content=""/>
<!-- Web page author-->
<meta name="author" content="name, [email protected]"/>
<!-- Search Engine Crawl -->
<meta name="robots" content="index,follow"/>
<!-- Add viewport for mobile devices -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` causes black bars when opening pages in WebApp fullscreen mode after iPhone 5 is added to the home screen http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS device begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- Title added to the home screen (new in iOS 6) -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- Whether to enable WebApp full screen mode, delete Apple's default toolbar and menu bar -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- Add Smart App Banner (iOS 6+ Safari) -->
<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 the number in the page to identify as a phone, ignore the email identification-->
<!-- Enable 360 browser speed mode (webkit) -->
<meta name="renderer" content="webkit">
<!-- Avoid IE using compatibility mode-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Do not let Baidu transcode-->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 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 browser -->
<meta name="MobileOptimized" content="320">
<!-- uc forced vertical screen -->
<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 no highlight-->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS icon begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone and iTouch, default 57x57 pixels, must have -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone and Retina iTouch, 114x114 pixels, optional, but recommended -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad, 144x144 pixels, optional, but recommended -->
<!-- iOS icon end -->
<!-- iOS splash screen begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad portrait 768 x 1004 (standard resolution) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad portrait 1536x2008 (Retina) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad landscape 1024x748 (standard resolution) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad landscape 2048x1496 (Retina) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch portrait 320x480 (standard resolution) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS splash screen end -->
<!-- iOS device end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 tile color-->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 tile icon -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- Add RSS feed-->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- Add favicon icon -->
<!-- sns social tag begin -->
<!-- Reference Weibo API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns social tag end -->
<title>title</title>
</head>
Some commonly used meta attributes are given above, and the following is an understanding of the use of meta.
meta is an auxiliary tag in the head area of html language. Maybe you think these codes are optional. In fact, if you can make good use of meta tags, it will bring you unexpected effects. The functions of meta tags are: search engine optimization ( seo ), defining the language used by the page, automatically refreshing and pointing to a new page, and realizing the dynamics of web page conversion Effects, control page buffering, web page rating and evaluation, control web page display window, etc.!
The composition of the meta tag: The meta tag has two attributes, which are the http-equiv attribute and the name attribute. Different attributes have different parameter values. These different parameter values realize different web page functions.
1. name attribute
The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used by search engine robots to find information and classify information.
The syntax format of the name attribute of the meta tag is:
<meta name="参数"content="具体的参数值">。 The name attribute mainly has the following parameters:
A. Keywords
Description: keywords are used to tell search engines what the keywords of your web page are.
Example:
<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转"> B. description (description of website content) ·
Description: description is used to tell search engines the main content of your website.
Example:
<meta name="description"content="haorooms博客,html的meta总结，meta是html语言head区的一个辅助性标签。"> C. robots (robot wizard)
Description: robots are used to tell search robots which pages need to be indexed and which pages do not need to be indexed.
The parameters of content are all, none, index, noindex, follow, nofollow. The default is all.
Example:
<meta name="robots"content="none"> The specific parameters are as follows:
The information parameter is all: the file will be retrieved, and the links on the page can be queried;
The information parameter is none: the file will not be retrieved, and the links on the page cannot be queried;
The information parameter is index: the file will be retrieved;
The information parameter is follow: the links on the page can be queried;
The information parameter is noindex: the file will not be retrieved, but the links on the page can be queried;
The information parameter is nofollow: the file will be retrieved, but the links on the page cannot be queried;
D. author
Description: Labels the author of the page
Example:
<meta name="author"content="root,[email protected]"> E、generator
<meta name="generator"content="信息参数"/> The information parameter of the generator of the meta tag represents what software is used to make the website.
F、COPYRIGHT
//code from http://caibaojian.com/mobile-meta.html
<META NAME="COPYRIGHT"CONTENT="信息参数">
The COPYRIGHT information parameter of the meta tag represents the copyright information of the website.
G、revisit-after
<META name="revisit-after"CONTENT="7days"> revisit-after stands for site revisit, 7days stands for 7 days, and so on.
2. http-equiv attribute
As the name suggests, http-equiv is equivalent to the file header function of http. It can send back some useful information to the browser to help display the content of the web page correctly and accurately. The corresponding attribute value is content, and the content in content is actually Variable values for each parameter.
The syntax format of the http-equiv attribute of the meta tag is:
<meta http-equiv="参数"content="参数变量值">； The http-equiv attribute mainly has the following parameters:
A. Expires (term)
Description: Can be used to set the expiration time of the web page. Once a web page expires, it must be retransmitted to the server.
usage:
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> Note: The time format of GMT must be used.
B. Pragma (cache mode)
Description: Prevents browsers from accessing page content from the local computer's cache.
usage:
<meta http-equiv="Pragma"content="no-cache"> Note: With this setting, visitors will not be able to browse offline.
C. Refresh (refresh)
Description: Automatically refresh and point to a new page.
usage:
<meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) Note: The 2 refers to automatically refresh to the URL after staying for 2 seconds.
D. Set-Cookie (cookie setting)
Note: If the webpage expires, the saved cookie will be deleted.
usage:
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> Note: The time format of GMT must be used.
E. Window-target (setting of the display window)
Description: Force the page to be displayed as a separate page in the current window.
usage:
<meta http-equiv="Window-target"content="_top"> Note: Used to prevent others from calling their own pages in the frame.
F, content-Type (display character set settings)
Description: Sets the character set used by the page.
usage:
<meta http-equiv="content-Type"content="text/html;charset=gb2312"> details as follows:
When the information parameter of the charset of the meta tag is GB2312, it means that the code used by the website is Simplified Chinese;
When the information parameter of the charset of the meta tag is BIG5, it means that the code used by the website is traditional Chinese;
When the information parameter of the charset of the meta tag is iso-2022-jp, it means that the code used by the website is Japanese;
When the information parameter of the charset of the meta tag is such as ks_c_5601, it means that the code used by the website is Korean;
When the information parameter of the charset of the meta tag is ISO-8859-1, it means that the code used by the website is English;
When the information parameter of the charset of the meta tag is UTF-8, it represents the universal language encoding in the world;
G. content-Language (display language setting)
usage:
<meta http-equiv="Content-Language"content="zh-cn"/> H. Cache-Control specifies the caching mechanism followed by requests and responses.
Cache-Control specifies the caching mechanism that requests and responses follow. Setting Cache-Control in a request message or a response message does not modify the caching process in another message process. Cache directives at request include no-cache, no-store, max-age, max-stale, min-fresh, on
ly-if-cached, the directives in the response message include public, private, no-cache, no-store, no-transform, must-revalidate, proxy-revalidate, and max-age. The meaning of the instructions in each message is as follows
Public indicates that the response can be cached by any buffer
Private indicates that the whole or part of the response message for a single user cannot be processed by the shared cache. This allows the server to describe only part of the user's response message, which is not valid for other users' requests
no-cache indicates that the request or response message cannot be cached
no-store is used to prevent important information from being released unintentionally. Sending in the request message will make the request and response messages not use the cache.
max-age indicates that the client can receive responses whose lifetime is not greater than the specified time (in seconds)
min-fresh indicates that the client can receive responses with a response time less than the current time plus the specified time
max-stale indicates that the client can receive response messages beyond the timeout period. If you specify a value for max-stale messages, the client can receive response messages that exceed the value specified in the timeout period.
J、http-equiv="imagetoolbar"
<meta http-equiv="imagetoolbar"content="false"/> Specifies whether to display the picture toolbar. When false, it means not displayed, and when it is true, it means display.
K、Content-Script-Type
<Meta http-equiv="Content-Script-Type"Content="text/javascript"> W3C Web Specification, specifying the type of script in the page.
HTML <base> tag
Specify the default opening method for all links on the page:
E.g:
<base target="_self">All tabs in the specified page are opened on this page!
Reference: http://www.haorooms.com/post/html_meta_ds
Source: Front-End Development Blog