Home >Web Front-end >HTML Tutorial >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 explanationIn one article In the blog post, the tag is divided into two parts, HTTP header information (HTTP-EQUIV) and page description information (NAME)HTTP-EQUIVHTTP-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: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.
Usage:
Usage:
Usage: Note: Must be used GMT time format.
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
3. Insert the web page base link attribute Usage:
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:
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!