Detailed explanation of the usage of meta tags in html

The following will bring you a summary of the use of html meta tags (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look

meta tag function

The META tag is a key tag in the HEAD area of ​​the HTML markup, providing document characters Basic information such as collection, language, author, etc., as well as settings for keywords and web page levels, etc., are most useful for search engine optimization (SEO).

PS: It is convenient for search engine robots to search and classify, so Internet applications should pay attention to it.

How to write large websites?

Before understanding this tag, I searched for their Meta settings on various mainstream websites, as follows:

Meta settings on JD.com’s homepage:

##XML/HTML CodeCopy content to clipboard

1. <meta charset="gbk">

2. <meta name="description" content="JD.COM- A professional comprehensive online shopping mall that sells tens of thousands of branded high-quality products such as home appliances, digital communications, computers, household department stores, clothing, maternal and infant products, books, food, etc. Convenient and honest services provide you with a pleasant online shopping experience! ">

3. ##<

   meta name= "Keywords" content="Online shopping, online mall, mobile phone, notebook, computer, MP3, CD, VCD, DV, camera, digital, accessories, watch, memory card, Jingdong ">

Meta settings on Taobao homepage:

XML/HTML Code

Copy content to clipboard

##<

1. meta charset="utf-8">##<

2. meta

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

meta

3. name="renderer" content="webkit">##<

   meta
4. name

   ="spm-id" content="a21bo"> <

   meta
5. name

   ="description" content="Taobao - Asia's largest and safest online trading platform, providing all kinds of clothing, beauty, home, digital, phone/point card recharge... 800 million high-quality special offers, and also provides guaranteed transactions (receive first, pay later) , advance compensation, three-for-one compensation for fakes, seven-day no-reason returns and exchanges, free digital maintenance and other safe transaction guarantee services, allowing you to fully enjoy the fun of online shopping with peace of mind! ">##<meta

name
6. =

   "keyword" content="">Meta settings for youku homepage ：

##XML/HTML CodeCopy content to clipboard

1. <meta charset="utf-8">

2. ##<meta http-equiv="X-UA-Compatible" content="IE=Edge">

3. ##<

   meta name="title" content="Youku - China's leading video website, providing video playback, video publishing, and video search - Youku Video" />

##<

4. #meta name ="keywords" content="Video, video sharing, video search, video playback, Youku video" /><

5. meta name="description" content= "Video service platform, providing video playback, video publishing, video search, video sharing" />## Douyu Meta settings for home page:

XML/HTML Code

Copy content to clipboard

<

1. meta

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

meta

2. name="renderer" content="webkit|ie-comp|ie-stand"> <

meta

3. http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">##< ;meta

4. name

   ="keywords" content="DOTA2, popular game live broadcast, game live broadcast, high definition Game live broadcast, mobile game live broadcast, e-sports live broadcast" />##<meta

name
5. =

   "description" content="Douyu - the national live broadcast platform provides high-definition, fast and smooth video live broadcast and game event live broadcast services. It includes live broadcasts of various popular game events such as DOTA2 and various famous game live broadcasts. It is rich in content and timely pushed, giving you a different audio-visual experience. It is all on Douyu - the national live broadcast platform. " /> Meta settings on Tencent homepage:

XML/HTML Code

Copy content to clipboard




##<meta

charset
=
1. "UTF-8"

   >##<meta name

   =
"renderer"

2. content="webkit" />

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

4. ##<meta name="keywords" content="News News Center Fact News Channel, Current Affairs Report">

5. ##<

   meta name="description" content="Tencent News, fact-based. News center, including current affairs news, domestic news, international news, social news, current affairs commentary, news pictures, news topics, news forums, military, history , a professional current affairs reporting portal">

##<

6. meta name ="author" content="skeetershi" />Meta settings for the home page of Qidian Novel Network:

   
   XML/HTML Code

   Copy content to clipboard

   <

   1. meta name="keywords" content="Novel, novel network, romance novels, youth novels, fantasy novels, martial arts novels, urban novels, historical novels, online novels, original online literature" />##<

   2. meta

      name="description" content ="Novel reading, wonderful novels are all in Qidian Novels. Qidian Novels provides fantasy novels, martial arts novels, original novels, online game novels, urban novels, romance novels, youth novels, historical novels, military novels, online game novels, science fiction novels , horror novels, free novel reading of the latest chapters of the first novels, all the excitement is in Qidian novels! ver:071011 Popular novels: "#. <meta

   http-equiv
   3. =

      "Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" /><meta

   name
   4. =

      "robots" content="all" />##<meta

      name
   =
   5. "googlebot"

      content="all" />##< meta name

      =
   "baiduspider"

   6. content="all" /> <meta name

      =
   "copyright"

   7. content="The copyright of this page www.qidian.com is owned by Qidian Chinese Network. All Rights Reserved" />

   8. <meta http-equiv="mobile-agent" content="format=wml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=xhtml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=html5; url=http://h5.qidian.com/bookstore.html" />

   9. <meta name="application-name" content="Starting point Chinese Novel Network" /

   10. ##<meta name="msapplication-starturl " content="/Default.aspx?_s=ie9" />

   11. <meta name="msapplication-tooltip" content="Novel reading_starting point Chinese Novel Network | Free novels, fantasy novels, martial arts novels, romance novels, youth novels, novel downloads of all kinds from Novel Network" />

   12. <meta name="msapplication-task" content="name=Qidian Mini Game ;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" /> ;

   13. <meta name="msapplication-task" content="name=Bookcase;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www .qidian.com/Images/ie9/book.ico" />

   14. <meta name="msapplication-task" content="name=Reading Client;action-uri=http://c.qidian .com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico" />

   15. <meta name="msapplication-task" content="name=ranking list;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" />

   16. ##<

       meta name="msapplication -task" content="name=search;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www .qidian.com/Images/ie9/search.ico" />

   17. <

       meta property="qc:admins" content="204236767661141166375" />

   meta detailed explanationmeta tag can be divided into two parts: http-equiv and name variables.

   http-equiv

   http-equiv is equivalent to the file header of http. It can return some useful information to the browser to help the browser display web page content correctly.

   # #X-UA-CompatibleSpecial tag for IE8, used to specify the IE8 browser to simulate the rendering method of a specific version of IE browser to solve some compatibility issues. expiresSet the expiration time of the web page. ​ ​ ​ refresh to automatically refresh and point to the new page. set-cookieIf the web page expires, it will be automatically deleted Local cookies. ​ ​ ​ ​ windows-targetForcing the page to be displayed as an independent page in the current window can prevent your own web page from being called as a frame page by otherscache-controlCaching mechanism ​ ​ ​ ​

   name

   The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used by search engine robots to find information and classify information. .

   Value	Description	Example
   content-type	Set the character set used by the page	When GB2312, it means that the encoding used by the website is Simplified Chinese; when ISO-8859-1, it means that the encoding used by the website is English; when UTF-8 , represents the world's universal language encoding; PS: The method for html5 pages is to directly use
   		The above code tells the IE browser whether or not a DTD is used to declare the document standard. IE8/9 will use the IE7 engine to render the page. The above code tells the IE browser that IE8/9 will use the IE8 engine to render the page. The above code tells the IE browser that IE8/9 and later versions will use the highest version of IE to render the page. The above code IE=edge tells IE to use the latest engine to render web pages, and chrome=1 can activate Chrome Frame. PS: Google adds a plug-in: Google Chrome Frame (Google Embedded Browser Framework GCF ), this plug-in can keep the user's IE browser unchanged, but when browsing the web, the user is actually using the Google Chrome browser core, and supports multiple versions of IE browsers such as IE6, 7, and 8.
   		PS: The GMT time format must be used
   		PS: 2 means that the page will stay for 2 seconds and then jump to the following URL
   		PS: GMT time format must be used.
   		Public: Indicates that the response can be cached by any cache area. Private: Indicates that all or part of the response message for a single user cannot be processed by the shared cache. This allows the server to only describe a partial response from a user that is not valid for other users' requests. no-cache: Indicates that the request or response message cannot be cached. no-store: Used to prevent important information from being released unintentionally. Sending it in the request message will cause both the request and response messages to use caching. max-age: Indicates that the client can receive responses with a lifetime no greater than the specified time (in seconds). min-fresh: Indicates that the client can receive responses with a response time less than the current time plus the specified time. max-stale: Indicates that the client can receive response messages beyond the timeout period. If you specify a value for max-stale messages, the client can receive response messages that exceed the specified value of the timeout period.

   ##revisedRevision time of web documentrobots is used to tell the search robot which pages need to be indexed and which pages do not need to be indexed. copyrightWebsite copyright information

   Value	Description	Example
   author	Annotation The author of the web page
   keywords	Page keywords, used for Indexed by search engines
   description	Page description, used for search engine inclusion
   viewport	is used to control page zoom
   renderer	Specify how dual-core browsers render pages by default.	//Default webkit kernel//Default IE compatibility mode< ;meta name="renderer" content="ie-stand">//Default IE standard mode PS: 360 browser supports
   generator	Describe the software used to create the website
   		Value: all|none|index|noindex|follow|nofollow, default all 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; index: the file will be retrieved; 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; nofollow: The file will not be retrieved, but the links on the page can be queried.

   SummaryThrough the big website for meta In the settings, you can see that the commonly used ones are X-UA-Compatible, keywords, and description.

   The above summary of the use of html meta tags (recommended) is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support Script Home.

   The above is the detailed content of Detailed explanation of the usage of meta tags in html. For more information, please follow other related articles on the PHP Chinese website!