Summary of some commonly used metas

Element

Summary

Tags provide metadata about HTML documents. The metadata is not displayed on the page, but is machine-readable. It can be used by browsers (how content is displayed or pages are reloaded), search engines (keywords), or other web services.

​Required attributes

​Optional attributes

SEO optimization

Referring to the document

• Page Keywords, each web page should have a unique set of keywords that describe the content of the web page.
  Use descriptive and representative keywords and phrases that people are likely to search for, and accurately describe the information provided on the web page. Mark content that is too short and search engines may not consider it relevant. Also tags should not exceed 874 characters.

<meta>

• Page Description Each web page should have a description tag that is no longer than 150 characters and accurately reflects the content of the web page.

<meta>

• Search engine indexing method, robotterms is a set of values ​​separated by commas (,), and usually has the following values : none, noindex, nofollow, all, index and follow. Make sure to use the nofollow and noindex attribute values ​​correctly.

<meta>

• Page redirection and refresh: The number in the content represents the time (seconds), that is, how long it takes to refresh. If you add a URL, it will redirect to the specified web page (search engines can automatically detect it, and it can easily be regarded as misleading by the engine and punished).

<meta>

• Other

<meta> 
<meta>
<meta>
<meta>

Mobile device

• viewport: Can optimize the display of mobile browsers. If the website is not responsive, do not use initial-scale or disable scaling.
  The viewport width of most 4.7-5-inch devices is set to 360px; the 5.5-inch device is set to 400px; the iphone6 ​​is set to 375px; the iphone6 ​​plus is set to 414px.

<meta>

1. width: width (number / device-width) (range from 200 to 10,000, default is 980 pixels)

2. 
   

3. ## height: height (numeric value / device-height) (range from 223 to 10,000)

4. 
   

5. initial-scale: Initial scaling (ranging from >0 to 10)

6. 
   

## minimum-scale: The minimum scale the user is allowed to zoom to

8. 
   

maximum-scale: The maximum scale the user is allowed to zoom to

10. 
    

user-scalable: Whether the user can manually shrink (no,yes)

12. 
    

minimal-ui: You can minimize the upper and lower status bars when the page loads. (Deprecated)
Note that many people use initial-scale=1 on non-responsive websites, which causes the website to render at 100% width, requiring the user to manually move the page or zoom. If user-scalable=no or maximum-scale=1 is used together with initial-scale=1, the user will not be able to zoom in/out the web page to see the entire content.

• WebApp full screen mode

  : Disguise app, offline application.

  <meta> 

  Copy after login

• Hide status bar/set status bar color

  : Only takes effect when WebApp full-screen mode is turned on. The value of content is default | black | black-translucent.

  <meta>

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

• Title after adding to home screen

  <meta>

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

• Ignore digits automatically recognized as phone numbers

  <meta>

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

## Ignore identifying email

• <meta>

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

Add Smart App Advertising Banner Smart App Banner
• : Tell the browser the app corresponding to this website, and Display the download banner on the page (as shown below). Reference document

  <meta>

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

Reference document

• 
  <meta>
  
  <meta>
  
  <meta>
  
  <meta>
  
  <meta>
  
  <meta>
  
  <meta>
  
  <meta>
  
  <meta>

  Copy after login
  Web page related

• ##

  <meta>

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login

  Copy after login
Priority is given to using the latest version of IE and Chrome

• <meta>
  
  <meta>
  <meta>
  <meta>

  Copy after login
Browser Kernel Control

•  <meta>

  Copy after login
  The default kernel mode of domestic dual-core browsers is as follows: 1. Sogou high-speed browser, QQ browser: IE kernel (compatibility mode)

　　2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

• 禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

<meta>

• Windows 8

<meta> 
<meta> 

• 站点适配：主要用于PC-手机页的对应关系。

<meta>

• 转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta

<meta>

The above is the detailed content of Summary of some commonly used metas. For more information, please follow other related articles on the PHP Chinese website!