HTML <meta> name 属性

HTML <meta> 标签

定义和用法

name 属性规定元数据的名称。

name 属性规定的是 content 属性 的值的名称。

通过使用 name 和 content 属性，能够使用名/值对为文档定义元数据。其中，name 属性表示元数据的类型，而 content 属性用来提供值。

下面的表格列出了几种预定义的元数据类型。

注意：如果设置了 http-equiv 属性，则不应设置 name 属性。

提示：HTML5 引入了一种方法，让网页设计人员通过 <meta> 标签控制视口（网页的用户可见区域）（请参见下面的“设置视口”实例）。

实例

使用 name 属性定义关于 HTML 文档的描述、关键字和作者。还要定义视口，来控制页面的尺寸和针对不同设备的缩放比例：

<head>
  <meta name="description" content="免费的 Web 教程">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="YK Investment">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

亲自试一试

语法

<meta name="value">

属性值

值 描述
application-name 规定页面代表的 Web 应用程序的名称。
author

规定文档作者的姓名。例如：

<meta name="author" content="YK Investment">
description

规定页面的描述。搜索引擎可以选择此描述来显示搜索结果。例如：

<meta name="description" content="免费的 Web 教程">
generator

规定用于生成文档的软件包之一（不用于手写页面）。例如：

<meta name="generator" content="FrontPage 4.0">
keywords

规定与页面相关的关键字列表，以逗号分隔。告知搜索引擎关于页面的内容。

提示：请始终规定关键字（搜索引擎需要对页面进行分类）。例如：

<meta name="keywords" content="HTML, meta tag, tag reference">
viewport 控制视口（网页的用户可见区域）。

说明

除了表中的六种预定义的元数据类型，还可以使用元数据扩展。访问此页面可获取一份时常更新的扩展清单：

http://wiki.whatwg.org/wiki/MetaExtensions

有些扩展用得较多，而另外一些则只有很窄的用途，几乎无人使用。robots 元数据显然属于前者。HTML 文档作者可以用它告诉搜索引擎该如何对待该文档。例如：

<meta name="robots" content="noindex">

这个元数据类型有三个大多数浏览器都认识的值：

  • noindex - 表示不要索引本页
  • noarchive - 表示不要将本页存档或缓存
  • nofollow - 表示不要顺着本页的链接继续搜索下去

可用的元数据扩展为数不多，开发者最好读读那份在线的清单，看看有哪些可用于自己的项目。

提示

要告诉搜索引擎如何对内容分类和分等级，过去最主要的手段就是使用 keywords 元数据。现在的搜索引擎对 keywords 元数据的重视程度已大不如前，这是因为它可以被滥用来制作页面内容与相关性的假象。创作者如何希望内容在搜索引擎眼里有所改观，最好的方法是使用它们自己提供的建议。大多数搜索引擎都提供了优化网页或整个网站的指南。

谷歌：搜索引擎优化 (SEO) 新手指南

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn

百度：百度搜索引擎优化指南

https://ziyuan.baidu.com/college/articleinfo?id=1346

设置视口

视口是网页的用户可见区域。它因设备而异 —— 它在手机上会比在电脑屏幕上小。

您应该在所有网页中包含以下 <meta> 元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它为浏览器提供了有关如何控制页面尺寸和缩放比例的说明。

width=device-width 部分设置页面的宽度，以跟随设备的屏幕宽度（因设备而异）。

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

这是一个没有视口元标记的网页示例，以及带有视口元标记的同一网页：



没有使用视口元标记


使用视口元标记


提示：如果您使用手机或平板电脑浏览此页面，您可以点击下面的两个链接来查看不同之处。

您可以在我们的响应式网页设计 - 视口教程中学到更多关于视口的内容。

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

HTML <meta> 标签