1. 什么是<meta>标签？
在 HTML 中，<meta>标签是用于在文件头部描述文档属性的标签。
它不会在页面上展示任何内容，而是提供了关于文档的元数据信息，帮助搜索引擎更好的理解页面的内容。其中包括：
网站的关键词
作者
字符编码
页面描述
视口设置
等等
1.1 基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
在这个例子中，我们定义了文档的字符编码为 UTF-8，并且添加了一个视口设置的 标签，用于移动端设备的显示。
1.2 设置编码和语言
标签可以用来设置编码和语言，让浏览器正确地显示页面的内容。
对于中国网站，一定要使用UTF-8编码，否则会出现中文乱码的问题。
<meta charset="UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
其中，charset属性用来设置编码方式，而 http-equiv属性用来设置与 HTTP 协议有关的内容，例如语言。
1.3 页面描述和关键词
使用 标签，您可以提供有关页面内容的描述和关键词信息。这些信息有助于搜索引擎更好地了解页面内容，并在搜索时更准确地匹配相关内容。
<meta name="description" content="这是一个网页描述">
<meta name="keywords" content="关键词1,关键词2">
在以上代码中，我们使用 name属性来定义信息的名称，content属性来指定具体的内容。
1.4 设置视口
标签还可以用来指定在移动设备上正确显示网站内容的视口。如果没有指定视口，移动设备将使用默认值，可能会导致页面排版混乱。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在这个例子中，我们指定了视口的宽度为设备宽度，初始缩放比例为 1.0。
2. 常用的标签
2.1 robots
robots标签指示搜索引擎是否可以索引页面，并跟随页面上的链接。当需要控制搜索引擎或网络蜘蛛访问页面，并限制页面内容的索引时，可以使用此标签。
<meta name="robots" content="noindex, nofollow">
在以上代码中，noindex指示搜索引擎不索引此页面，nofollow指示搜索引擎不跟随页面上的链接。
2.2 og
og标签是 Open Graph 协议的缩写。它可以帮助社交平台正确地解析网站上的信息，使分享的链接在平台上显示的更加完美。在使用 og 标签时，我们为分享链接定义一个标题、描述、图像等信息。
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="image.jpg">
2.3 theme-color
theme-color标签可以为移动设备的浏览器设置主题颜色。主题颜色在 Android 系统的任务管理器和浏览器首页中有显示，可以让您的网站有更加一致的品牌展示。
<meta name="theme-color" content="#4285F4">
在这个例子中，我们将主题颜色设置为 Google 的品牌蓝色。
3. 总结
标签是 HTML 中非常重要的一个元素。通过设置字符编码、页面描述、关键词、视口等信息，可以让浏览器和搜索引擎更好地理解页面内容，并对页面进行优化和展示。此外，标签还可以帮助社交平台完美的展示分享链接。请在页面头部使用合适的标签，让您的网站更加专业和高效。