Summary and detailed explanation of meta tags in HTML

meta tag function

META tag is a key tag in the HTML tag HEAD area, which provides the document character set, Using basic information such as language and author, as well as setting keywords and web page levels, the biggest role is to be able to do searchengine 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:

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

Meta setting 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="">

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

Douyu homepage Meta settings:

meta tag function

The META tag is a key tag in the HEAD area of ​​HTML tags, providing basic information such as document character set, language, author, etc. Information, as well as the setting of keywords and web page levels, etc., are most useful for 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:

Meta settings on JD.com’s homepage:

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

Meta settings on 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="">

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

meta detailed explanation

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

variable

.

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.

Valuecontent-typeX -UA-CompatibleIE browserDTDexpiresrefresh## set-cookie the local cookie.

Description	Example
Set the character set used on the page		<meta http-equiv="content-Type" content="text/html; charset=utf-8"> When GB2312, it represents the description 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 UTF-8, it means the universal language encoding; PS: The html5 page is to directly use
Special tag for IE8, used to specify the IE8 browser to simulate the rendering method of a specific version of	, in order to solve some compatibility issues. <meta http-equiv="X-UA-Compatible" content="IE=7"> The above code tells the IE browser that regardless of whether the document standard is declared with	, IE8/9 will use the 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 use the highest version of IE to render the page. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 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 the user browses the web, they actually use the Google Chrome browser core, and Supports multiple versions of IE browsers such as IE6, 7, and 8.
Set the expiration time of the web page.	<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">	PS: GMT time format must be used
automatic Refresh and point to the new page.	<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">	PS: 2 means that the page will stay for 2 seconds and then jump to the following URL
If the web page expires, then automatically delete	<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">	PS: GMT time format must be used.
windows-target	强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用	<meta http-equiv="Window-target" content="_top">
cache-control	缓存机制	<meta http-equiv="cache-control" content="no-cache"> Public：指示响应可被任何缓存区缓存。 Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。 no-cache：指示请求或响应消息不能缓存。 no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。 min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。 max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

name

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

值	描述	例子
author	标注网页的作者	<meta name="author" content="dashen" />
keywords	页面关键词，用于被搜索引擎收录	<meta name="keywords" content="新闻,新闻中心, 新闻频道">
description	页面描述，用于搜索引擎收录	<meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
viewport	用于控制页面缩放	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
renderer	指定双核浏览器默认以何种方式渲染页面。	<meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-comp">//默认IE兼容模式 <meta name="renderer" content="ie-stand">//默认IE标准模式 PS：360浏览器支持
generator	说明网站的采用的什么软件制作	<meta name="generator" content="Microsoft"/>
revised	网页文档的修改时间	<meta name="revised" content="设计网, 6/24/2015"/>
robots	用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。	<meta name="robots" content="none"/> 取值：all|none|index|noindex|follow|nofollow, 默认all all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询； nofollow：文件将不被检索，页面上的链接可以被查询。
copyright	网站版权信息	<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" /> The above is the detailed content of Summary and detailed explanation 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 Hot AI Tools Undresser.AI Undress AI-powered app for creating realistic nude photos AI Clothes Remover Online AI tool for removing clothes from photos. Undress AI Tool Undress images for free Clothoff.io AI clothes remover Video Face Swap Swap faces in any video effortlessly with our completely free AI face swap tool! Show More Hot Article Assassin's Creed Shadows: Seashell Riddle Solution 1 months ago By DDD What's New in Windows 11 KB5054979 & How to Fix Update Issues 3 weeks ago By DDD Where to find the Crane Control Keycard in Atomfall 1 months ago By DDD How to fix KB5055523 fails to install in Windows 11? 2 weeks ago By DDD InZoi: How To Apply To School And University 3 weeks ago By DDD Show More Hot Tools Notepad++7.3.1 Easy-to-use and free code editor SublimeText3 Chinese version Chinese version, very easy to use Zend Studio 13.0.1 Powerful PHP integrated development environment Dreamweaver CS6 Visual web development tools SublimeText3 Mac version God-level code editing software (SublimeText3) Show More Hot Topics Where is the login entrance for gmail email? 7749 15 Java Tutorial 1643 14 CakePHP Tutorial 1397 52 Laravel Tutorial 1291 25 PHP Tutorial 1234 29 Show More Related knowledge Table Border in HTML Sep 04, 2024 pm 04:49 PM Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML. Nested Table in HTML Sep 04, 2024 pm 04:49 PM This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples. HTML margin-left Sep 04, 2024 pm 04:48 PM Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation. HTML Table Layout Sep 04, 2024 pm 04:54 PM Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail. HTML Input Placeholder Sep 04, 2024 pm 04:54 PM Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs. HTML Ordered List Sep 04, 2024 pm 04:43 PM Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively Moving Text in HTML Sep 04, 2024 pm 04:45 PM Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement. HTML onclick Button Sep 04, 2024 pm 04:49 PM Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively. See all articles Public welfare online PHP training，Help PHP learners grow quickly！ About us Disclaimer Sitemap © php.cn All rights reserved