Summary of the use of html meta tags (recommended)

Summary of the use of html meta tags (recommended)

Meta tag function

The META tag is a key tag in the HEAD area of ​​HTML tags. It provides basic information such as document character set, language used, author, as well as settings for keywords and page rankings. Its biggest function is to perform search engine optimization (SEO).

PS: This should be noted in Internet applications to facilitate search engine robots to find and classify.

How are big websites written?

Before I learned about this tag, I looked up the Meta settings of various mainstream websites, as follows:

Meta settings for JD.com homepage:

XML/HTML CodeCopy content to clipboard
  1. < meta   charset = "gbk" >   
  2. < meta   name = "description"   content = "JD.COM - a professional comprehensive online shopping mall, selling tens of thousands of brand-name high-quality products such as home appliances, digital communications, computers, home furnishings, clothing and accessories, maternity and baby products, books, and food. Convenient and honest service provides 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, JD" >   

Meta settings for Taobao homepage:

XML/HTML CodeCopy content to clipboard
  1. < meta   charset = "utf-8" >   
  2. < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge,chrome=1" >   
  3. < meta   name = "renderer"   content = "webkit" >   
  4. < meta   name = "spm-id"   content = "a21bo" >   
  5. < meta   name = "description"   content = "Taobao.com - Asia's largest and safest online trading platform, providing all kinds of clothing, beauty, home, digital, phone bills/point card recharge... 800 million high-quality special-priced products, and also provides guaranteed transactions (payment after receiving goods), advance payment, three times compensation for fake products, seven-day unconditional return and exchange, free digital repair and other safe transaction guarantee services, allowing you to fully enjoy the fun of online shopping!" >   
  6. < meta   name = "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, 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, and video sharing"   />   

Meta settings of Douyu homepage:

XML/HTML CodeCopy content to clipboard
  1. < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8"   />   
  2. < meta   name = "renderer"   content = "webkit|ie-comp|ie-stand" >   
  3. < meta   http-equiv = "X-UA-Compatible"   content = "IE=Edge,chrome=1" >   
  4. < meta   name = "keywords"   content = "DOTA2, popular game live broadcast, game live broadcast, HD game live broadcast, mobile game live broadcast, e-sports live broadcast"   />   
  5. < meta   name = "description"   content = "Douyu - National Live Broadcast Platform provides high-definition, fast and smooth video live broadcast and game event live broadcast services, including DOTA2 and other popular game event live broadcasts and various famous game live broadcasts. It is rich in content and pushed in a timely manner, bringing you a different audio-visual experience. Everything is on Douyu - National Live Broadcast Platform."   />   

Meta settings for Tencent homepage:

XML/HTML CodeCopy content to clipboard
  1. < meta   charset = "UTF-8" >   
  2. < meta   name = "renderer"   content = "webkit"   />   
  3. < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge,chrome=1" >   
  4. < meta   name = "keywords"   content = "News News Center Facts News Channel, Current Affairs Report" >   
  5. < meta   name = "description"   content = "Tencent News, a fact-based website. News center, including current affairs news, domestic news, international news, social news, current affairs commentary, news photos, news topics, news forums, military affairs, history, professional current affairs reporting portal" >   
  6. < meta   name = "author"   content = "skeetershi"   />   

Meta settings on the Qidian.com homepage:

XML/HTML CodeCopy content to clipboard
  1. < meta   name = "keywords"   content = "novels, novel websites, 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, and the latest chapters of first-run novels for free novel reading. All the wonderful novels are in Qidian Novels! ver:071011 Popular novels:."   />   
  3. < meta   http-equiv = "Content-Type"   id = "meta_ContentType"   content = "text/html;charset=UTF-8"   />   
  4. < meta   name = "robots"   content = "all"   />   
  5. < meta   name = "googlebot"   content = "all"   />   
  6. < meta   name = "baiduspider"   content = "all"   />   
  7. < meta   name = "copyright"   content = "This page is copyrighted by www.qidian.com 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 = "Qidian Chinese Novel Network" /
  10. < meta   name = "msapplication-starturl"   content = "/Default.aspx?_s=ie9"   />   
  11. < meta   name = "msapplication-tooltip"   content = "Novel reading_Qidian Chinese novel network|free novels, fantasy novels, martial arts novels, romance novels, youth novels, novel network all kinds of novel downloads"   />   
  12. < meta   name = "msapplication-task"   content = "name=Starting Point Mini Games;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=Bookshelf;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;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

The meta 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 send some useful information back to the browser to help the browser display the content of the web page correctly.

value describe example
content-type Set the character set used by the page < meta http-equiv ="content-Type" content ="text/html; charset=utf-8" >

GB2312 means that the website uses simplified Chinese characters.

When ISO-8859-1 is used, it means that the encoding used by the website is English;

UTF-8 represents the universal language encoding;

PS: The approach for HTML5 pages is to directly use <meta charset="utf-8"/>

X-UA-Compatible IE8's dedicated tag is used to specify the IE8 browser to simulate the rendering method of a specific version of IE browser, so as to solve some compatibility issues.

< meta http-equiv ="X-UA-Compatible" content ="IE=7" >

The above code tells IE browser that regardless of whether DTD is used to declare the document standard, IE8/9 will use IE7 engine to render the page.
< meta http-equiv ="X-UA-Compatible" content ="IE=8" > The above code tells the IE browser that IE8/9 will use the IE8 engine to render the page.
< meta http-equiv ="X-UA-Compatible" content ="IE=edge" > The above code tells the IE browser that IE8/9 and later versions will render the page with the highest version of IE.
< meta http-equiv ="X-UA-Compatible" content ="IE=Edge,chrome=1" >

In the above code, IE=edge tells IE to use the latest engine to render web pages, and chrome=1 activates Chrome Frame.

PS: Google added a plug-in: Google Chrome Frame (Google Embedded Browser Framework GCF). This plug-in can keep the user's IE browser unchanged, but when the user browses the web, he actually uses the Google Chrome browser kernel, and supports multiple versions of IE browsers such as IE6, 7, and 8.

expires Set the expiration time of the web page. < meta http-equiv ="expires" content ="Fri,12Jan200118:18:18GMT" >

PS: The time format must be GMT

refresh Automatically refresh and point to the new page. < meta http-equiv ="Refresh" content ="2;URL=https://www.baidu.com" >

PS: 2 means the page will stay for 2 seconds and then jump to the following URL

set-cookie If the web page expires, the local cookie is automatically deleted. < meta http-equiv ="Set-Cookie" content ="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/" >

PS: The time format must be GMT.

windows-target Force the page to be displayed as an independent page in the current window, which can prevent your web page from being called as a frame page by others < meta http-equiv ="Window-target" content ="_top" >
cache-control Cache mechanism < meta http-equiv ="cache-control" content ="no-cache" >

Public: Indicates that the response can be cached by any cache.

Private: Indicates that the entire or partial response message is for a single user and cannot be processed by a shared cache. This allows the server to describe only part of the response message to the current user, without having this response message be 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 accidentally released. Sending it in a request message will cause both the request and response messages to not use the cache.

max-age: Indicates that the client can receive responses with an age no greater than the specified time (in seconds).

min-fresh: Indicates that the client can receive responses whose response time is 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 max-stale message value, the client can receive response messages that exceed the specified timeout period.

name

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

value describe example
author Attribute the author of a web page < meta name ="author" content ="dashen" />
keywords Page keywords, used to be indexed by search engines < meta name =" keywords " content =" news, news center, news channel " >
description Page description, for search engine indexing < meta name ="description" content ="News Center, including political news, domestic news, international news, social news, current affairs commentary, news photos, news topics, news forums, military, history, professional current affairs reporting portal" >
viewport Used to control page zoom < meta name ="viewport" content ="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no"
>
Renderer Specifies how dual-core browsers render pages by default. < meta name ="renderer" content ="webkit" > //Default webkit kernel < meta name ="renderer" content ="ie-comp" > //Default IE compatibility mode < meta name ="renderer" content ="ie-stand" > //Default IE standard mode

PS: 360 browser support

generator Describe the software used to create the website < meta name ="generator" content ="Microsoft" />
revised The modification time of the web document < meta name ="revised" content ="Design Network, 6/24/2015" />
Robots Used to tell search robots which pages need to be indexed and which pages do not need to be indexed. < meta name ="robots" content ="none" />

Value: all|none|index|noindex|follow|nofollow, default is all

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, 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.

copyright Website Copyright Information
< meta name ="copyright" content ="This page is copyrighted by XXX. All Rights Reserved" />

Summarize

Through the meta settings of large websites, we 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 that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<:  Example of implementing element table row and column dragging

>>:  Detailed explanation of explain type in MySQL

Recommend

Comprehensive inventory of important log files in MySQL

Table of contents Introduction Log classification...

Vue implements simple data two-way binding

This article example shares the specific code of ...

A brief talk about calculated properties and property listening in Vue

Table of contents 1. Computed properties Syntax: ...

Linux uses if to determine whether a directory exists.

How to use if in Linux to determine whether a dir...

Share the responsive frameworks commonly used by web design masters (summary)

This article introduces and shares the responsive...

Detailed explanation of the use of MySQL group links

Grouping and linking in MYSQL are the two most co...

JS implements a simple todoList (notepad) effect

The notepad program is implemented using the thre...

Summary of common Mysql DDL operations

Library Management Create a library create databa...

3 Tips You Must Know When Learning JavaScript

Table of contents 1. The magical extension operat...

Why Use DOCTYPE HTML

You know that without it, the browser will use qui...

How to use CSS attribute selectors to splice HTML DNA

CSS attribute selectors are amazing. They can hel...

PHP related paths and modification methods in Ubuntu environment

PHP related paths in Ubuntu environment PHP path ...