html commonly used meta organization_html/css_WEB-ITnose

< meta > Element

Summary

The

tag provides metadata about the HTML document. 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

属性 值 描述

content	some text	定义与http-equiv或name属性相关的元信息

Optional attributes

属性 值 描述

http-equiv	content-type / expire / refresh / set-cookie	把content属性关联到HTTP头部。
name	author / description / keywords / generator / revised / others	把 content 属性关联到一个名称。
content	some text	定义用于翻译 content 属性值的格式。

SEO Optimization

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 page. Mark content that is too short and search engines may not consider it relevant. Also tags should not exceed 874 characters.

<meta name="keywords" content="your tags" />

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

<meta name="description" content="150 words" />

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

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

Page redirection and refresh: The number in the content represents the time (seconds), that is, how much time will it take 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 http-equiv="refresh" content="0;url=" />

Others

<meta name="author" content="author name" /> <!-- 定义网页作者 --><meta name="google" content="index,follow" /><meta name="googlebot" content="index,follow" /><meta name="verify" content="index,follow" />

Mobile devices

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 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 (number/device-width) (range from 200 to 10,000, default is 980 pixels)
2. height: height (number/device-height) (Range from 223 to 10,000)
3. initial-scale: Initial scaling (Range from >0 to 10)
4. minimum-scale: Minimum scale the user is allowed to zoom to
5. maximum-scale: The maximum ratio the user is allowed to zoom to
6. user-scalable: Whether the user can manually zoom (no, yes)
7. minimal-ui: Can be minimized when the page is loading Change the status bar up and down. (Deprecated)

Note that many people use initial-scale=1 on non-responsive websites, which causes the website to render at 100% width and the user needs 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 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. The value of content is default | black | black-translucent.

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

Title after adding to home 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 email

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