Meta is an auxiliary label in the HEAD area of HTML language. Maybe you think these codes are optional. In fact, if you can make good META tags, it will bring you unexpected effects. The role of META labels is: search engine optimization (SEO), define the page of the page, automatically refresh and point to the new page to achieve the dynamic dynamic when webpage conversion. Effect, control page buffer, web page level evaluation, window display window displayed!
HTML's Meta summaryMeta label composition: Meta tags have two attributes. They are HTTP-EQUIV attributes and name attributes. Different attributes have different parameter values. These different parameter values realize different web functions.
<! Doctype html> <!-Use html5 doctype, do not distinguish between ups and downs-> <html lang = zh-cmn-hans> <! -> <head> <!-The characters encoded by the statement of the document-> <meta charset = 'utf-8'> <!-Prefer to use the latest version of IE and Chrome-> <meta http-equiv = x- Ua-commission content = ie = edge, chrome = 1/> <!-page description-> <meta name = description content = No more than 150 characters/<!-page keywords-> <meta name = Keywords Content =/> <!-Web author-> <meta name = Author Content = name, [email protected]/> <!-Search engine capture-> <meta name content = index , follow/> <!-Add ViewPort-> <meta name = viewport content = initial-scale = 1, maximum-scale = 3, minimum-scale = 1, user-scalable = no> <!---- !------- -`width = device-width` will cause iPhone 5 to add to the main screen and open the page with the webAPP full-screen mode. iOS device Begin-> <meta name = Apple-Mobile-weight-access-comple content = title> <!-The title added to the main screen (newly added iOS 6)-> <meta name = Apple-Mobile- Web-App-Capable Content = yes/> <!-Whether to enable the webAPP full-screen mode, delete Apple's default toolbar and menu bar-> <meta name = Apple-ITUNES-APP Content = myappstoreid, AFFIL Iate -Data = MyaffiliateEdata, App-RAGUMENT = Myurl> <!-Add Smart App Banner (iOS 6+ SAFARI)-> <meta name = Apple-Mobile-APP-Status-Style Conten T = BLACK/> <!-Set the color of the apple toolbar-> <meta name = format-detection content = telphone = no, email = no/> <!-ignore the digital recognition in the page as a phone call, ignore email identification -> <!-Enable the 360 browser's speed mode (webkit)-> <meta name = renderer content = webkit> <!-Avoid IE use compatibility mode-> <meta http-equiv = x-uaa -Compatible Content = IE = Edge> <!-Do not allow Baidu transcoding-> <meta http-equiv = cache-control content = no-sizeApp /> <! The browser that does not recognize ViewPort, such as BlackBerry-> <meta name = handheldfriendly content = true> <!-Microsoft's old-fashioned browser-> <meta name = mobileOptimized Content = 320> <!-UC forced forcibly Vertical Screen-> <meta name = screen-Orientation Content = Portrait> <!-QQ forced vertical screen-> <meta name = x5-Orientation Content = Portrait> <!-UC compulsory full screen-> <meta name =full-screen content=yes> <!-- QQ强制全屏--> <meta name=x5-fullscreen content=true> <!-- UC应用模式--> <meta name=browsermode content=application> <! -QQ Application Mode-> <meta name = x5-Page-Mode Content = App> <!-Windows Phone Click without highlights-> <meta name = msApplication-Tap-Highlight = no> <! ---- iOS icon begin-> <link rel = Apple-Touch-ICON-PROCOMPOSED HREF =/Apple-Touch-ICon-57x57-PROMPOSED.PNG/> <!-iPhone and iTouch, the default 57x57 pixel must be-> <link REL = Apple-Touch-ICON-PROCOMPOSED SIZES = 114x114 HREF =/Apple-Touch-ICon-114x114 -PONG /png/> <!-RETINA iTouch, 114x114 pixels No, but it is recommended- -> <link rel=apple-touch-icon-precomposed sizes=144x144 href=/apple-touch-icon-144x144-precomposed.png/> <!-- Retina iPad，144x144 像素，可以没有，但推荐有-- > <!-iOS icon End-> <!-iOS startup screen begin-> <link rel = apple-touch -startup-image size = 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 1536x20088 (Retina)-> <link Roth = Apple-Touch-Startup-Image Sizes = 1024x748 HREF =/DEFAULT-PORTRAIT-1024x748.png/> <!-iPad horizontal screen 1024x748-> <link Roth = Apple-Touch-Startup-Image Sizes = 2048x1496 HREF =/Splash-SCREEN-2048x1496.png/> <!-iPad Viagra 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 -Screen -640x960.png/> <!-iPhone/iPod touch vertical screen 640x960 (RETINA)-> <link R = Apple-Touch-Startup-Image Sizes = 640x1136 HREF =/Splash-SCREEN-640X113 6.png/> < !-iPhone 5/iPod Touch 5 vertical screen 640x1136 (RETINA)-> <!-iOS startup screen End-> <!-iOS device End-> <meta name = msApplication-TileColor Content =#000000 /<!-Windows 8 magnetic stickers-> <meta name = msApplication-tileImage Content = icon.png/> <!-Windows 8 magnetic sticker icon-> <link rel = application/rss +XML <!-Add RSS subscription-> <link rel = shortcut icon type = image/ico href =/favicon.ico/> <!-Add Favicon icon-> <!-SNS social label begin- -> <!-Refer to Weibo API-> <meta Property = OG: Type Content = Type/> <Meta Property = OG: Url Content = URL Address/> <Meta Property = OG: Title Content = Title/> <meta Property = OG: Image Content = Image/<meta Property = OG: Descripting Content = Description/<!-SNS Social Tag End-> <Title> Title </Title> </Head>
Some of the commonly used meta attributes are given above, and a understanding of Meta is given below.
Meta is an auxiliary label in the HEAD area of HTML language. Maybe you think these codes are optional. In fact, if you can make good META tags, it will bring you unexpected effects. The role of META labels is: search engine optimization (SEO), define the page of the page, automatically refresh and point to the new page to achieve the dynamic dynamic when webpage conversion. Effect, control page buffer, web page level evaluation, window display window displayed!
Meta label composition: Meta tags have two attributes. They are HTTP-EQUIV attributes and name attributes. Different attributes have different parameter values. These different parameter values realize different web functions.
1. name attributeThe name attribute is mainly used to describe web pages. The corresponding attribute value is Content. The content in Content is mainly convenient for search engine robots to find information and classification information.
The name attribute grammar format of the meta label is:
<meta name = parameter content = specific parameter value>.
The name attributes mainly have the following parameters:
A, keywords (keyword)Note: Keywords is used to tell the search engine's keywords for your webpage.
Example:
<meta name = keywordscontent = meta summary, html meta, meta attribute, meta jump>
B. Description (website content description)
Note: Description is used to tell the main content of your website for search engines.
Example:
<meta name = descriptioncontent = haorooms blog, Meta summary of HTML, Meta is a auxiliary label in the HTML language head area. "C. Robots (Robot Wizard)
Note: Robots use to tell the search robot page to index and which pages do not require indexes.
Content parameters are all, none, index, noINDEX, FOLLOW, NOFOLLOW. The default is ALL.
Example:
<meta name = robotscontent = 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 querying;
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 querying;
The information parameter is Nondex: The file will not be retrieved, but the links on the page can be querying;
The information parameter is nofollow: The file will be retrieved, but the links on the page cannot be querying;
D, author (author)Note: The author on the webpage
Example:
<meta name = authorcontent = root, [email protected]>E, Generator
<meta name = generatorContent = information parameter/>
The information parameter of the Meta label, represents what software production is used on the website.
F, Copyright<Meta name = CopyrightContent = Information parameters>
The Copyright information parameters of Meta tags represent the copyright information of the website.
G, Revisit-AFTER<Meta name = Revisit-afterContent = 7DAys>
RevISIT-AFTER represented the website for a re-visit. 7Days represents 7 days, which is pushed according to this.
2. HTTP-EQUIV attributeHTTP-EQUIV, as its name implies, is equivalent to the file header of HTTP. It can send some useful information to the browser to help correctly and accurately display the content Values of each parameter.
The HTTP-Equiv attribute format of Meta tag is:
<meta http-equiv = parameter content = parameter variable value>;
The HTTP-EQUIV attributes mainly have the following parameters:
A, Expires (deadline)Note: It can be used to set the expiration time of the webpage. Once the webpage expires, it must be re -transmitted on the server.
usage:
<meta http-equiv = expiresContent = FRI, 12jan200118: 18: 18GMT>
Note: The time format of GMT must be used.
B. Pragma (Cache mode)Note: It is forbidden to visit the page content from the cache of the local computer.
usage:
<meta HTTP-EQUIV = Pragmacontent = No-Cache>
Note: In this way, the visitors will not be able to browse.
C. Refresh (refresh)Note: Automatically refresh and point to the new page.
usage:
<meta http-equiv = refreshContent = 2; url = http://www.vevb.com> // (Note the quotation marks, behind the seconds of seconds and the back of the website)
Note: The 2 of them refers to the automatic refresh to the URL website after staying for 2 seconds.
D. Set-Cookie (Cookie settings)Explanation: If the webpage expires, the cookie of the store will be deleted.
usage:
<meta http-equiv = set-cookiecontent = cookie value = xxx; expires = friday, 12-jan-200118: 18: 18GMT; PATH =/>
Note: The time format of GMT must be used.
E, Window-TargetNote: The forced page is displayed in an independent page in the current window.
usage:
<meta http-equiv = Window-TargetContent = _top>
Note: It is used to prevent others from calling their pages in the framework.
F, Content-Type (setting of display character sets)Note: Set the character set used by the page.
usage:
<meta http-Equiv = Content-Typecontent = Text/HTML; Charset = GB2312>
The specifics are as follows:
When the information parameters of the Charset of Meta label, such as GB2312, it means that the code used by the website is simplified Chinese;
When the information parameters of the Meta label, such as BIG5, it means that the code used by the website is traditional Chinese;
When the information parameters of the Charset of Meta label, such as ISO-2022-JP, it means that the website is used in Japanese; the code is Japanese;
When the information parameters of the Meta tag are such as KS_C_5601, it means that the website is used in Korean;
When the information parameters of the Charset of Meta tags are ISO-8859-1, it means that the coding of the website is English;
When the information parameters of the Meta tags are UTF-8, it represents the language encoding of the world;
G, Content-Language (setting language settings)usage:
<meta http-equiv = content-languageContent = zh-cn/>H, Cache-Control specifies the cache mechanism of requests and response to follow.
Cache-Control specifies the cache mechanism of requests and response to follow. Set the cache-Control in the request message or response message does not modify the cache process during another message processing process. The cache instructions during the request include NO-Cache, No-Store, Max-Age, Max-Stale, min-fresh, on
Ly-iF-Cached, instructions in response 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 indication response can be cached by any cache area
Private indicates that the entire or partial response message of a single user cannot be shared by the cache. This allows the server to only describe the response message when the user’s part of the response, this response message is invalid for other users' requests
No-Cache indicates that requests or response messages cannot be cached
No-Store is used to prevent important information from being published unintentionally. Sending in the request message will make the request and response message do not use the cache.
MAX-AGE indicates that the client can receive a response that the survival period is not greater than the specified time (in seconds)
Min-Fresh indicates that the client can receive the response time less than the current time plus the specified time response
MAX-Stale indicates that the client can receive the response message beyond the timeout period. If the value of the Max-Stale message is specified, the client can receive the response message within the specified value of the timeout.
J, http-equiv = ImageToolbar<meta http-equiv = ImageToolBarcontent = false/>
Specify whether the picture toolbar is displayed, it is not displayed as a false representative, it is displayed as the TRUE representative.
K, Content-SCRIPT-TYPE<Meta HTTP-EQUIV = Content-Script-Typecontent = Text/JavaScript>
W3C web specifications indicate the type of script in the page.
Html <base> labelSpecify the default opening method for all the links on the page:
For example:
<base target = _SELF>
All labels on the specified page are opened this page!