Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > HTML Tutorial > Detailed explanation of the use of meta tags in html

Detailed explanation of the use of meta tags in html

黄舟
Release： 2017-06-29 13:27:28
Original
1944 people have browsed it

Meta tag function

The META tag is an important tag in the HEAD area of ​​the HTML markup, providing the documentCharacter set, use language, author and other basic information, as well as the settings of keywords and web page levels, etc., the biggest role is to be able to do 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:

Jingdong homepage Meta settings: 

<meta charset="gbk">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
Copy after login


## Meta settings of Taobao homepage: 

<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: 

<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 for Douyu homepage ：

<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 of Tencent homepage: 

<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 on the home page of Qidian Novel Network: 

<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 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 content correctly.

ValueDescriptionExamplecontent-typeSet the character set used on the pageX-UA-CompatibleSpecial tag for IE8, used to specify the IE8 browser to simulate a certain A specific version of the expiresSet the expiration time of the web page. refreshautomatic Refresh and point to the new page. ## set-cookiewindows-targetcache-control


<meta http-equiv="content-Type" content="text/html; charset=utf-8">
Copy after login

When GB2312 is used, it means that the encoding used by the website is Simplified Chinese;

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

UTF-8, it means the universal language encoding;

PS: The method of html5 page is to directly use

IE browser rendering method to solve some compatibility issues. 


<meta http-equiv="X-UA-Compatible" content="IE=7">
Copy after login
The above code tells the IE browser that IE8/9 will use the IE7 engine to render the page regardless of whether a DTD is used to declare the document standard. 



<meta http-equiv="X-UA-Compatible" content="IE=8">
Copy after login
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">
Copy after login
The above code tells the IE browser that IE8/9 and later versions will use the highest version of IE to render the page. 



<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Copy after login

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 users browse the web, they actually use the Google Chrome browser core, and supports IE6, 7, 8 and other versions of IE browser. 


<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
Copy after login

PS: GMT time format must be used


<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
Copy after login

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

If the web page expires, the local cookie will be automatically deleted. 

<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
Copy after login

PS: GMT time format must be used.

Forcing 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 others

<meta http-equiv="Window-target" content="_top">
Copy after login

caching mechanism

<meta http-equiv="cache-control" content="no-cache">
Copy after login

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

Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。

no-cache：指示请求或响应消息不能缓存。

no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。

min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

name

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

值描述例子
author标注网页的作者


<meta name="author" content="dashen" />
Copy after login
keywords页面关键词，用于被搜索引擎收录


<meta name="keywords" content="新闻,新闻中心, 新闻频道">
Copy after login
description页面描述，用于搜索引擎收录


<meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
Copy after login
viewport用于控制页面缩放


<p style="margin-bottom: 65px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1, <br/>maximum-scale=1, minimum-scale=1, user-scalable=no"</span><span style="color: #0000ff;">></span></p>
Copy after login
renderer指定双核浏览器默认以何种方式渲染页面。


<meta name="renderer" content="webkit">//默认webkit内核<meta name="renderer" content="ie-comp">//默认IE兼容模式<meta name="renderer" content="ie-stand">//默认IE标准模式
Copy after login

PS：360浏览器支持

generator说明网站的采用的什么软件制作


<meta name="generator" content="Microsoft"/>
Copy after login
revised网页文档的修改时间


<meta name="revised" content="设计网, 6/24/2015"/>
Copy after login
robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。


<meta name="robots" content="none"/>
Copy after login

取值：all|none|index|noindex|follow|nofollow, 默认all

all：文件将被检索，且页面上的链接可以被查询；

none：文件将不被检索，且页面上的链接不可以被查询；

index：文件将被检索；

follow：页面上的链接可以被查询；

noindex：文件将不被检索，但页面上的链接可以被查询；

nofollow：文件将不被检索，页面上的链接可以被查询。

copyright网站版权信息


<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />
Copy after login

 

 

总结

通过大网站对于meta的设置，可以看到常用的有，X-UA-Compatible、keywords、description。

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

Related labels：
html meta Detailed explanation
source：php.cn
Previous article：The use and definition of tag in HTML5 Next article：Detailed explanation of the role of meta tags in html
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
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved