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

Docker time zone issue and data migration issue

Latest solution: -v /usr/share/zoneinfo/Asia/Shan...

Analysis and solution of flex layout collapse caused by Chrome 73

Phenomenon There are several nested flex structur...

Vue+Openlayer batch setting flash point implementation code (based on postrender mechanism)

Effect picture: Implementation code: <template...

Vue uses ECharts to implement line charts and pie charts

When developing a backend management project, it ...

React Fiber structure creation steps

Table of contents React Fiber Creation 1. Before ...

Mysql index types and basic usage examples

Table of contents index - General index - Unique ...

MySQL database implements OLTP benchmark test based on sysbench

Sysbench is an excellent benchmark tool that can ...

Problems with configuring https server and reverse proxy with Nginx under Windows

Request logic Front-end --> Request nginx via ...

MySQL InnoDB MRR Optimization Guide

Preface MRR is the abbreviation of Multi-Range Re...

Unity connects to MySQL and reads table data implementation code

The table is as follows: Code when Unity reads an...

About the usage and precautions of promise in javascript (recommended)

1. Promise description Promise is a standard buil...

Detailed explanation of putting common nginx commands into shell scripts

1. Create a folder to store nginx shell scripts /...

Super detailed tutorial to implement Vue bottom navigation bar TabBar

Table of contents Project Introduction: Project D...

A simple method to implement Linux timed log deletion

Introduction Linux is a system that can automatic...

How to use vue-bootstrap-datetimepicker date plugin in vue-cli 3

Demand Background Recently, I plan to use Vue and...