【持续更新】<meta>元素用法大全

“万金油”元素：<meta>

<meta>标签在HTML5中扮演着极其重要的角色，没有深究过它的人根本无法想象这个元素所包含的规则和细节多么庞杂、涵盖的内容多么丰富。其中不仅有标准特性，甚至还有一大堆私有特性，这怕是几万字都讲不清楚！

而之所以说这个元素是“万金油”，是因为：用name属性定义一个新的类型，用content属性写一下规则，一个全新的浏览器特性就诞生了！！！是的，就是这么随意，就是这么简单。

因此，<meta>元素的应用范围覆盖SEO、交互、安全等等等等各种领域，了解它可以说有极大的性价比。

话不多说，下面列举一些常用的<meta>元素用法。（Tip:你可以通过目录快速检索你感兴趣的条目）

下面的内容都是作者在网上搜罗的，如有错误请在评论区指出，我会及时修改；如果你知道什么文章里没有提到的<meta>>元素用法，请在评论区告诉我！感谢支持！>>>直达评论区<<<（看不到评论区请刷新一下页面）

1. 字符编码

定义文档的字符编码，通常使用UTF-8。

1
<meta charset="UTF-8">

字符编码是文档的唯一有效编码，必须位于文档的前1024个字节内。

2. 视口设置

控制视口的尺寸和缩放，对于响应式设计至关重要。

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

视口设置包括width、initial-scale、minimum-scale、maximum-scale和user-scalable等属性。

3. 页面描述

提供网页内容的简短描述，影响搜索引擎结果页面的展示。

1
<meta name="description" content="这里是页面的描述内容">

页面描述通常用于搜索引擎结果的摘要部分。

4. 关键词

列出与页面内容相关的关键词。

1
<meta name="keywords" content="关键词1, 关键词2, 关键词3">

关键词有助于搜索引擎优化，但不应过度堆砌。

5. 作者信息

定义文档的作者。

1
<meta name="author" content="作者名字">

作者信息有助于识别文档的创作者。

6. 生成工具

标识生成页面的软件或工具。

1
<meta name="generator" content="生成工具名称">

生成工具信息有助于了解页面是由哪个平台或工具生成。

7. 控制机器人

指导搜索引擎机器人如何索引页面。

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

robots属性可以是all, none, index, noindex, follow, nofollow等。

8. 短链接

定义页面的短链接。

1
<meta name="shortlink" content="短链接地址">

短链接有助于简化URL，方便分享和引用。

9. 缓存控制

控制页面的缓存行为。

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

缓存控制可以是no-cache, no-store, must-revalidate, public, private等。

10. 自动刷新

设置页面自动刷新的时间间隔。

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

页面可以在指定的秒数后重新加载或跳转到另一个URL。

11. SEO优化

标签在SEO优化中非常重要，以下是一些关键点：
  1. 字符编码：<meta charset="UTF-8">
  2. 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">
  3. 页面描述：<meta name="description" content="简短描述页面内容"
  4. 关键词：<meta name="keywords" content="关键词1, 关键词2, 关键词3"
  5. 作者：<meta name="author" content="作者名字"
  6. 生成工具：<meta name="generator" content="生成工具名称"
  7. 控制机器人：<meta name="robots" content="index, follow"
  8. 短链接：<meta name="shortlink" content="短链接地址"
  9. 缓存控制：<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">。

12. Open Graph (OG) 标签

用于社交分享时的元数据，以下是一些常用的OG标签：

  1. <meta property="og:title" content="页面标题">
  2. <meta property="og:description" content="页面描述">
  3. <meta property="og:image" content="图片URL">
  4. <meta property="og:url" content="页面URL">
  5. <meta property="og:type" content="website">。

13. Twitter Cards

用于Twitter分享的元数据。

1
2
3
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="图片URL">

Twitter Cards提供了页面在Twitter上分享时的丰富摘要。

14. 移动优化

  1. <meta name="apple-mobile-web-app-capable" content="yes">：告诉Safari浏览器该页面可以作为一个全屏的Web应用程序运行。
  2. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">：设置iOS设备上Safari浏览器的状态栏颜色。
  3. <meta name="theme-color" content="#ff0000">：设置Web应用的主题颜色，用于Android Chrome的工具栏颜色。

以上就是<meta>元素的常见用法和注意事项，正确使用这些标签可以大幅提升网页的SEO表现和用户体验。

参考资料：

  1. 《HTML并不简单：Web前端开发精进秘籍》 2024年7月 张鑫旭 电子工业出版社
直达评论区