什么是 HTML 元标记以及它们的用途是什么？

0 Shares

除了网页的标题以及所使用的脚本和样式表外，HTML文档的头部（<head>部分）还可以包含元标签。这些元标签对于搜索引擎优化（SEO）、网页的可访问性和网站的整体性能至关重要。

理解如何有效利用元标签，以及它们可以提供哪些信息至关重要。

元标签本质上是用于提供关于网页附加信息的元素。尽管浏览器通常不会直接展示这些元数据，但任何工具都可以利用它们实现各种目的，包括搜索引擎、浏览器和其他网络服务。

通过元标签提供的数据有助于提升在搜索引擎中的排名，同时也有助于提高网站的响应速度和可访问性，并优化页面在社交媒体上的显示效果。

元标签是自闭合标签，不需要结尾标签（</meta>），因为它们不包含任何内容。所有数据都包含在其属性中。可以将元标签添加到HTML文件的头部部分，如下所示：

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

在这个简单的HTML模板中，头部部分包含了两个元标签。它们分别提供了关于字符集（UTF-8）和视口的信息。

大多数元标签都通过以下属性的组合来包含它们的数据：

name和content：name属性类似于标签，而content属性存储与该标签关联的数据。这提供了一种灵活且可扩展的机制，可以存储任何需要的元数据。
property：这个属性有时会替代name使用，其目的基本相同。
http-equiv：代表“HTTP 等效”，这个属性用于为content属性中指定的值定义HTTP头部。
schema：此属性与name属性一同使用，用于定义content属性中的数据类型。

通常情况下，你会发现各种网络服务和浏览器都支持以下元标签：

描述元标签是一段不超过155个字符的简短摘要，概括了页面的内容。搜索引擎通常会将其显示在页面标题和URL下方。提供简洁准确的描述至关重要，它可以鼓励用户点击链接并访问页面。

<meta name="description" content="此处填写您的页面简短描述">

这些标签被Facebook和其他社交媒体平台广泛使用。当用户分享页面时，它们会利用这些标签中的信息来改进页面链接的呈现方式。开放图谱元标签包含诸如og:title、og:description和og:image等属性：

<meta property="og:title" content="您的页面标题">
<meta property="og:description" content="您的页面简短描述">
<meta property="og:image" content="相关图像的URL">

这些标签为搜索引擎提供信息，有助于提高页面的排名。它们也包含在基本的SEO最佳实践列表中，并包含诸如robots和author等属性。虽然这些标签的重要性随着时间的推移有所降低，但将它们包含在HTML文档中仍然很重要。

<meta name="robots" content="index, follow">
<meta name="author" content="您的姓名">

视口元标签是响应式网页设计的基本元素。它指示浏览器根据设备的宽度调整网页布局，确保内容正确显示并在移动设备上可读。

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

这些元标签对于控制浏览器和服务器如何处理网页的特定方面至关重要。它们包含诸如refresh和X-UA-Compatible等属性。尽管它们对SEO的直接影响可能不尽相同，但它们在影响页面行为和兼容性方面发挥着关键作用。

<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

在实际项目中，你可能不会同时使用所有这些标签，但充分了解可用的不同元标签仍然非常重要。此外，使用元标签还可以改善HTML文档的结构和组织性。

元标签之所以灵活，是因为：

以下是一个自定义元标签的例子：

<meta name="target-audience" content="developers">

在这个例子中，自定义标签指定了内容的目标受众为开发人员。

自定义元标签提供了一种扩展广泛认可的标准标签集的方法。但是，必须仔细记录你使用的自定义标签，并充分了解如何使用它们。默认情况下，其他服务不会使用或识别这些自定义标签，因此你可能需要在某个时候编写自己的代码来处理它们。