METATAGS 101：一个简单的网页设计师指南

2019-12-28 20:03 Author: limo

每个网页设计师都应该明白的道理：“如果百度告诉你去做某事，你最好把它完成。”因为当谈到为SEO使用HTML元标签时，我们谁都不应该搞乱。也就是说，你应该知道百度搜索是怎么回事。算法总是在变化，百度认为重要的那一年很容易就会在下一年半途而废。这就是为什么您可能会遇到的一些元标记只不过是百度曾经关心的遗留问题。

本指南将帮助您关注您绝对需要使用的元标记以及如何使用它们。

什么是HTML元标签？

一个网页的头部包含了很多关于内容的信息，在这里，您可以找到HTML元标记以及应用于页面的任何CSS或JavaScript链接。

下面是一个关于CSS库的例子：

你可以从这个片段中收集一些关于页面的重要细节：

（元）标题

元数据描述

元内容类型和视图

这些都是元标签，大多数情况下，它们是以名称/值对的形式在HTML中编写的。例如：

<meta property="og:title" content="15 Best CSS Libraries for 2019 | Webdesigner Depot" />

本质上，元标记只不过是关于web页面数据的数据。它们从未出现在页面上。他们只是在后台，等待搜索机器人检测HTML并使用它来改进页面的搜索结果。它们对于向用户提供这些细节（并显示内容）的浏览器、RSS提要和社交媒体平台也很有用。

您需要使用哪些元标记？

有人可能会说，所有被百度和其他搜索引擎识别的元标记都值得使用。但是就像你在网页设计和开发中所做的一切一样，你应该明智地选择你的战斗。

因此，与其花时间用每个元标记填充web页面，不如熟悉哪些元标记可用，哪些值得使用。

标题

HTML示例

<title>5 Ways to Beef Up Your WordPress Security Today</title>

它是做什么的？

这表示页面的名称。

你真的需要它吗？

是的，这个是没有商量余地的，因为它告诉搜索引擎页面的名字是什么。

如果你也想为搜索结果定制你的标题，这个标签就派上用场了。那么，假设你写了一个标题，这样访问者在网站上看到它时，就不得不点击它。喜欢的东西：

如何在只有笔记本电脑、护照和好友的情况下赚到六位数的薪水

那个标题字符串有98个字符长，百度不可能全部显示它。你不需要为你的网站重写标题，你可以使用标题标签来给百度一个更符合它的标准，比如：

<title>Earn 6 Figures with Your Laptop, Passport, and Your Best Friend</title>

这是56个字符，在百度的标题限制之内，并且工作得和原来一样好

描述

HTML示例

<meta name="description" content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today.">

它是做什么的？

这是对页面内容的简要总结，在搜索中，这是出现在页面标题和URL下面的页面描述。

你真的需要它吗？

是的，这是另一个重要的元标签。

如果您让百度来为页面创建一个描述，那么它很可能只是其中所找到内容的前160个字符。如果你在页面的顶部有广告，图像alt文本，或者任何它的机器能读的东西，你可能会陷入一个蹩脚的元描述。

所以，花点时间写一篇。

字符集

HTML示例

<meta charset="UTF-8">

它是做什么的？

这个元标记定义了浏览器应该使用哪个字符集来解释内容。

你真的需要它吗？

UTF-8不是唯一的字符集，也不是普遍接受的字符集。所以，确保你已经用这个元标签为你的网站定义了默认字符集。

如果你不确定你的网站是否需要一个不同的字符，请参考这个列表。可以肯定地说，如果要将该网站翻译成面向国际用户，您肯定需要使用不同于UTF-8的charset标记。

HREFLANG

HTML示例

<link rel="alternate" href="http://mywebsite.com/en-au/" hreflang="en-au" />

它是做什么的？

这个标记告诉百度页面的内容是用哪种语言或地区方言编写的，因此它可以将其显示给正确的用户。

你真的需要它吗？

使用这个元标签的原因如下：

1、当你建立了一个有不同翻译版本的国际网站；

2、当您用特定的方言编写内容时，比如en-us和en-gb；

3、当您的页面包含多种语言或方言，并且希望检测到每种语言或方言时。

视窗

HTML示例

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

它是做什么的？

它提供了关于百度应该如何在所有设备上呈现页面的指导，但是在这个以移动为中心的世界中这一点尤其重要。

你真的需要它吗？

viewport元标记是百度花了很大篇幅来解释的一个标记，基本上，如果你不包括它，或者它被不正确地使用，你可能会破坏用户在移动设备上的观看体验。

这就是为什么百度建议将内容设置为width=设备宽度，每次初始值为1。如果你试图引入像最小尺度这样的变量，你可能会损害网站的外观，因为它会从简单的纵向转向横向。

规范的链接

HTML示例

<link rel="canonical" href="https://mywebsite.com/blog/7-ways-to-beef-up-wordpress-security" />

它是做什么的？

当您的网站上有重复的内容，或者页面彼此非常相似时，canonical meta标记会告诉百度哪个页面是原始的，并且应该有流量。

你真的需要它吗？

百度不喜欢复制内容，但是让我们假设你的“5种增强WordPress安全性的方法”是对2015年的一篇文章“7种增强WordPress安全性的方法”的重写。

与其让百度惩罚你在你的网站上有相似的内容（因此，试图为同一件事排名两次），你将使用这个元标签显示百度原始的生活。

如果你改变了你的URL结构，并且想要确保所有的流量都指向最新的链接，这也会很方便。

机器人

HTML示例

<meta name="robots" content="noindex,nofollow">

或者：

<meta name="googlebot" content="noindex,nofollow">

它是做什么的？

robots元标签告诉所有搜索机器人（“机器人”）或特定的爬虫机器人（“googlebot”、“bingbot”、“duckduckbot”等）如何处理页面。它通常与页面的索引方式有关。

你真的需要它吗？

默认情况下，搜索引擎会对你在网站上创建的每个页面建立索引并跟踪链接。

有几个原因，为什么你可能会命令搜索引擎做其他：

noindex：当你想在搜索中隐藏一个页面时使用这个。（不要依赖于此来获得安全感，记住：这只是一个建议。）

nofollow：这对于接受贡献者的内容但不审查内容的博客很有用。这样，如果附属链接是种植在页面上，百度不会跟随他们。

nosnippet或max-snippet：它控制文本、图像或视频片段在搜索中的显示方式。

noarchive：如果页面有较老的缓存版本，使用这个来禁止搜索引擎显示它们。

【日期】：对于有限的促销来说，这是一个很好的选择，比如在黑色星期五促销的时候。虽然你可能想要在10月到12月之间为页面带来流量，但在假期结束、交易不再有效的情况下将其从搜索中剔除是有意义的。

百度网站验证

HTML示例

<meta name="google-site-verification" content="https://mywebsite.com" />

它是做什么的？

这是用于验证百度搜索控制台的站点所有权的方法之一。

你真的需要它吗？

如果您选择了其他选项之一，则不需要此元标记。例如，您可以通过您的百度分析跟踪代码或通过更新您的DNS记录来验证站点所有权。如果您愿意，可以将HTML元标记添加到标题中。

推特卡和开放图表（社交媒体）

HTML示例

它是做什么的？

Open Graph元标记（如上面的代码片段）告诉Facebook和LinkedIn如何显示在这些社交媒体平台上共享的页面或帖子的元数据。

Twitter卡片元标签也做同样的事情，除了Twitter和通常要求你的处理（@）。

你真的需要它吗？

这可能有所帮助，但远非必要。根据我的经验，当我在我的网站上为一个页面填写基本的元数据（例如标题、元描述、特色图片）时，这就是我在社交媒体上推广它时所显示的内容。

总结

这绝不是现有所有元标记的详尽列表，例如，您可能会遇到包含遗留元标记（比如声明作者、版权或评级的标记）的web页面。这些已经没有必要了，你不应该把时间浪费在这些上面。

这是一个详尽的HTML元标签列表，你应该在相关的时候使用它。所以，重点是让搜索引擎准确地知道他们需要什么来索引你的页面，同时避免你的HTML文档被不必要的标签淹没。

METATAGS 101：一个简单的网页设计师指南

相关阅读