Home  >  Article  >  Web Front-end  >  Detailed explanation of examples of meta tags in html

Detailed explanation of examples of meta tags in html

Y2J
Y2JOriginal
2017-05-23 09:49:002483browse

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 and take a look.

meta tag function

META tag is one of the HTML tags HEAD area Key tags provide basic information such as document character set , language used, author, etc., as well as settings for keywords and web page levels. The biggest role is to enable search engine optimization ( SEO).

PS: It is convenient for search engine robots to search and classify. 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. 6176f371fed13b0e0cbb7f62500ca12be3f6821dd653bb4316f242d611d336a9Meta settings for Taobao homepage:

##XML/HTML Code

Copy content to clipboard

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品,同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务,让你全面安心享受网上购物乐趣!">
<meta name="keyword" content="">
Meta settings for youku homepage:

XML/HTML Code

Copy content To clipboard

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />
Meta settings of Douyu homepage:

XML/HTML Code

Copy content to clipboard

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="keywords" content="DOTA2,热门游戏直播,游戏直播,高清游戏直播,手机游戏直播,电子竞技直播" />
<meta name="description" content="斗鱼 - 全民直播平台提供高清、快捷、流畅的视频直播和游戏赛事直播服务,包含DOTA2等各类热门游戏赛事直播和各种名家大神游戏直播,内容丰富,推送及时,带给你不一样的视听体验,一切尽在斗鱼 - 全民直播平台。" />
Meta settings for Tencent homepage:

XML/HTML Code

Copy content to clipboard

<meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="新闻 新闻中心 事实派 新闻频道,时事报道">
<meta name="description" content="腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
<meta name="author" content="skeetershi" />
Meta settings for the home page of Qidian Novel Network:

XML/HTML Code

Copy content to the clipboard

<meta name="keywords" content="小说,小说网,言情小说,青春小说,玄幻小说,武侠小说,都市小说,历史小说,网络小说,原创网络文学" />
<meta name="description" content="小说阅读,精彩小说尽在起点小说。起点小说提供玄幻小说,武侠小说,原创小说,网游小说,都市小说,言情小说,青春小说,历史小说,军事小说,网游小说,科幻小说,恐怖小说,首发小说最新章节免费小说阅读,精彩尽在起点小说!ver:071011热门小说:。" />
<meta http-equiv="Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" />
<meta name="robots" content="all" />
<meta name="googlebot" content="all" />
<meta name="baiduspider" content="all" />
<meta name="copyright" content="本页版权 www.qidian.com 起点中文网所有。All Rights Reserved" />
<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" />
<meta name="application-name" content="起点中文小说网" /   
<meta name="msapplication-starturl" content="/Default.aspx?_s=ie9" />
<meta name="msapplication-tooltip" content="小说阅读_起点中文小说网|免费小说,玄幻小说,武侠小说,言情小说,青春小说,小说网各类小说下载" />
<meta name="msapplication-task" content="name=起点小游戏;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" />
<meta name="msapplication-task" content="name=藏书架;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/book.ico" />
<meta name="msapplication-task" content="name=读书客户端;action-uri=http://c.qidian.com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico" />
<meta name="msapplication-task" content="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" />
<meta name="msapplication-task" content="name=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/search.ico" />
<meta property="qc:admins" content="204236767661141166375" />
meta detailed explanation

meta tag can be divided into two parts: http-equiv and namevariable.

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 correctly Display web page content.

ValueDescriptionSet the character set used by the pageGB2312, 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 expiresSet the expiration time of the web page. 23c623dc02026f00c9a6d66615d33c48 ​ ​ ​ refresh to automatically refresh and point to the new page. 91e858456b6d7d90b873e3f50f161421 set-cookieIf the web page expires, then automatically501adc35d9f07d9dd483d5e98d9d5928 ​ ​ ​ ​ 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 others4ced9d04e0cecdb1f3bdc88aee0a229fcache-controlCaching mechanism9176adcf7fd21ee70b76b75374dee2d4 ​ ​ ​ ​

name

nameAttribute is mainly used to describe the web page. The corresponding attribute value is content. The content in content is mainly for search engine robots to find. Information and classification information.

Example content-type
9420384aed01dccd5f0e414d03fc19e5 When

UTF-8 , represents the world's universal language encoding;

PS: The method for html5 pages is to directly use 9d54027d814bba7a6c118810bbc6025d

X-UA-Compatible Special tag for IE8, used to specify IE8 browser to simulate a specific version of IE browser rendering method to solve some compatibility issues.

daee65cea63af063278cd59ca1e900be

The above code tells the IE browser whether or not DTD# is used ##State the document standard. IE8/9 will use the IE7 engine to render the page. 64772ba68a7b3c2cb16dfcd5517312f2 The above code tells the IE browser that IE8/9 will use the IE8 engine to render the page.
d1194aa6a0a1a4debf92ccfbff033ad7 The above code tells the IE browser that IE8/9 and later versions will use the highest version of IE to render the page.
dc4a9259080a7b94aa663ad18ce92fe0
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

FrameGCF), this plug-in can keep the user's IE browser unchanged, but when users browse the web, they actually use the Google Chrome browser core, and supports multiple versions such as IE6, 7, and 8. IE browser.

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

DeleteLocal cookies. 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.

is used to control page zoom7b9c1004d60f017d4f660361350fa9ec
rendererSpecify how dual-core browsers render pages by default. 2e3560c4189039010106a5cc9f144b3a//Default webkit kernel3150f7dff6100b28b61e71c0f6b7edb6//Default IE compatibility mode< ;meta name="renderer" content="ie-stand">//Default IE standard modegeneratorDescribe the software used to create the websitec3e7fcb2feea10423ee86ce04431c3f3##revisedrobotsValue: all|none|index|noindex|follow|nofollow, default allcopyright9534d24a44aaadd968cc8415ff25df05
Value Description Example
author Annotation The author of the web page 3aa60acd2890f76fee63281f4f2502fc
keywords Page keywords, used for Indexed by search engines 384e82448bb052266930e965e4a834a3
description Page description, used for search engine inclusion f48b8861a4337d1aa2f6aaafa8aa7801
##viewport
PS: 360 browser supports

Revision time of web document 22a830f876b57120caed112cf1a19f36
is used to tell the search robot which pages need to be indexed and which pages do not need to be indexed. f096ca23467acc0c49d4be72525ecad0

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.

Website copyright information

Summary

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

【Related recommendations】

1.

Html free video tutorial

2. Share an integration of HTML knowledge points

3. Solution to various situations where divs are covered by iframes

4. Teach you how to insert links in html

5. Teach you how to parse html under nodejs

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn