Some WebKit-specific HTML5 header tags are added to the mobile front-end development to help the browser better parse the HTML code and better display the mobile web front-end page. This article sorts out some commonly used meta tags.
 |
| SEO HTML meta tag summary2021 |
content ="Title" >---------------9
<!-- The title added to the main screen (iOS 6 New) -->
< meta name ="apple-mobile-web-app-capable" content ="yes" />----------------10
<!--Is it 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 Smart App Banner (iOS 6+ Safari) -->
<meta name="apple-mobile-web-app-status-bar-style" content ="black" />----------11
<!-- Set the color of the Apple toolbar -->
< meta name ="format-detection" content ="telphone=no, email=no" /> ------------15
<!-- Ignore the page The number in is recognized as a phone, and email recognition is ignored -->
<!-- Enable 360 browser's fast mode (webkit) -->
< meta name ="renderer" content ="webkit" > ------- --------------------5
<!-- Avoid IE to use compatibility mode -->
< meta http-equiv ="X-UA-Compatible" content ="IE=edge">
<!-- Do not let Baidu transcoding -->About prohibiting Baidu transcoding: https://blog.csdn.net/bboyjoe/article/details/50265529
<meta http-equiv="Cache-Control" content="no-transform" />--------------------16
< meta http-equiv ="Cache-Control" content ="no-siteapp" /> --------------------------17
<link rel = "Alternate" type = "file application / vnd.wap.x HTML + XML" Media = "Handheld" the href = "target" /> directly given web page address corresponding to the mobile terminal so that Baidu to grab
<! - for Handheld device optimization, mainly for some old browsers that do not recognize viewport, such as BlackBerry -->
< meta name ="HandheldFriendly" content ="true" > --------------- ----------12
<!-- Microsoft's old browser -->
< meta name ="MobileOptimized" content ="320"> ------------------------13
<!-- uc forced vertical screen -->
< Meta name = "Screen-Orientation" Content = "Portrait" >
<-! QQ forced portrait ->
< Meta name = "X5-Orientation" Content = "Portrait" >
<-! UC force full-screen - >
< Meta name = "fullscreen" Content = "yes" >
<-! QQ force full-screen ->
< Meta name = "X5-fullscreen" Content = "to true" >
<-! UC application mode - >
<meta name ="browsermode" content="application" >
<!-- QQ application mode -->
< meta name ="x5-page-mode" content ="app" >
<!-- windows phone click without highlight -->
< meta name ="msapplication -tap-highlight" content ="no" >
<!-- iOS icon begin -->
On iPhone/iPad and other Apple mobile devices, you can "add the website to the home screen", and the icon can be added in HTML Define the setting picture.
The difference between apple-touch-icon and apple-touch-icon-precomposed: the former adds an icon with a transparent highlight layer, and the latter designs the original icon.
< link rel ="apple-touch-icon-precomposed" href ="/>----------------------18
<!-- iPhone and iTouch, the default 57x57 pixels, must have -->
< link rel ="apple-touch -icon-precomposed" sizes ="72x72" href ="/apple-touch-icon-72x72-precomposed.png" />--------------------19
< !-- Retina iPhone and Retina iTouch, 72x72 pixels, you can have none, but recommended -->
< link rel ="apple-touch-icon-precomposed" sizes ="144x144" href ="/apple-touch-icon-144x144 -precomposed.png" />-----------------20
<!-- Retina iPad, 144x144 pixels, you can have none, but recommended -->
<!- iOS icon end -->
<!--iOS splash screen begin -->
< link rel ="apple-touch-startup-image" sizes ="768x1004" href ="/splash-screen-768x1004.png" />
<!-- iPad vertical screen 768 x 1004 ( Standard resolution) -->
< link rel ="apple-touch-startup-image" sizes ="1536x2008" href ="/splash-screen-1536x2008.png" />
<!-- iPad vertical screen 1536x2008 (Retina) -->
< link rel ="apple-touch-startup-image" sizes ="1024x748" href ="/Default-Portrait-1024x748.png" />
<!--iPad horizontal screen 1024x748 (standard resolution) -->
< link rel ="apple-touch-startup-image" sizes ="2048x1496" href ="/splash-screen-2048x1496.png" />
<!-- iPad horizontal Screen 2048x1496 (Retina) -->
< link rel ="apple-touch-startup-image" href ="/splash-screen-320x480.png" />
<!-- iPhone/iPod Touch vertical screen 320x480 (standard resolution) -->
< link rel = "apple-touch-startup-image" sizes ="640x960" href ="/splash-screen-640x960.png" />
<!-- iPhone/iPod Touch vertical screen 640x960 (Retina) -->
< link rel =" apple-touch-startup-image" sizes ="640x1136" href ="/splash-screen-640x1136.png" />
<!- iPhone 5/iPod Touch 5 portrait 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 subscription -->
< link rel ="shortcut icon" type ="image/ico" href ="/favicon.ico" /> -----------------6
<!-- Add favicon icon -->
<!-- sns social tag begin -->
<!-- Refer to Weibo API --> --------------- 3
< meta property ="og:type" content ="type" />
< meta property ="og:url" content ="URL address" />
< meta property ="og:title"content ="title" />
<meta property ="og:image" content ="picture" />
< meta property ="og:description" content ="description" />
<!-- sns social tag end -->
< title > title </ title >
</ head >
Some commonly used meta attributes are given above, and an understanding of meta usage is given below.
meta is an auxiliary tag in the head area of the 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 ), define the language of the page, automatically refresh and point to the new page, and realize the dynamics when the page is converted Effects, control page buffering, web page rating and evaluation, control the window displayed on the web page and the refresh rate! ·
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 for search engine robots to find information and classify information.
The syntax format of the name attribute of the meta tag is:
<meta name="Parameter "content=" specific parameter value">。
The name attribute mainly has the following parameters:
A. Keywords:
Description: keywords are used to tell search engines what the keywords of your webpage are.
For example:
<meta name="keywords"content="meta summary, html meta, meta attributes, meta jump" >
B. Description (website content description):
Description: description is used to tell search engines the main content of your website.
For example:
<meta name="description"content="Haorooms blog, html meta summary, meta is an auxiliary tag in the head area of html language. ">
C. Robots (robot guide)
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. ·
For example:
<meta name="robots"content="none">
2. The specific parameters are as follows:
The information parameter is all: the file will be retrieved, and the link on the page can be queried.
The information parameter is none: the file will not be retrieved, and the link on the page cannot be queried.
The information parameter is index: the file will be retrieved.
The information parameter is follow: the link on the page can be queried.
The information parameter is noindex: the file will not be retrieved, but the link on the page can be queried.
The information parameter is nofollow: the file will be retrieved, but the link on the page cannot be queried.
3. Author (author):
Description: Annotate the author of the page
For example:
<meta name="author"content="root,root@xxxx.com">
4. Generator:
<meta name="generator"content="Information parameter"/>
The information parameter of the generator of the meta tag represents the software used to make the website.
5. COPYRIGHT:
<META NAME="COPYRIGHT"CONTENT="information parameter">
The COPYRIGHT information parameter of the meta tag represents the copyright information of the website.
6. Revisit-after:
<META name="revisit-after"CONTENT="7days">
revisit-after represents website revisit, 7days represents 7 days, and so on.
2. http-equiv attributes
As the name implies, http-equiv is equivalent to the file header function of http. It can return some useful information to the browser to help display the content of the webpage correctly and accurately. The corresponding attribute value is content, and the content in content is actually The variable value of each parameter.
The syntax format of the http-equiv attribute of the meta tag is:
<meta http-equiv="Parameter"content="parameter variable value">；
The http-equiv attribute mainly has the following parameters:
A. Expires (term):
Description: It can be used to set the expiration time of the webpage. Once the webpage expires, it must be retransmitted to the server.
usage:
//code from http://caibaojian.com/mobile-meta.html
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
Note: The time format of GMT must be used.
B. Pragma (cache mode):
Note: The browser is prohibited from accessing the content of the page from the cache of the local computer.
usage:
CHECH MORE ABOUT SEO HERE
<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 the new page.
usage:
<meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"> (Note the quotation marks at the back, which are before the seconds and after the URL respectively)
Note: The 2 means 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.
7. Window-target (setting of 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 your own page in the frame.
8. Content-Type (setting of display character set):
Description: Set the character set used on 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 such as ISO-8859-1, it means that the encoding used by the website is English.
When the information parameter of the charset of the meta tag is like GB2312, it means that the encoding used by the website is simplified Chinese.
When the information parameter of the charset of the meta tag is like BIG5, it means that the encoding 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 encoding used by the website is Japanese.
When the information parameter of the charset of the meta tag is ks_c_5601, it means that the encoding used by the website is Korean.
When the information parameter of the charset of the meta tag is UTF-8, it represents the universal language code.
9. Content-Language (setting of display language):
usage:
<meta http-equiv="Content-Language"content="en"/>
10. Cache-Control specifies the caching mechanism followed by requests and responses:
Cache-Control specifies the caching mechanism followed by requests and responses. Setting Cache-Control in the request message or response message does not modify the cache processing process in another message processing process. The cache instructions at request include no-cache, no-store, max-age, max-stale, min-fresh, on
ly-if-cached, the instructions in the response message include public, private, no-cache, no-store, no-transform, must-revalidate, proxy-revalidate, max-age. The meaning of the instructions in each message is as follows
Public indicates that the response can be cached by any cache
Private indicates that the entire 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 invalid for other users' requests
no-cache indicates that the requestor response message cannot be cached
no-store is used to prevent important information from being unintentionally released. Sending in the request message will cause neither the request nor the response message to use the cache.
max-age Indicates that the client can receive a response whose lifetime is not greater than the specified time (in seconds)
min-fresh indicates that the client can receive a response whose response time is 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 the value of the max-stale message, the client can receive response messages that exceed the specified value within the timeout period.
A. http-equiv="imagetoolbar":
<meta http-equiv="imagetoolbar"content="false"/>
Specify whether to display the picture toolbar, when false, it means not displaying, when it is true, it means displaying.
B. Content-Script-Type:
<Meta http-equiv="Content-Script-Type"Content="text/javascript">
The W3C web page specification specifies the type of script in the page.
C. HTML <base> tag:
Specify the default opening method for all links on the page:
E.g:
<base target="_self">
All tags in the specified page are page open!
