Metatags 101:设计师的简单指南

Suzanne Scacca. 经过 Suzanne Scacca.  |  2019年12月27日

我的生活中的一个,而且在业务中是这样的:“如果谷歌告诉你做某事,你最好完成它。”

当涉及使用HTML元标签的SEO时,我们均不应该搞乱。

也就是说,你知道它是如何用谷歌搜索的。该算法始终改变,谷歌认为重要一年的谷歌认为是下一步的方式。这就是为什么你可能遇到的一些元标签只不过是谷歌的遗产 用过的 to care about.

本指南将帮助您专注于您绝对需要使用的元标签以及与它们可以执行的操作。

 

什么是html元标签?

网页的头部包含有关在那里找到的内容的大量信息。这是您将找到您的HTML元标记以及适用于页面的任何CSS或JavaScript链接。

以下是最近WebDesigner Depot帖子的查找 CSS.图书馆:

WebDesigner Depot  -  HTML META标签

您可以从此代码段中收集有关该页面的一些重要细节:

  • (meta)标题
  • 元描述
  • 元内容类型和视口

这些都是所有元标签。大多数情况下,它们以HTML编写为名称/值对。例如

<meta property="og:title" content="2019年15个最佳CSS图书馆| WebDesigner仓库" />

基本上,元标签只不过是您网页数据的数据。他们从未出现在页面上。它们只是在后台,等待搜索机器人检测HTML并使用它来改进页面的搜索结果。它们对浏览器,RSS源和社交媒体平台也很有用,这些平台向用户提供这些详细信息(并将内容显示内容)。

 

您需要使用哪种元标签?

人们可以争辩说,谷歌和其他搜索引擎识别的所有元标签都值得使用。但就像你在网页设计和发展中所做的一切一样,你应该明智地选择你的战斗。

因此,而不是花费时间使用每个可能的元标签填充您的网页,熟悉哪些可用的标签,其中哪一个值得使用。

标题

HTML样本

<title>今天的5种方法可以让你的WordPress安全</title>

它有什么作用?

这表示页面的名称。

你真的需要吗?

是的,这是不可谈判的,因为它告诉搜索引擎页面的名称是什么。

如果您想专门针对搜索结果定制标题,此标签也有用。所以,让我们说你写了一个ClickBait标题,以便在网站上看到它的访问者被迫单击。就像是:

如何赚取六分之一的薪水,只不过是你的笔记本电脑,护照和你最好的朋友

这个标题字符串长度为98个字符,谷歌将完整显示它。而不是重写您网站的标题,您可以使用标题标记来为Google On提供更高的标准,例如:

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

这是谷歌的标题限制范围内的56个字符,并与原件一样

描述

HTML样本

<meta name="description" content="厌倦了在每小时的工资跑步机上运行?了解如何成为旅行作者和影响者,今天制作六位数薪水。">

W帽子做了吗?

这是一个简要摘要在页面上要找到的内容。在搜索中,这是页面标题和URL下方的页面描述。

你真的需要吗?

是的,这是另一个必需的元标签。

如果您将其留给谷歌来为页面进行描述,那么它将超过它在那里找到的前160个字符。如果您在页面顶部的广告,图像ALT文本或其他任何机器可以读取,则可能会陷入糟糕的元描述。

所以,花时间写一个。

字符集

HTML样本

<meta charset="utf-8">

它有什么作用?

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

你真的需要吗?

UTF-8不是唯一的字符集,也不是普遍接受的。因此,请确保您使用此元标记定义了您网站为您的网站设置的默认字符。

如果您的网站不确定,如果您的网站需要不同的角色, 请参阅此列表。如果要为国际受众翻译,则可以安全地说,如果要为国际观众翻译,那么您肯定需要使用不同的Charset标签而不是UTF-8。

Hreflang.

HTML样本

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

它有什么作用?

此标记告诉谷歌哪种语言或区域方言写入页面内容,因此它可以向合适的用户显示。

你真的需要吗?

使用此元标记有一些原因:

  1. 当您建立了具有不同翻译版的国际网站时;
  2. 当您在特定方言中写入内容时,就像 念头美国 vs. en-gb;
  3. 当您的页面包含一种语言或方言时,并且希望检测到每个语言。

视口

HTML样本

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

它有什么作用?

它提供了谷歌如何在所有设备上呈现页面的指示,但它在这个移动第一世界尤其重要。

你真的需要吗?

是的。视口元标记是一个 谷歌已经走到了很长的长度来解释。基本上,如果您不包含它,或者它被错误地使用,您可能会扰乱移动设备上用户的观看体验。

这就是为什么Google建议将内容设置为Width = Device-Width,每次初始标度= 1。如果您尝试介绍最小尺度等变量,则可以损害您网站的外观,因为它从像纵向方向转换为景观一样。

规范链接

HTML样本

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

它有什么作用?

当您的网站上有重复内容或与彼此非常相似的页面时,规范元标记会告诉谷歌是哪个页面是原始的,并且应该有流量驱动到它。

你真的需要吗?

谷歌并不需要重复的内容。但是,让我们说出你的“今天的5种方法,今天你的WordPress安全性”是一篇文章的重写,它从2015年开始了一个名为“7种方式的牛肉安全性的7种方式”。

而不是让Google惩罚您网站上有看法内容(因此,试图为同一件事进行两次),您将使用此元标记来显示原始生命的谷歌。

如果您更改了URL结构并希望确保所有流量进入最新的链接,这也会派上友好。

机器人

HTML样本

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

或者:

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

它有什么作用?

机器人元标签告诉所有搜索机器人(“机器人”)或特定的履带(“Googlebot”,“Bingbot”,“DuckduckBot”等)如何处理页面。它通常与页面如何索引。

你真的需要吗?

默认情况下,搜索引擎将在您的网站上创建的每个页面上的索引并遵循链接。

您可能会引导搜索引擎的原因有一些原因:

  • noindex: 当您想要隐藏搜索页面时使用此页面。 (不要依赖这一点的安全性,记住:这只是一个建议。)
  • nofollow: 这对于接受来自贡献者的内容但不验证内容的博客是有用的。这样,如果在页面上种植联盟链接,谷歌将不会遵循它们。
  • Nosnippet. 或者 max-snippet: 这控制了文本,图像或视频片段如何出现在搜索中。
  • 润垢: 如果页面的较旧的缓存版本,请使用此操作以禁止搜索引擎显示它们。
  • Unavailable_After:[日期]: 这是一个很好的促销活动,就像黑色星期五销售周围一样。虽然您可能想要从10月到12月到达页面的流量,但一旦假期完成,就可以将其退出搜索并且交易不再有效。

谷歌网站验证

HTML样本

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

它有什么作用?

这是您可以用于验证您的网站所有权的方法之一 谷歌搜索控制台.

你真的需要吗?

如果您选择了其中一个选项,则不需要此元标记。例如,您可以通过Google Analytics跟踪代码或更新DNS记录来验证站点所有权。如果您更愿意,您只需将HTML元标记添加到标题中。

推特卡和开放图(社交媒体)

HTML样本

<meta property="og:type" content="文章" /> <meta property="og:title" content="今天的5种方法可以让你的WordPress安全" /> <meta property=”og:description” content="厌倦了在每小时的工资跑步机上运行?了解如何成为旅行作者和影响者,今天制作六位数薪水。" /> <meta property="og:image" content="//mywebsite.com/media/wordpress-security-lock/" /> <meta property="og:url" content="//mywebsite.com/blog/5-ways-wordpress-security/" /> <meta property=”og:site_name” content="我的网站" />

它有什么作用?

打开图形元标签(如上面的片段)告诉Facebook和LinkedIn如何在社交媒体平台上显示页面或POST的元数据。

Twitter Card Meta标签是相同的,除了推特外,通常也要求您的句柄(@)。

你真的需要吗?

它可以提供帮助,但它远非必要。在我的网站上填写我网站上的页面的基本元数据时,当我填写基本元数据(即标题,元描述,特色图像)时,这正是在我在社交中推广它时出现的。

 

包起来

这绝不是存在的所有元标记的详尽列表。

例如,您可能会遇到包含遗留元标签的网页,如声明作者,版权或评级的标签。这些不再是必要的,你不应该浪费你的时间。

这是什么,是HTML元标签的详尽列表 应该 在与这样做相关时使用。

因此,专注于让搜索引擎确切知道他们需要索引页面的内容,同时保留您的HTML文档通过不必要的标签覆盖。

 

特色图像 通过拆卸.