Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > body text

Summary and detailed explanation of meta tags in HTML

黄舟
Release： 2017-05-27 14:36:45
Original
2421 people have browsed it

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,相机,数码,配件,手表,存储卡,京东">
Copy after login
Copy after login

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="">
Copy after login
Copy after login

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

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,相机,数码,配件,手表,存储卡,京东">
Copy after login
Copy after login

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="">
Copy after login
Copy after login

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

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.
DescriptionExample
Set the character set used on the page


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


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">
Copy after login
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">
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 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">
Copy after login


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">
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, then automatically delete 
<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.

windows-target强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用


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


cache-control缓存机制
<meta http-equiv="cache-control" content="no-cache">
Copy after login


Public：指示响应可被任何缓存区缓存。

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用于控制页面缩放
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1, user-scalable=no">
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

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!

Related labels：
HTML，meta
source：php.cn
Previous article：Detailed introduction to HTML code reuse practices Next article：Detailed introduction to implementing logo.ico in html web pages
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