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

Linux system file sharing samba configuration tutorial

Table of contents Uninstall and install samba Cre...

Ubuntu 20.04 CUDA & cuDNN Installation Method (Graphical Tutorial)

CUDA installation download cuda Enter the nvidia-...

Use Docker to run multiple PHP versions on the server

PHP7 has been out for quite some time, and it is ...

Detailed tutorial on installing and configuring MySQL 5.7.20 under Centos7

1. Download the MySQL 5.7 installation package fr...

How to draw a cool radar chart in CocosCreator

Table of contents Preface Preview text Graphics C...

How to create, start, and stop a Docker container

1. A container is an independently running applic...

CSS realizes the mask effect when the mouse moves to the image

1. Put the mask layer HTML code and the picture i...

HTML image img tag_Powernode Java Academy

summary Project description format <img src=&q...

WeChat applet component development: Visual movie seat selection function

Table of contents 1. Introduction 1. Component da...

A brief analysis of how to upgrade PHP 5.4 to 5.6 in CentOS 7

1. Check the PHP version after entering the termi...

Docker Basics

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

How to change the MySQL database directory location under Linux (CentOS) system

How to change the MySQL database directory locati...

A brief analysis of the issues that should be paid attention to when making 404 error pages

When optimizing a website, we must learn to use e...

JavaScript canvas realizes colorful sun halo effect

This article example shares the specific code of ...

Use tomcat to deploy SpringBoot war package in centos environment

Prepare war package 1. Prepare the existing Sprin...