Things to know about Meta tags in HTML

The Meta tag is an auxiliary tag in the head area of ​​the HTML language. It is located between the head tag and the title tag at the head of the HTML document. It provides information invisible to the user. It can be used by browsers (how content is displayed or pages are reloaded), search engines (keywords), or other web services.

I have now compiled the content of meta tags frequently used in front-end page development into a document, and added mobile web development meta information for reference when needed.

1. Describe the character encoding used in the document

<meta charset=&#39;utf-8&#39;>

Or

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

The meta tag defines the character set used by the HTML page as utf-8, which is Unicode. It can display simplified Chinese, traditional Chinese and other languages ​​​​(such as Japanese, Korean) on the same page. Of course, you can also use gb2312 (Simplified Chinese), big5 (Traditional Chinese) and other character sets.

At present, we generally recommend using the first writing method, which is also the writing method used by HTML5.

2. Declare the browser and version used

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

When the specified content value is IE=edge,chrome=1, the latest version of IE and Chrome will be used first. Assuming that the client has Google Chrome Frame installed, the chrome rendering engine is used in IE to render the page. Otherwise, the highest standard mode of the client IE will be used to render the page.

There are also the following setting methods:

<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 --> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 --> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->

3. SEO optimization related

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.

<meta name="description" content="不超过150个字符" />

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.

<meta name="keywords" content="html5, css3, 关键字"/>

Define the author of the web page, optional

<meta name="author" content="月光光" />

​ 4. Page redirection and refresh: The number in the content represents the time (seconds), that is, how long it takes to refresh. If you add url, it will redirect to the specified web page.

<meta http-equiv="Refresh"  contect="5;url=http://www.php.cn" />

The above code means that after staying for 5 seconds, it will automatically refresh and jump to the URL http://www.php.cn

5. Expires webpage expiration time

<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />

Set the expiration time of the web page. Once it expires, it must be called again on the server. It should be noted that the GMT time format must be used, or directly set to 0 (no caching).

6. Pragma prohibits local caching

<meta http-equiv="Pragma" contect="no-cache" />

Set the web page not to be saved in the cache and refresh the page every time you visit. With this setting, visitors will not be able to browse offline.

​ 7. viewport mobile device screen visible area

Since the screen width of mobile devices is different from that of traditional web, we need to change the viewport value.

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.

width – the width of the viewport (range from 200 to 10,000, default is 980 pixels)

height – the height of the viewport (range from 223 to 10,000)

initial-scale – initial scaling (ranging from > 0 to 10)

​minimum-scale – The minimum ratio that the user is allowed to zoom to

​maximum-scale – The maximum ratio that the user is allowed to zoom to

​user-scalable – whether the user can manually scale (no, yes)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Force the width of the document to the device to remain 1:1;

The maximum width ratio of the document is 1.0 (initial-scale initial scale value and maximum-scale maximum scale value);

User-scalable defines whether the user can manually zoom (no means no scaling), so that the page can be fixed to the size of the device;

Note: In the actual test, it was found that some Android browsers do not support this rule and can enlarge the page. Once the response box is enlarged, it will also enlarge, causing the page to be disordered. The solution is to define the page. Minimum width.

body { 
    min-width: 320px; 
}

Note that many people use initial-scale=1 on non-responsive websites, which causes the website to render at 100% width, requiring the user 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.

There are also the following settings for meta on mobile devices.

8. WebApp full-screen mode: disguise app, offline application.

<meta name="apple-mobile-web-app-capable" content="yes" />

9. Hide the status bar/set the status bar color: It only takes effect when the 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" />

​ 10. Title after adding to the home screen

<meta name="apple-mobile-web-app-title" content="标题" />

11. Ignore numbers and automatically identify them as phone numbers

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

​12. Ignore the identification email

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

The above is the detailed content of Things to know about Meta tags in HTML. For more information, please follow other related articles on the PHP Chinese website!