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

Detailed explanation of examples of meta tags in html

Y2J
Release: 2017-05-23 09:49:00
Original
2515 people have browsed it

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. <
  3. 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!"><

  4. 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】

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!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template