html Meta tag

1 Definition and usage of meta

element can provide meta-information about the page, such as descriptions and keywords for search engines and update frequency. The

tag is located at the head of the document and does not contain any content. The tag's properties define the name/value pairs associated with the document.

tags are always located inside the head element.

Note: Metadata is always passed in name/value pairs.

This is a simple meta tag used to define that this html is parsed using UTF-8.

2 Overview

This is the most basic content introduced by W3C

Required attributes

Optional attributes

##3 Tags detailed explanation

In one article In the blog post, the tag is divided into two parts, HTTP header information (HTTP-EQUIV) and page description information (NAME)

HTTP-EQUIV

HTTP-EQUIV is similar to the HTTP header protocol, which responds to the browser with some useful information to help display web page content correctly and accurately.

1. Content-Type and Content-Language (display character set settings)

Usage:

Note: This META tag defines HTML The character set used on the page is GB2132, which is the national standard Chinese character code. If "charset=GB2312" is replaced with "BIG5", the character set used on this page is the Traditional Chinese Big5 code. When you browse some foreign sites, IE browser will prompt you that you need to download xx language support to display the page correctly. This function is to know which character set needs to be used to display the page by reading the Content-Type attribute of the META tag of the HTML page. If the corresponding character set is not installed in the system, IE will prompt for downloading. Other languages ​​also correspond to different charsets. For example, the Japanese character set is "iso-2022-jp" and the Korean character set is "ks_c_5601".

Content-Type's Content can also be: text/xml and other document types;

Charset options: ISO-8859-1 (English), BIG5, UTF-8, SHIFT-Jis, Euc, Koi8 -2. us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr , gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2 and other character sets; the Content of Content-Language can also be: EN, FR and other language codes.

2. Refresh Description: How long (seconds) does it take for the web page to refresh itself, or how long does it take for the web page to automatically link to other web pages.

Usage:

Note: The 5 means that it will automatically refresh to the URL after staying for 5 seconds.

3. Expiration Description: Specify the expiration time of the web page in the cache. Once the web page expires, it must be retrieved from the server.

Usage:

Note: The time format of GMT must be used, or directly set to 0 (the number indicates how long it will expire after).

4. Cach mode specifies whether the browser can retrieve page content from the cache. After stipulation, users cannot read web pages offline.

5. Cookie settings Description: When the browser accesses a page, it will be stored in the cache and will be accessed again next time can be read from the cache whenever needed to improve speed. Disable caching when you want visitors to refresh your ad's icon every time, or refresh your counter every time. Usually there is no need to disable caching for HTML files. For pages such as ASP, you can disable caching, because every page you see is dynamically generated on the server, and caching is meaningless. If the web page expires, the saved cookies will be deleted.

Usage: Note: Must be used GMT time format.

6. Display window settings Description: Force the page to be displayed as an independent page in the current window.

Usage: Note: This attribute is used to prevent others from calling your page in the frame. Content options: _blank, _top, _self, _parent.

7. Web page RSAC rating Description: There is a content setting in IE's Internet options that can prevent browsing of some restricted websites, and the restriction level of the website is set through this parameter.
Usage:

8.Page-Enter, Page-Exit (Enter and Exit) Description: These are some special effects when the page is loaded and called out. Usage:

Note: blendTrans is a type of dynamic filter that produces a fade effect. Another dynamic filter, RevealTrans, can also be used for page entry and exit effects:

Duration represents the duration of the filter effect (unit: seconds )
transition filter type. Indicates which special effect to use, the value is 0-23.

0 Reduce the rectangle

1 Expand the rectangle

2 Reduce the circle

3 Expand the circle

4 Refresh from bottom to top

5 Refresh from top to bottom

6 Refresh from left to right

7 Refresh from right to left

8 Vertical blinds

9 Horizontal blinds

10 Offset horizontal blinds

11 Offset vertical blinds

12 Point spread

13 Refresh from left to center

14 From center to left Refresh

15 Middle to top and bottom

16 Top and bottom to middle

17 Bottom right to top left

18 Top right to bottom left

19 Top left To the lower right

20 From the lower left to the upper right

21 Horizontal bar

22 Vertical bar

23 Randomly select one of the above 22 types

9. XP Theme Usage: Note: Turn off the blue three-dimensional button system display style of

10. IE6 (page generator) Description: The page generator generator is ie6
Usage: Note: What to use Made by manufacturers of similar products.

11. Content-Script-Type (script related) Description: This is the recent W3C specification, indicating the type of script in the page.
Usage: Note: Do not set the level too high. RSAC's evaluation system provides a standard for evaluating Web site content. Users can set Microsoft Internet Explorer (IE3.0 or above) to exclude sites containing pornographic and violent content. The HTML in the example above was taken from Microsoft's homepage.

NAME variable

name describes the web page and corresponds to the Content (web page content) to facilitate search engine robots to find and classify (currently almost all search engines use online robots to automatically find meta value to classify web pages).

The value of name (name="") specifies the type of information provided. Some values ​​are already defined. For example, description, keyword, refresh, etc. You can also specify other arbitrary values, such as: creationdate (creation date), document ID (document number), level (level), etc. The content of

name specifies the actual content. For example: If you specify level as value, the Content may be beginner, intermediate, or advanced.

1. Search engine keyword usage: Note: Each key Use English commas "," to separate words. The usual use of META is to specify keywords that search engines use to improve search quality. When several META elements provide document language dependency information, search engines use the lang attribute to filter and display search results by the user's language preference. For example:

2. Introduction Description: Description is used to tell search engines the main content of your website.
Usage: 3. Robot Wizard Description: Robots are used to tell the search robot which pages need to be indexed and which pages do not need to be indexed. The parameters of Content include all, none, index, noindex, follow, and nofollow. The default is all.
Usage: Note: Many search engines log in to the website by releasing robot/spider searches. These robots/spider It is necessary to use some characteristics of the meta element to determine how to log in.

all: The file will be retrieved, and the links on the page can be queried;

none: The file will not be retrieved, and the links on the page cannot be queried; (and "noindex , no follow" plays the same role)

index: the file will be retrieved; (let the robot/spider log in)

follow: the links on the page can be queried;

noindex: The file will not be retrieved, but the links on the page can be queried; (Do not allow robot/spider to log in)

nofollow: The file will not be retrieved, but the links on the page can be queried. (Do not allow robots/spiders to follow the links on this page to search down) 4. Author Usage: Note: Content can be: Your or your production team's name, or Email 5. Copyright Usage: 6. Editor Usage: Note: Content="your editor" 7. revisit-after (revisit) Usage:

Other usage

1. scheme (scheme) Description: scheme can be used when name is used to specify how the value of content should be interpreted.
Usage: < ;meta scheme="ISBN" name="identifier" content="0-14-043205-1" /> Note: 2. Link to file Usage: Note: For many websites, if you save it in your inbox, you will find that it is accompanied by a small icon. If you click to enter it again, you will also find that there is also a small icon in the address bar. Now you can easily achieve this function by just adding this paragraph to the header of your page. is used to link the current file to other URLs, but there will be no link button. It is used between

tags. The format is as follows:

3. Insert the web page base link attribute Usage: Note: All relative paths on your web page will be preceded by http://www.cn8cn.com/ when linking. Where target="_blank" is the link file to open in a new window, you can make other settings. Change "_blank" to "_parent" to mean that the linked file will be opened in the parent window of the current window; change to "_self" to open the linked file in the current window (frame); change to "_top" to display the linked file in full screen.

Summary and supplement

Emphasis on the setting of Keywords and Description

The above are some basic usages of META tags, the most important of which is: the setting of Keywords and Description. why? The reason is very simple. These two statements can allow search engines to accurately discover you and attract more people to visit your site! According to the working principle of popular search engines (Google, Lycos, AltaVista, etc.), search engines first send robots Automatically search on the WWW. When a new website is discovered, it is easy to retrieve the Keywords and Description in the page, add it to its own database, and then sort the websites according to the density of the keywords.

From this point of view, we must remember to add the META tags of Keywords and Description, and write the keywords and introduction as well as possible. Otherwise, the consequences will be:

If there are no META tags of Keywords and Description in your page, then the robot will not be able to add your site to the database, and it will be impossible for netizens to search for your site.

If your keywords are not well chosen and the keyword density is not high, the possibility of being ranked behind dozens or even millions of sites and being clicked is also very small.

Please pay attention to the following points when writing Keywords:

Do not use common words. For example www, homepage, net, web, etc.

Don’t use adjectives or adverbs. For example best, biggest etc.

Don’t use general terms, be as precise as possible. For example, for "Ericsson Mobile Phone", it would be better to use "T28SC" instead.

"On a journey of three, there must be a teacher." The technique for finding suitable keywords is: Go to famous search engines such as Google, Lycos, Alta, etc., search for websites with similar content to yours, and check the top ten Website META keywords, use them on your website, the effect can be imagined.

Tips to improve the search click-through rate

In order to increase the search click-through rate, here are some "shortcuts" that can help you:

In order to increase the density of keywords, add Keywords are hidden in the page (define the text color to be the same as the background color).

Add keywords to the ALT comment statement of the image. For example:

Use HTML comment statements to add a large number of keywords to the page code. Usage:

 " content="FrontPage.Editor.Document"> 　 　 > ;

4 Mobile terminal topic

In the mobile terminal, a new meta tag is used.

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.

width: width (value/device-width) (range from 200 to 10,000, default is 980 pixels)

height: height (number/device-height) (range from 223 to 10,000)

initial-scale: initial scaling (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: User Can it be manually reduced (no,yes)

minimal-ui: The upper and lower status bars can be minimized when the page is loaded. (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.

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.

Title added to the home screen

Ignore numbers and automatically identify them as phone numbers

Ignore identification email

Add Smart App Advertising Banner Smart App Banner: Tell the browser the app corresponding to this website , and display the download banner on the page.

Web related

Declaration encoding

Priority is given to using the latest version of IE and Chrome

Browser kernel control: many domestic browsers It has dual cores (webkit and Trident), the webkit core is used for high-speed browsing, and the IE core is compatible with web pages and old versions of websites. Websites that add meta tags can control which kernel rendering the browser chooses. The default kernel mode of domestic dual-core browsers is as follows:

Sogou High-speed Browser, QQ Browser: IE kernel ( Compatibility mode)

360 Speed ​​Browser, Aoyou Browser: Webkit kernel (speed mode)

Prohibit the browser from accessing page content from the cache of the local computer: With this setting, visitors will Unable to browse offline.

Windows 8

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

Transcoding statement: Opening a webpage with Baidu may transcode it (such as posting advertisements). To avoid transcoding, you can add the following meta

For more articles related to html Meta tags, please pay attention to the PHP Chinese website!