Common meta-finishing [reprint]

< meta > elements

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

Optional properties

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.

<meta name="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.

<meta name="description" content="150 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 . Ensure proper use nofollow and noindex attribute values.

<meta name="robots" content="index,follow" /><!-- all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索； nofollow：页面上的链接不可以被查询。 -->

• 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).

<meta http-equiv="refresh" content="0;url=" />

• Other

<meta Name="Author" Content="Author name" /> <!--define page author--<meta name= "google"  content= "Index,follow"  / ><meta name=< Span class= "ATV" > "Googlebot"  content= /><meta  name= "verify"  content= "Index,follow"  /                  

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 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.

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->

1. width: Width (value/device-width) (range from 200 to 10,000, default is 980 pixels)
2. height: Height (value/device-height) (range from 223 to 10,000)
3. initial-scale: Initial zoom ratio (range from >0 to 10)
4. minimum-scale: Allows the user to zoom to the minimum scale
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: Many people use the initial-scale=1 non-responsive site, which makes the site render at 100% width, and the user needs to manually move the page or zoom. If and when initial-scale=1 used user-scalable=no or maximum-scale=1 , the user will not be able to zoom in/out of the page to see all the content.

• WebApp Full Screen mode: fake app, offline app.

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

Hide Status bar/Set status bar color: only takes effect when webapp full screen mode is turned on. contentthe value is default | black | black-translucent .

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

• Title after adding to the main screen

<meta name="apple-mobile-web-app-title" content="标题">

• Ignore numbers automatically recognized as phone numbers

<meta content="telephone=no" name="format-detection" />

• Ignore recognition mailboxes

<meta content="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

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

• Additional reference documents : FEX.BAIDU.COM/BLOG/2014/10/HTML-HEAD-TAGS/?QQ-PF-TO=PCQQ.C2C

<!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and<meta Name="Handheldfriendly" Content="True"><!--Microsoft's Vintage browser--<meta Name="Mobileoptimized" Content="320"><!--UC Force vertical screen--<meta Name="Screen-orientation" Content="Portrait"><!--QQ Forced vertical screen--<meta Name="X5-orientation" Content="Portrait"><!--UC Mandatory fullscreen--<meta Name="Full-screen" Content="Yes"><!--QQ Mandatory fullscreen--<meta Name="X5-fullscreen" Content="True"><!--UC Application Mode--<meta Name= "Browsermode"  content=  "application" ><!--QQ Application Mode-->< Span class= "PLN" ><meta name=  "X5-page-mode"  content=  "app" ><!--windows Phone Click No Highlight- ><meta name=< Span class= "ATV" > "msapplication-tap-highlight"  content=< Span class= "ATV" > "no" >            

Web related

• Declaration Code

<meta charset=‘utf-8‘ />

• Use the latest version of IE and Chrome first

<meta Http-equiv="X-ua-compatible" Content="Ie=edge,chrome=1" /><!--about X-ua-compatible--<meta Http-equiv="X-ua-compatible" content= "ie=6"  >< Span class= "com" ><!--use IE6--><metahttp-equiv= "x-ua-compatible" content= "ie=7"  >< Span class= "com" ><!--use IE7--><metahttp-equiv= "x-ua-compatible" content= "ie=8"  >< Span class= "com" ><!--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 Document: Se.360.cn/v6/help/meta.html

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, browser: WebKit kernel (fast mode)

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

<meta http-equiv="Pragma" content="no-cache">

• Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

• site adaptation: mainly used for pc-mobile phone page of the corresponding relationship.

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"><!--[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。 -->

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

<meta http-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

Ciaocc
Article from: segmentfault.com/a/1190000002407912

Common meta-finishing [reprint]