mata标签

作者：小程序媛
链接：https://www.zhihu.com/question/584255083/answer/2965907153
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 

HTML中的<meta>标签用于提供有关文档的元数据（metadata），它们不会在页面上显示出来，而是提供有关页面的信息，使搜索引擎和浏览器能够更好地理解和使用文档。下面是一些常见的用途：

1、指定文档的字符集

通过<meta>标签的charset属性可以指定文档的字符集，这有助于浏览器正确地解析和显示文档。例如，指定UTF-8编码的元标记如下所示：

<meta charset="UTF-8">

2、描述文档的内容

使用<meta>标签的description属性可以提供一个简短的描述文档内容的摘要。这对于搜索引擎和社交媒体分享非常有用。例如：

<meta name="description" content="这是一个前端教程，介绍了HTML、CSS和JavaScript的基本知识。">

3、指定搜索引擎的关键词

通过<meta>标签的keywords属性，您可以提供一个逗号分隔的关键词列表，以描述文档的主题。然而，这个属性已经过时了，大多数搜索引擎已经不再使用它。例如：

<meta name="keywords" content="前端, HTML, CSS, JavaScript">

4、防止浏览器缓存页面

通过在<meta>标签中设置HTTP-equiv属性为"Cache-Control"，可以指示浏览器不要缓存页面。例如：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

5、指定文档的作者和版权信息

通过<meta>标签的author和copyright属性，您可以提供文档的作者和版权信息。例如：

<meta name="author" content="John Doe">
<meta name="copyright" content="Copyright © John Doe">

6、设置视口（Viewport）大小

通过在<meta>标签中设置viewport属性，可以指定视口的大小和缩放级别。这对于响应式网站设计非常重要，可以确保网站在各种设备上正常显示。例如：

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

7、指定网页的语言

通过在<meta>标签中设置lang属性，可以指定网页所使用的语言。这对于多语言网站非常重要，可以让搜索引擎正确地索引网页。例如：

<meta http-equiv="Content-Language" content="zh-CN">

8、指定搜索引擎的索引方式

通过在<meta>标签中设置robots属性，可以指定搜索引擎对网页的索引方式。例如：

<meta name="robots" content="index, follow">

其中，index表示允许搜索引擎索引该网页，follow表示允许搜索引擎跟踪该网页上的链接。

9、指定网页的重定向

通过在<meta>标签中设置http-equiv属性为"refresh"，可以指定网页的重定向时间和目标地址。例如：

<meta http-equiv="refresh" content="5;url=https://www.example.com">

其中，5表示重定向的延迟时间为5秒，url表示重定向的目标地址。

10、指定网页的作者

通过在<meta>标签中设置author属性，可以指定网页的作者。例如：

<meta name="author" content="John Doe">