Detailed explanation of examples of meta tags in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed explanation of examples of meta tags in html

Y2J

May 23, 2017 am 09:49 AM

html meta Label

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

meta charset="gbk">
meta name="description" content="Jingdong JD.COM-Professional comprehensive The online shopping mall sells tens of thousands of brands of 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!"><
meta name="Keywords" content="Online shopping, online shopping mall, mobile phone, notebook, computer, MP3, CD, VCD, DV, camera, digital, accessories, watch, memory card, Jingdong">Meta 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="">

Copy after login

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="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />

Copy after login

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等各类热门游戏赛事直播和各种名家大神游戏直播，内容丰富，推送及时，带给你不一样的视听体验，一切尽在斗鱼 - 全民直播平台。" />

Copy after login

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" />

Copy after login

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" />

Copy after login

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. refresh to automatically refresh and point to the new page. set-cookieIf the web page expires, then automatically 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

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
When		UTF-8 , represents the world's universal language encoding; PS: The method for html5 pages is to directly use
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.	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. 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 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 zoommaximum-scale=1, minimum-scale=1, user-scalable=no">
rendererSpecify how dual-core browsers render pages by default. //Default webkit kernel//Default IE compatibility mode< ;meta name="renderer" content="ie-stand">//Default IE standard modegeneratorDescribe the software used to create the website##revisedrobotsValue: all|none|index|noindex|follow|nofollow, default allcopyright

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
		PS: 360 browser supports

Revision time of web document
is used to tell the search robot which pages need to be indexed and which pages do not need to be indexed.		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】

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 of this Website

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