HTML <meta> name 属性
定义和用法
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
百度：百度搜索引擎优化指南
设置视口
视口是网页的用户可见区域。它因设备而异 —— 它在手机上会比在电脑屏幕上小。
您应该在所有网页中包含以下 <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 |
| 支持 | 支持 | 支持 | 支持 | 支持 |