Alexgogoing

meta标签详解

html
字数统计: 1.9k阅读时长: 8 min
2021/06/10 Share

meta 标签详解

对于meta的理解一直很模糊，今天做一个详细拆解

定义

<meta>元素提供有关页面元信息，比如针对搜索引擎，提供关键词和更新频度。

<meta> 标签位于文档的头部，不包含任何内容。

<meta> 标签的属性定义了与文档相关联的名称/值对。

在 HTML 中，<meta> 标签没有结束标签。
在 XHTML 中，<meta> 标签必须被正确地关闭。
注释：<meta> 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。

拆解

meta标签有以下属性：

  1. http-equiv（可选）
  2. name（可选）
  3. scheme（可选）
  4. content（必选，定义与 http-equiv 或 name 属性相关的元信息）
属性 值 描述
http-equiv content-type / expire / refresh / set-cookie 把content属性关联到HTTP头部
name author / description / keywords / generator / revised / others 把 content 属性关联到一个名称
scheme 任意字符 定义用于翻译 content 属性值的格式
属性 值 描述
http-equiv content-type / expire / refresh / set-cookie 把content属性关联到HTTP头部
content 任意字符 定义与 http-equiv 或 name 属性相关的元信息

实验

使用name

viewport(视窗大小)

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

1
2
3
4
5
6
7
<!-- width：宽度（数值 / device-width）（200~10000，默认为980px） -->
<!-- height：高度（数值 / device-height）（223~10000） -->
<!-- initial-scale：初始缩放比例 （0~10） -->
<!-- minimum-scale：允许用户缩放到的最小比例 -->
<!-- maximum-scale：允许用户缩放到的最大比例 -->
<!-- user-scalable：是否允许用户缩放 (no/yes) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

keywords(关键字)

keywords用来告诉搜索引擎你网页的关键字是什么。

1
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

description(网站内容描述)

description用来告诉搜索引擎你的网站主要内容。

1
<meta name="description" content="haorooms博客,html的meta总结，meta是html语言head区的一个辅助性标签。">

robots(爬虫向导)

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

1
2
3
4
5
6
7
8
9
<!-- 页面爬虫设置 -->
<meta name="robots" content="index,follow" />
<!-- robots的content取值 -->
<!-- all：文件将被检索，且页面上的链接可以被查询 -->
<!-- none：文件将不被检索，且页面上的链接不可以被查询 -->
<!-- index：文件将被检索 -->
<!-- follow：页面上的链接可以被查询 -->
<!-- noindex：文件将不被检索，但页面上的链接可以被查询 -->
<!-- nofollow：文件将被检索，但页面上的链接不可以被查询 -->

author(作者)

1
<meta name="author" content="root,root@xxxx.com">

generator

1
2
<!-- 页面生成器 -->
<meta name="generator" content="hexo" />
1
2
<!-- 版权信息 -->
<meta name="copyright" content="All Rights Reserved" />

revisit-after

revisit-after代表网站重访,7days代表7天，依此类推。

1
<meta name="revisit-after" content="7days">

revised

表示该网页文档最后修改的时间

1
2
<!-- 页面修改信息 -->
<meta name="revised" content="谁谁谁,2015/07/22" />

使用http-equiv

expires(期限)

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

1
2
<!-- 页面到期时间 -->
<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">

cache-control指定请求和响应遵循的缓存机制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下

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

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

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

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

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

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

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
-->
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />

pragma(cache模式)

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

1
2
<!-- 禁止从本地缓存中读取页面 -->
<meta http-equiv="pragma" content="no-cache">

refresh(刷新)

说明：自动刷新并指向新页面。

1
2
<!-- 页面重刷新，0秒后刷新并跳转 -->
<meta http-equiv="refresh" content="0,URL='https://www.baidu.com'" />

说明：如果网页过期，那么存盘的cookie将被删除。

1
2
<!-- cookie设置 -->
<meta http-equiv="set-cookie" content="cookiename value=xxx;expires=Wed,22-Jul-201511:11:11GMT；path=/" />

content-type(显示字符集的设定)

说明：设定页面使用的字符集。

1
2
3
4
<!-- 字符编码 -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<!-- 上面在html5中可以改写成：-->
<meta charset="utf-8" />

window-target(显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。

1
<meta http-equiv="window-target" content="_top">

content-language

1
<meta http-equiv="content-language" content="zh-cn"/>

imagetoolbar

指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

1
<meta http-equiv="imagetoolbar" content="false"/>

content-script-type

1
2
<!-- 指定脚本类型 -->
<meta http-equiv="content-script-type" content="text/javascript">

手机端常用设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- uc强制竖屏 portrait 竖向-->
<meta name="screen-orientation" content="portrait"/>
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait"/>
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes"/>
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true"/>
<!-- UC应用模式 -->
<meta name="browsermode" content="application"/>
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app"/>
<!-- IOS启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- IOS全屏模式下隐藏状态栏/设置状态栏颜色 content的值为default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- IOS添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="标题"/>
<!-- IOS添加智能 App 广告条 Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 去除iphone 识别数字为号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 不识别邮箱 -->
<meta name="format-detection" content="email=no">
<!-- 禁止跳转至地图 -->
<meta name="format-detection" content="address=no">
<!-- 可以连写-->
<meta name="format-detection" content="telephone=no,email=no,address=no">

原文作者：alexgogoing

原文链接：https://alexgogoing.github.io/2021/06/10/meta标签详解/

发表日期：June 10th 2021, 12:05:24 pm

更新日期：June 10th 2021, 10:20:35 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. meta 标签详解
    1. 1.1. 定义
    2. 1.2. 拆解
    3. 1.3. 实验
      1. 1.3.1. 使用name
        1. 1.3.1.1. viewport(视窗大小)
        2. 1.3.1.2. keywords(关键字)
        3. 1.3.1.3. description(网站内容描述)
        4. 1.3.1.4. robots(爬虫向导)
        5. 1.3.1.5. author(作者)
        6. 1.3.1.6. generator
        7. 1.3.1.7. copyright
        8. 1.3.1.8. revisit-after
        9. 1.3.1.9. revised
      2. 1.3.2. 使用http-equiv
        1. 1.3.2.1. expires(期限)
        2. 1.3.2.2. cache-control指定请求和响应遵循的缓存机制
        3. 1.3.2.3. pragma(cache模式)
        4. 1.3.2.4. refresh(刷新)
        5. 1.3.2.5. set-cookie(cookie设定)
        6. 1.3.2.6. content-type(显示字符集的设定)
        7. 1.3.2.7. window-target(显示窗口的设定)
        8. 1.3.2.8. content-language
        9. 1.3.2.9. imagetoolbar
        10. 1.3.2.10. content-script-type
      3. 1.3.3. 手机端常用设置
Total : 17
2022
2021
2020
2019
html css 布局 算法 javascript 奇技 web 性能优化