跳到主要内容

HTML meta 标签常见属性

· 阅读需 2 分钟
素明诚
素明诚
Full stack development

HTML meta 标签可以用来提供关于 HTML 文档的元数据（metadata），即数据的数据，可以包含文档的描述、作者、关键字、编码方式、是否重新加载等等信息，有助于浏览器正确地显示页面内容，提高 SEO 优化、跨平台分享等效果。

下面是一些常见的 meta 标签及其作用：

  1. <meta name="description" content="网页描述">：指定网页的描述信息，有助于搜索引擎正确地显示搜索结果。
  2. <meta charset="UTF-8">：指定文档的字符集编码方式。
width=device-width——将页面宽度设置为跟随屏幕宽度变化而变化
initial-scale=1.0——设置浏览器首次加载页面时的初始缩放比例(0.0-10.0正数)
maximum-scale=1.0——允许用户缩放的最大比例(0.0-10.0正数)，必须大于等于minimum-scale
minimum-scale=1.0——允许用户缩放的最小比例(0.0-10.0正数)，必须小于等于maximum-scale
user-scalable=no——是否允许用户手动缩放(yes或者no)
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">：指定移动设备的视口（viewport）大小，有助于页面在不同设备上展示更好的效果。
  2. <meta name="keywords" content="关键词1,关键词2,关键词3">：指定网页的关键词，有助于搜索引擎正确地理解页面内容。
  3. <meta http-equiv="refresh" content="5;url=https://www.example.com/">：指定页面的刷新和跳转，可以在指定的时间内自动跳转到其他页面。
  4. <meta name="robots" content="index,follow">：指定搜索引擎的抓取行为，如何索引页面内容。
  5. <meta name="author" content="作者名称">：指定网页作者的名称。
  6. <meta http-equiv="Cache-Control" content="no-transform">的作用是告诉浏览器不要对页面内容进行转换，例如压缩、编码转换等，这样可以保证页面内容不被改变。这个标签的 content 属性的值是 no-transform，表示不进行转换。
  7. <meta http-equiv="Cache-Control" content="no-siteapp">的作用是告诉搜索引擎和浏览器不要将页面转换为移动应用的展示方式。这个标签的 content 属性的值是 no-siteapp，表示不要展示为移动应用。

除了上面列举的几个 meta 标签，还有很多其他的 meta 标签可以用来提供不同的元数据信息。