Home > Web Front-end > HTML Tutorial > Organizing common attributes of HTML meta tags_html/css_WEB-ITnose

Organizing common attributes of HTML meta tags_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:51:32
Original
5875 people have browsed it

Summary

The

tag provides metadata about an 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. ?? W3School

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

Reference Documentation

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" />
Copy after login
Page Description Each web page should have a description tag that is no longer than 150 characters and accurately reflects the content of the page.
<meta name="description" content="150 words" />
Copy after login
Search engine indexing method , robotterms is a set of values ​​separated by commas (,), usually with 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:页面上的链接不可以被查询。 -->
Copy after login
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 http-equiv="refresh" content="0;url=" />
Copy after login
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" />
Copy after login

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 全屏模式打开页面时出现黑边  -->
Copy after login
width: width (numeric value/device-width) (range from 200 to 10,000, default is 980 pixels) height: height (numeric value/device-height) (range from 223 to 10,000) initial-scale: initial scaling ratio (Range from >0 to 10) minimum-scale: The minimum scale the user is allowed to zoom to maximum-scale: The maximum scale the user is allowed to zoom to user-scalable: Whether the user can manually zoom in (no,yes) minimal-ui: Yes 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 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 全屏模式 -->
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 name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Copy after login
Title after adding to home screen
<meta name="apple-mobile-web-app-title" content="标题">
Copy after login

Ignore numbers automatically recognized as phone numbers
<meta content="telephone=no" name="format-detection" />
Copy after login
Ignore recognition of email addresses
<meta content="email=no" name="format-detection" />
Copy after login
Add Smart App 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 documents
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
Copy after login

Others Reference documents
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">
Copy after login

Web related

Declaration encoding
<meta charset='utf-8' />
Copy after login
Prioritize to use the latest version of IE And Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 关于X-UA-Compatible --> <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 --> <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 --> <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
Copy after login
Browser kernel control: Many domestic browsers have dual cores (webkit and Trident), the webkit core is high-speed browsing, and the IE core is compatible with web pages and old websites. Websites that add meta tags can control which kernel rendering the browser chooses. Reference document
<meta name="renderer" content="webkit|ie-comp|ie-stand">
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 speed browser, Aoyou browser : Webkit kernel (extreme speed mode)

Prohibit the browser from accessing page content from the cache of the local computer : With this setting, visitors will not be able to browse offline.
<meta http-equiv="Pragma" content="no-cache">
Copy after login
Windows 8
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --> <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
Copy after login
Site Adaptation: Mainly used for PC-mobile page correspondence.
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"> <!--[wml|xhtml|html5]根据手机页的协议语言,选择其中一种;url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。 -->
Copy after login
Transcoding Statement: Opening a webpage with Baidu may transcode it (such as posting advertisements). To avoid transcoding, you can add the following meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
Copy after login
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template