为人类和机器人设计:HubSpot设计师如何处理SEO

这篇文章是Made @ HubSpot的一部分，这是一个内部思维系列，通过它我们可以从我们自己的HubSpotters所做的实验中提取经验教训。

在网站发展的早期，设计和搜索引擎优化并不是很好——那些搜索引擎优化好的网站通常设计很差，而那些设计令人印象深刻的网站通常不擅长搜索引擎优化。在那个时代，有一些疯狂的事情填料的关键词内容，糟糕的网站导航，以及过时的设计。

当我加入HubSpot时，我与我们的搜索引擎优化团队合作，设计在线体验，以扩大我们网站的有机流量。了解到SEO在设计师中的声誉，我怀疑是否能够产生吸引人的设计，同时提供我负责的流量和领先数量。然而，我欢迎挑战!

幸运的是，我令人惊讶。在过去的一年里，与我们公司的SEOraybet电子竞技团队合作导致我意识到SEO和设计的目标不一定是彼此的赔率 - 事实上，他们围绕预期和向您的客户提供价值。。

在设计时考虑到SEO最终会创造一个优秀的客户体验。

在这里，我将探讨如何使用seo设计来增加流量，同时保持吸引人的用户体验——但首先，为什么它如此重要?

seo设计的影响

其核心是，我们的团队希望为我们的网站提供流量，这将影响我们获取线索和产品注册的能力。

我认为设计是能够交付这些kpi的一个不可或缺的部分，因为我们直接影响访问者——以及搜索引擎——在给定页面上看到的内容。

最终，设计页面来为访问者提供有价值的体验会影响我们的内容是否出现在SERP(搜索引擎结果页面)中。

例如，如果用户发现我们的导航令人困惑，他们可能会迅速退出我们的页面——这将向serp表明我们的页面已经过时或与手头的关键字不匹配。

还有许多其他与设计相关的因素可能会影响SEO——看看我们的2019年谷歌排名因素的终极指南要学习更多的知识。

接下来，让我们探索您的团队如何实践具有seo思维的设计。

如何实践seo设计

有一些概念将SEO和设计结合在一起，有助于平衡这两个领域的最佳实践，今天我想特别介绍四个。就让我们一探究竟吧。

1.不要忽视手机体验。

谷歌移到尝试建立索引，这意味着它使用你的网站的移动版本进行索引和排名。

一个疯狂的现实是，谷歌可能永远不会看到你的网站的桌面版本。

此更改使得在设计较小的屏幕尺寸时，必须确保内容质量不会受到损害。隐藏在移动设备上的内容但在桌面上显示它就像剪切鸟的翅膀 - 爬虫（用于新内容的网站的机器人）将无法探索您网站的广度并获得足够的上下文，有关您的内容的价值提供。

实际上，这意味着您的站点导航应该对移动用户完全可用。

此外，你要确保移动设备上的链接结构与桌面设备上提供的导航选项没有太大的不同。另外，文本内容和图像应该保持可用，以确保爬虫有足够的上下文了解你的网站是关于。

我是第一个承认减少手机内容是我在职业生涯早期养成的一个坏习惯，而且很难打破。

为了更好地接受响应式设计，我从尝试转向了尝试复制跨越所有接触点的体验，交付最好的经验在每一个平台。

当用户通过不同的设备访问你的站点时，你可以自由地优化每个平台的转换流程，利用你对用户需求的了解。

在支持移动优先的索引实践中，搜索引擎也在很大程度上权衡移动友好你的网站。因此，在为移动设备设计网站时，你应该密切注意以下几点:

1. 可触摸区域的大小:确保有足够的空间让人用手指轻敲链接。像谷歌这样的搜索引擎认为至少48像素的点击目标是标准的。
2. 使用易读的字体大小:文本大小应缩放以确保在每个设备上的易读性。使用太小的字体会导致搜索引擎的惩罚。
3. 图像资产文件大小:当导出图片和其他媒体内容时，尽量优化网页文件的大小，这样它就不会永远加载。用户的注意力持续时间很短，如果页面加载时间太长，潜在的访问者就会放弃你的网站。

我们在构建HubSpot时就使用了这种方法业务模板目录该项目于2019年3月启动。我们提供的内容是可编辑的文档模板，用户可以下载和使用。由于模板是为Microsoft Word、Excel和PDF提供的——通常是桌面应用程序——我们意识到用户可能不会发现将模板下载到他们的移动设备上有多大价值。

在手机上，我决定优先选择通过电子邮件发送一个链接给自己，以便稍后下载模板，这让用户能够实现自己的目标，而不管他们是在哪个平台上。

桌面和移动之间的下载经验中的略微修改为每个平台创造了优化的体验。这些屏幕显示电子邮件如何自我是移动设备上的主要选项，同时在桌面上进行下载。

我还对我的工作流程做了一个非常简单的改变，以确保我在设计过程的每个阶段都考虑响应式设计。当我建立一个新文件在草图(这是我们团队用于界雷竞技苹果下载官方版面设计的主要软件)，我总是创建两个相邻的“画板”——一个用于桌面，一个用于手机。

当我为桌面设计屏幕时，我在不删除任何内容的情况下，同时将相同的内容排列到移动屏幕大小，然后根据移动上下文进行必要的调整。这并不是一个移动优先的方法，但它是朝着正确的方向迈出的一步。

响应式设计方法的文件设置示例

2.让导航有意义。

你的导航越好，你的网站结构的方式，更好的爬虫将能够发现内容和了解你的网站是关于。

但是清晰的导航并不仅仅适用于机器人——它还可以帮助访问者浏览你的网站，找到有趣的、相关的内容。想想你自己第一次访问一个网站的经历。也许你在谷歌上发现了一篇你喜欢阅读的文章，想要看到更多作者的文章。一个组织良好的网站可以让你随时获得这些内容。

你可能熟悉一些通常用于组织内容的模块:“相关”提要、“人们还会搜索”、“人们还会购买……”——这些功能通常用于电子商务和目录网站。虽然它们可能看起来是噱头，但它们对客户来说是有价值的，原因如下:

• 加强内容分类。访问者将了解你如何在你的网站上定义类别，以及属于每个类别的内容类型。这使他们能够在没有帮助的情况下找到特定的内容。
• 促进相关内容的发现。这使得网站可以为客户提供超出他们最初查询的价值，鼓励客户将我们视为知识渊博、有帮助的信息来源。当他们在未来看到我们的内容时，他们可能会更信任我们。
• 帮助做决定．这些组件减少了必须识别和回忆数据的认知负荷，客户感到放心，他们不是唯一的。然而，重要的是明智地使用这些数据来提供帮助——不要滥用它们．

其他UI组件如面包屑导航目录在设计领域可能名声不好，但它们对于利用复杂的信息架构很有用。

这些组件有助于显示你的网站是如何组织的——让爬虫和访问者更容易找到他们在你的网站上的方式。

从用户的角度来看，清晰的导航就像路标一样，告诉你更多关于你在哪里，你去过哪里，你要去哪里的信息。没有什么比因为不知道在哪里点击而不得不求助于浏览器上的后退按钮更糟糕的了。

3.给人们他们想要的。

有多少次你搜索谷歌的答案，并点击一个链接，给你不同的内容，你期待?我们可能会同意，获得不能回答我们问题的内容是一种令人沮丧的体验，并可能导致信任的丧失。

搜索引擎希望提供高质量的内容来回答他们收到的查询——这使得设计相关内容的页面成为强大搜索引擎优化的最重要部分之一。毕竟，当搜索引擎不能提供高质量的内容时，他们就会失去客户和收入。

了解什么对游客是有价值的来自了解他们的意图后面一个查询．熟悉用户目标为您创建能够传递价值的内容奠定了基础。

有一些简单的方法可以帮助我更好地了解用户的目标(游戏邦注:不能读懂他们的想法)。

1)关键字研究

关键词研究研究人们在搜索引擎中输入的关键词，在给定的时间段内(通常是每月)被搜索的次数，以及一些其他指标，帮助你确定搜索引擎对该关键词排名的价值和难度。

通过检查人们正在搜索的完整查询，您可以更多地了解用户对搜索背后的关键字的了解和意图。将内容的特殊性与用户的期望相匹配，对于确保您交付价值至关重要。

例如，下面是一个可以考虑的例子:

在第一个示例中，有人搜索“业务计划提案模板”下载“可能期望一个页面,使他们能够直接下载一个商业计划模板,意味着高水平的特异性和意图——这个客户很有可能在考虑阶段的搜索,并且可能已经知道什么是商业计划的建议以及如何使用它。

另一方面，如果有人输入“商业计划提案模板”这样的查询例子可能不知道什么是好的商业计划，可能对一篇给他们提供更多背景和一些不同选择的高级文章感兴趣。

关键词研究也可以作为检验你的文案能否与客户产生共鸣的试金石。你可以使用像月搜索量(MSV)这样的指标来查看搜索引擎通常会输入哪些关键字。这可以帮助您理解客户在现实世界中如何引用相关概念。在权衡使用一个众所周知的术语与教授一个新术语的成本和收益时，您可能会考虑到这一点。

然而，在将关键字研究纳入您的过程时，了解其局限性是很重要的。关键词研究只能告诉你用户在搜索什么，但不能告诉你他们在搜索什么其实找．

人们在搜索同一个词时可能会寻找非常不同的东西，这在很大程度上取决于促使他们输入查询的上下文。你可以使用关键词研究来帮助你形成关于用户意图的假设，但你不能从中得出任何因果关系的结论。使用关键词研究可能是一个强大的工具，但只有当你从表面价值上接受它的发现并正确地使用它。

2)移情锻炼

一旦我看到了人们正在搜索的单词，我就开始分析他们查询背后可能的意图。对于我创建的每个页面或资产，我将创建一个简短的关键字、目标和内容列表，访问者可能会发现有价值的实现他们的目标。

这个简单的移情练习帮助我考虑人们访问的环境，并绘制出可以为用户创造价值的模块。

这是一个帮助您开始使用自己的同情练习的模板：

对于Business Template目录，我做了一个类似这样的列表:

用户搜索查询背后的背景可能会对他们对您的内容的期望产生巨大影响——因此，在进行同理心练习时，重要的是要知道，您可能不会捕获每个用例或场景。

我用这个同理心练习来形成一个关于用户目标的假设，然后确定页面上最有价值的内容。这设置了必须包含的内容的基准，这允许我将展示基本内容的线框模块。

我们可以建立这个基础，添加oru营销团队或利益相关者可能需要的内容，只要它不妨碍客户获得最大价值。

3)用户研究和测试

用户测试或研究是评估您带入项目的假设的另一个有用工具。难以置信的是，你的假设往往会偏离客户所持有的实际价值，所以尽可能获得他们的直接见解是至关重要的。

在我们的团队中，我们使用类似于验证和被调查者，这两者都允许你招募和筛选用户来测试你的设计。

当这三种方法一起使用时，可以让您更好地理解人们搜索词背后的上下文，以及他们希望您的内容帮助他们达到的目标。

4.应用易访问性最佳实践。

在设计过程中，让所有访问者都能访问你的内容是很重要的，但经常被忽视的一步。关于为何可访问性没有被优先考虑，存在许多常见的解释——不幸的是，其中一些可能听起来很熟悉:

“易访问设计在视觉上不那么有趣，看起来也很无聊。”

“让所有人都能接受需要额外的时间。”

“它只会影响我们的一小部分客户。”

事实上，可访问性并没有那么难，我们无法接受为自己不能这样做找借口。使内容具有可访问性会影响SEO，因为它可以创建更好的用户体验，并帮助搜索引擎理解您的内容是什么。

如果这听起来令人生畏，以下是一些简单的事情，你可以做来改善整体客户体验，并积极影响你的SEO:

1)添加描述性alt文本。

Alt文本帮助有视觉障碍的人理解你的网站上的非文本内容是什么。屏幕阅读器等技术用于帮助有视觉障碍的人与网站互动，当遇到图像、视频或其他非文本内容时，这些工具会读取你提供的alt文本。

此外，在图像无法加载的情况下(比如缓慢或不稳定的互联网连接)，alt文本会出现在图像的地方，这样用户仍然可以理解他们无法看到的内容。

人们并不是唯一使用替代文本的人——搜索引擎也一样。爬行器使用alt文本为两件事:

• 理解图像是关于什么的。在alt文本描述中捕捉图像的主题和目的有助于搜索引擎在图像搜索中对图像进行排名，并为您的网站带来额外的流量。
• 了解你的网站是关于什么的。这有助于搜索引擎更好地了解您的网站和它为用户提供的价值，这会影响您的页面的SERPS。

设计师、开发人员和营销人员可以共同努力，确保描述性替代文本在所有内容上实现。协作和保持相互负责的做法可以为您的网站带来流量，并帮助我们为所有人创造包容性的体验。

2)创建一个清晰的内容层次结构。

使用标题来建立一致的视觉层次结构可以使内容更容易被人和爬虫所理解。人们很难阅读冗长的正文，所以标题在为用户提供快速浏览和找到长内容的方式方面扮演着重要的角色。

标题应该在视觉上区分、清晰和描述性，并确切地告诉读者(和爬虫)前面是什么。

3）写入描述性锚文本。

通常会看到“阅读更多”或“学习更多”的按钮和cta。不幸的是，这对于访问者或机器人理解他们接下来应该看到什么没有太大帮助。

当有效使用时，cta和超链接副本应该有助于设定访问者对链接页面的期望，让他们评估访问该页面是否有价值。

锚文本也可以通过屏幕阅读器来阅读有视觉障碍的访问者，使用非描述性的链接可能会让那些没有视觉背景的CTA的用户感到困惑。

在设计时考虑到SEO将帮助你创造更强大、更好的客户体验。最后，在任何情况下你能做的最好的事情是把客户放在第一位。

通过使用协作、有意识的方法来设计和搜索引擎优化，我们可以为我们的业务带来可衡量的影响，并为所有人创造更具包容性的体验。