Commonly used HTML meta tag attributes (needed for website compatibility and optimization)

Commonly used HTML meta tag attributes (needed for website compatibility and optimization)
Original URL: http://segmentfault.com/blog/ciaocc/1190000002407912
Author:ciaocc
The copyright belongs to youciaocc. Please indicate the copyright when reprinting.

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 to display content or reload a page), search engines (keywords), or other web services. ——W3School

Required attributes

property value describe
content some text Defines meta information related to the http-equiv or name attribute

Optional attributes

property value describe
http-equiv content-type / expire / refresh / set-cookie Associate the content attribute with the HTTP header.
name author / description / keywords / generator / revised / others Associates the content property with a name.
content some text Defines the format used to translate content attribute values.


SEO Optimization

Reference Documentation

Page keywords , each web page should have a unique set of keywords that describe the content of the page.
Use descriptive and representative keywords and phrases that people might search for and that accurately describe the information provided on the page. If your tagged content is too short, search engines may not consider it relevant. Additionally the tag should not exceed 874 characters.


Copy code
The code is as follows:
<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 web page.

Copy code
The code is as follows:
<meta name="description" content="150 words" />

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 nofollow and noindex attribute values ​​correctly.


Copy code
The code is as follows:

<meta name="robots" content="index,follow" />
<!--
all: files will be retrieved and links on the page can be queried;
none: The file will not be retrieved and the links on the page cannot be queried;
index: the file will be retrieved;
follow: The links on the page can be queried;
noindex: The file will not be indexed;
nofollow: The links on the page cannot be queried.
-->

Page redirection and refresh : The number in the content represents the time (in seconds), that is, the refresh will take place after a certain period of time. If you add a URL, it will redirect to the specified web page (search engines can automatically detect it, but it can also be easily regarded as misleading by the engine and be punished).


Copy code
The code is as follows:

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

other


Copy code
The code is as follows:

<meta name="author" content="author name" /> <!-- Define the author of the web page -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />


mobile device

 viewport: can optimize the display of mobile browsers. If it is not a responsive site, do not use initial-scale or disable scaling.
The viewport width of most 4.7-5-inch devices is set to 360px; 5.5-inch devices is set to 400px; iPhone 6 is set to 375px; iPhone 6 plus is set to 414px.


Copy code
The code is as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` will cause black edges to appear when opening the page in WebApp full screen mode after adding it to the home screen on iPhone 5 -->

1.width: width (number/device-width) (range from 200 to 10,000, default is 980 pixels)
2.height: height (numeric value/device-height) (range from 223 to 10,000)
3.initial-scale: initial scale (range from >0 to 10)
4.minimum-scale: The minimum scale that the user is allowed to zoom to
5.maximum-scale: The maximum scale to which the user is allowed to zoom
6.user-scalable: whether the user can manually scale down (no, yes)
7.minimal-ui: You can minimize the upper and lower status bars when the page is loading. (Deprecated)
Note that many people use initial-scale=1 on non-responsive websites, which will cause the website to render at 100% width and the user will need to manually move the page or zoom. If you use user-scalable=no or maximum-scale=1 at the same time as initial-scale=1, users will not be able to zoom in/out on the web page to see all the content.

WebApp full screen mode: disguised app, offline application.


Copy code
The code is as follows:

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Enable WebApp fullscreen mode -->

Hide status bar/set status bar color: only takes effect when WebApp full screen mode is turned on. The values ​​of content are default | black | black-translucent .


Copy code
The code is as follows:

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

Title after adding to the home screen


Copy code
The code is as follows:
<meta name="apple-mobile-web-app-title" content="Title">

Ignore numbers and automatically identify them as phone numbers

Copy code
The code is as follows:
<meta content="telephone=no" name="format-detection" />

Ignore Identification Mailbox


Copy code
The code is as follows:
<meta content="email=no" name="format-detection" />

Add a Smart App Banner: Tell the browser the app that corresponds to this website and display a download banner on the page (as shown below). Reference Documentation


Copy code
The code is as follows:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Other reference documents

XML/HTML CodeCopy content to clipboard
  1. <!-- Optimized for handheld devices, mainly for some old browsers that do not recognize viewport, such as BlackBerry -->   
  2. < meta   name = "HandheldFriendly"   content = "true" >   
  3. <!-- Microsoft's old browser -->   
  4. < meta   name = "MobileOptimized"   content = "320" >   
  5. <!-- uc forces vertical screen -->   
  6. < meta   name = "screen-orientation"   content = "portrait" >   
  7. <!-- QQ forced vertical screen -->   
  8. < meta   name = "x5-orientation"   content = "portrait" >   
  9. <!-- UC forced full screen -->   
  10. < meta   name = "full-screen"   content = "yes" >   
  11. <!-- QQ forced full screen -->   
  12. < meta   name = "x5-fullscreen"   content = "true" >   
  13. <!-- UC application mode -->   
  14. < meta   name = "browsermode"   content = "application" >   
  15. <!-- QQ application mode -->   
  16. < meta   name = "x5-page-mode"   content = "app" >   
  17. <!-- No highlight when clicking on windows phone -->   
  18. < meta   name = "msapplication-tap-highlight"   content = "no" >   

Web related

Declaration Code


Copy code
The code is as follows:
<meta charset='utf-8' />

Prioritize the latest version of IE and Chrome


Copy code
The code is as follows:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- About X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6"><!-- Use IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7"><!-- Use IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8"><!-- Use IE8 -->

Browser kernel control : Many domestic browsers are dual-kernel (webkit and Trident), the webkit kernel is for high-speed browsing, and the IE kernel is compatible with web pages and old versions of websites. Websites that add meta tags can control which kernel the browser chooses to render. Reference Documentation


Copy code
The code is as follows:
<meta name="renderer" content="webkit|ie-comp|ie-stand">


The default kernel mode of domestic dual-core browsers is as follows:

1. Sogou high-speed browser, QQ browser: IE kernel (compatible mode)
2. 360 Speed ​​Browser, Maxthon Browser: Webkit kernel (speed mode)

Prevent browsers from accessing page content from the local computer's cache: With this setting, visitors will not be able to browse offline.


Copy code
The code is as follows:
<meta http-equiv="Pragma" content="no-cache">

Windows 8


Copy code
The code is as follows:

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 tile color -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 tile icon -->

Site adaptation: mainly used for the correspondence between PC and mobile pages.


Copy code
The code is as follows:

<meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5] Select one of the following languages ​​according to the protocol of the mobile page.
url="url" The latter represents the mobile page URL corresponding to the current PC page, and the two must be in a one-to-one correspondence.
-->

Transcoding statement: When you open a web page with Baidu, it may be transcoded (such as posting advertisements). To avoid transcoding, you can add the following meta


Copy code
The code is as follows:
<meta http-equiv="Cache-Control" content="no-siteapp" />

Other reference documents

COMPLETE LIST OF HTML META TAGS
W3C META TAGS
METATAGES in HTML5
MDN META TAGS

<<:  Introduction to MySQL Connection Control Plugin

>>:  An article to understand the advanced features of K8S

Recommend

How to insert Emoji expressions into MySQL

Preface Today, when I was designing a feedback fo...

How to create a style guide for your website in web interface design (with pictures and text)

What is a style guide? Simply put, it’s a document...

VMware Workstation installation and installation of WIN10 operating system to connect to the external network step by step guide (super detailed tutorial)

First download VMware Workstation 15.1 version. I...

Solution to 404 error when downloading apk file from IIS server

Recently, when using IIS as a server, the apk fil...

Design Theory: A Method to Understand People's Hearts

<br />Once, Foyin and Mr. Dongpo were chatti...

Some summary of MySQL's fuzzy query like

1. Common usage: (1) Use with % % represents a wi...

Professional MySQL development design specifications and SQL writing specifications

In the process of team development, it is essenti...

A brief discussion on VUE uni-app's commonly used APIs

Table of contents 1. Routing and page jump 2. Int...

Some references about colors in HTML

In HTML, colors are represented in two ways. One i...

How to execute Linux shell commands in Docker

To execute a shell command in Docker, you need to...

Docker Basics

Preface: Docker is an open source application con...

Detailed explanation of the usage of two types of temporary tables in MySQL

External temporary tables A temporary table creat...

Sqoop export map100% reduce0% stuck in various reasons and solutions

I call this kind of bug a typical "Hamlet&qu...

vue-router hook function implements routing guard

Table of contents Overview Global hook function R...

Detailed explanation of Vue development website SEO optimization method

Because the data binding mechanism of Vue and oth...