Meta Tags common attribute collation

Source: Internet
Author: User

In the Segmentfault see this article, think the collation is very detailed, so reproduced come and share with you.
Original address: http://segmentfault.com/blog/ciaocc/1190000002407912
Ciaocc
Copyright CIAOCC All, reproduced please specify the copyright.

Profile

The tag provides metadata about the HTML document. The metadata is not displayed on the page, but is readable for the machine. It can be used in browsers (how to display content or reload pages), search engines (keywords), or other Web services. --w3school

Required Attributes

Properties value Description
Content Some text Define meta information related to the HTTP-EQUIV or Name property

Optional properties

Properties value Description
Http-equiv Content-type/expire/refresh/set-cookie Associate the Content property to the HTTP header.
Name Author/description/keywords/generator/revised/others Associate the Content property to a name.
Content Some text Defines the format used to translate content property values.
SEO optimization

Reference documents

    • Page keywords, each page should have a unique set of keywords that describe the content of the page.
      Use descriptive and Representative keywords and phrases that people may search for and accurately describe the information provided on the page. Tag content is too short, the search engine may not think of the content as relevant. Additional tokens should not exceed 874 characters.

<Metaname="keywords"content="Your tags"/>    
    • Page description, each page should have a no more than 150 characters and can accurately reflect the content of the page description tag.

<Metaname="description"content= "words"/>    
    • Search engine indexing method, Robotterms is a set of values separated by commas (,), usually have the following values: None,noindex,nofollow,all,index and follow. Make sure that the nofollow and Noindex property values are used correctly.

<Metaname= "robots"content="Index,follow"/>
<!--All: The file will be retrieved and the link on the page can be queried; none: The file will not be retrieved and the link on the page cannot be queried; index: The file will be retrieved; follow: the link on the page can be queried; NOINDEX: The file will not Nofollow: Links on the page cannot be queried. -

    • Page redirection and Refresh: The number within the content represents the time (in seconds) that is refreshed after a few minutes. If the URL is added, it is redirected to the specified Web page (search engines can be automatically detected and easily punished by the engine as misleading).

<Metahttp-equiv="Refresh"content= "0;url="/>    
    • Other

<Meta name= "author" content= "author name" &NBSP;/>
<!--define page author-->
<metaname=" google " content= "Index,follow"  /> <metaname= "Googlebot" content= "Index,follow"  /><< Span class= "Hljs-title" >metaname= "verify" content=

Mobile devices
    • Viewport: Can optimize the display of mobile browser. If it is not a responsive web site, do not use Initial-scale or disable scaling.
      Most of the 4.7-5-inch devices have a viewport width of 360px;5.5 inch set to 400px;iphone6 set to 375px;ipone6 plus set to 414px.

<Metaname="viewport"content= "width=device-width, initial-scale=1.0,maximum-scale=1.0, User-scalable=no "/>
<!--' Width=device-width ' will cause IPhone 5 to appear black when the page is opened in WEBAPP full screen mode after adding to the main screen

    1. Width: widths (values/device-width) (range from 200 to 10,000, default to 980 pixels)

    2. Height: Altitude (Value/device-height) (range from 223 to 10,000)

    3. Initial-scale: Initial zoom ratio (range from >0 to 10)

    4. Minimum-scale: The minimum scale to allow the user to zoom

    5. Maximum-scale: Allows the user to zoom to the maximum scale

    6. User-scalable: Whether the user can manually indent (no,yes)

    7. Minimal-ui: You can minimize the upper and lower status bar when the page loads. (deprecated)

Note that many people use initial-scale=1 to non-responsive websites, which makes the site render at 100% width, and the user needs to manually move the page or zoom. If you use User-scalable=no or maximum-scale=1 with initial-scale=1 at the same time, users will not be able to zoom in/out of the page to see all the content.

    • WebApp Full screen mode: Fake app, offline app.

<Metaname="apple-mobile-web-app-capable"content="yes"/>
<!--enable WEBAPP full Screen mode--

    • Hide status bar/Set status bar color: Only takes effect when webapp full screen mode is turned on. The content value is default | Black | Black-translucent.

<Metaname= "apple-mobile-web-app-status-bar-style"content="black-translucent"/> 
    • Title after adding to the main screen

<Metaname="Apple-mobile-web-app-title"content="title" >    

    • Ignore numbers automatically recognized as phone numbers

<Metacontent= "telephone=no"name="format-detection"/>    
    • Ignore recognition mailboxes

<Metacontent= "email=no"name="format-detection"/>    
    • Add Smart App Banner Smart app Banner: Tell the browser the app that corresponds to this website and display the download Banner (for example) on the page. Reference documents

<Metaname="Apple-itunes-app"content= "App-id=myappstoreid, Affiliate-data=myaffiliatedata , App-argument=myurl ">    

    • Other reference documents

<!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and
<MetaName="Handheldfriendly"Content="True" >
<!--Microsoft's Vintage browser--
<MetaName="Mobileoptimized"Content=">"
<!--UC Force vertical screen--
<MetaName="Screen-orientation"Content="Portrait" >
<!--QQ Forced vertical screen--
<MetaName="X5-orientation"Content="Portrait" >
<!--UC Mandatory fullscreen--
<MetaName="Full-screen"Content="Yes" >
<!--QQ Mandatory fullscreen--
<MetaName="X5-fullscreen"Content= <!--UC Application Mode-->
<metaname= "Browsermode" content= " Application,
<!--QQ Application Mode-->
<metaname=" X5-page-mode " content= "app",
<!-- Windows Phone click No highlight-->
<meta name= "Msapplication-tap-highlight" content= "no";

Web related
    • Declaration Code

<metacharset=' utf-8 '/>  
    • Use the latest version of IE and Chrome first

<Metahttp-equiv="X-ua-compatible"Content="Ie=edge,chrome=1"/>
<!--about X-ua-compatible--
<metahttp-equiv= "x-ua-compatible" content= "IE=6"  >
<!--use IE6-->
< metahttp-equiv= X-UA-Compatible "content=" ie=7 "&NBSP;>
<meta "x-ua-compatible" content= "ie=8" &NBSP;>
<!--use IE8-->

    • Browser kernel control: Many domestic browsers are dual-core (WebKit and Trident), WebKit kernel high-speed browsing, IE core-compatible Web pages and the old version of the site. Web sites that add Meta tags can control what kernel rendering the browser chooses. Reference documents

<Metaname= "renderer"content="Webkit|ie-comp|ie-stand" >    

The default kernel mode for dual-core browsers is as follows:
1. Sogou high-speed browser, QQ browser: IE core (compatibility mode)
2.360 Speed Browser, roaming browser: WebKit kernel (fast mode)

    • Prevents browsers from accessing page content from the local computer's cache: This setting allows visitors to browse offline.

<Metahttp-equiv= "Pragma"content="No-cache" >    
    • Windows 8

<Metaname= "msapplication-tilecolor"content= "#000"/>
<!--Windows 8 tile Color--
<Metaname= "msapplication-tileimage"content="Icon.png"/>
<!--a Windows 8 tile icon--

    • Site adaptation: Mainly used for pc-mobile phone page of the corresponding relationship.

<Metaname= "mobile-agent"content= "FORMAT=[WML|XHTML|HTML5"; url=url ">
<!--[WML|XHTML|HTML5] Select one of these according to the Protocol language of the mobile page; the url= "url" represents the URL of the mobile page for the current PC page, which must be a one by one correspondence. -

    • Transcoding declaration: Using Baidu to open the Web page may be transcoded (such as stickers), to avoid transcoding can add the following meta

<Metahttp-equiv= "cache-control"content="No-siteapp"/>    
Other reference documents

Complete LIST of HTML META TAGS
About the META TAGS
Metatages in HTML5
MDN META TAGS

Meta tag Common Properties collation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.