这篇文章是Made @ HubSpot的一部分，这是一个内部思维系列，我们通过它从我们自己的HubSpotters所做的实验中汲取教训。
在网页的早期，设计和搜索引擎优化并不是真正的朋友——SEO好的网站通常设计得很差，而设计令人印象深刻的网站通常对搜索引擎优化来说并不好。在那个时代，有一些疯狂的事情填料的关键词内容、糟糕的网站导航和过时的设计。
当我加入HubSpot时，我与我们的搜索引擎优化团队合作，设计在线体验，以扩大我们网站的自然流量。知道SEO在设计师中享有的声誉，我怀疑是否能够创造出吸引人的设计，同时交付我负责的流量和领先计数。然而，我欢迎挑战!
幸运的是，我遇到了一个惊喜。在过去的一年里，与我们公司的搜索引擎优化团队合作使我认识到，搜索引擎优化和raybet电子竞技设计的目标不必相互矛盾——事实上，它们相互交织在一起，围绕着预测和为客户提供价值。
以SEO为核心进行设计，最终创造卓越的客户体验。
在这里，我将探讨如何使用具有SEO意识的设计来增加流量，同时保持迷人的用户体验——但首先，为什么它更重要？
SEO设计的影响
其核心是，我们的团队希望为我们的网站提供流量，这将影响我们获得线索和产品注册的能力。
我认为设计是交付这些KPI不可或缺的一部分，因为我们直接影响访问者和搜索引擎在给定页面上看到的内容。
最终，网页设计要为访问者提供周到和有价值的体验，这将影响我们的内容是否出现在SERP(搜索引擎结果页)。
例如，如果用户发现我们的导航令人困惑，他们可能会快速退出我们的页面——这将向SERP表明我们的页面已经过时或与手头的关键字不匹配。
还有很多其他与设计相关的因素可能会影响SEO——看看我们的2019年谷歌排名因素终极指南要学习更多的知识。
接下来，让我们探索您的团队如何实践seo思想设计。
如何实践seo导向设计
有一些概念将SEO和设计联系在一起，有助于平衡这两个领域的最佳实践，今天我想特别介绍四个。就让我们一探究竟吧。
1.不要忽视手机体验。
谷歌已经转移到移动优先索引，这意味着它使用您网站的移动版本进行索引和排名。
疯狂的现实是谷歌可能永远不会看到你的网站的桌面版本。
这一变化使得在设计更小的屏幕尺寸时，必须确保内容质量不受影响。在移动设备上隐藏内容，但在桌面上显示内容就像剪断鸟的翅膀——爬虫（在网络上搜索新内容的机器人）将无法探索网站的广度，也无法获得足够的内容价值背景。
实际上，这意味着您的站点导航应该完全对移动用户可用。
此外，你还需要确保手机上的链接结构与桌面上提供的导航选项没有太大差别。另外，文本内容和图片应该保持可用，以确保爬虫程序有足够的上下文来了解你的网站是关于什么。
我将是第一个承认减少手机内容是我职业生涯早期养成的一个坏习惯，而且很难改掉。
为了更好地接受响应式设计，我改变了我的思维方式，从尝试复制所有接触点的体验，传递可能的最佳体验在每一个平台。
这给了你在每个平台上优化转换流的自由，当用户通过不同设备访问你的网站时，利用你对用户需求的了解。
在支持移动优先索引实践中，搜索引擎也非常重视移动友好性因此，在为移动设备设计网站时，应密切注意以下事项：
- 可开采区域的大小：确保有足够的空间让人用手指轻敲链接。至少48像素大小的点击目标被谷歌等搜索引擎视为标准。
- 使用清晰的字体大小：文本大小应按比例调整，以确保每个设备的易读性。使用字体太小将导致搜索引擎的惩罚。
- 图像资产文件大小：导出图像和其他媒体内容时，请尝试优化web的文件大小，以避免永远无法加载。用户的注意力跨度很短，如果页面加载时间过长，潜在访问者将放弃您的网站。
我们在构建HubSpot时使用了这种方法业务模板目录，于2019年3月推出。我们提供的内容是可编辑文档模板的形式，用户可以下载和使用。由于这些模板是为Microsoft Word、Excel和PDF（通常是桌面应用程序）提供的，因此我们意识到用户可能不会发现将模板下载到移动设备上有多大价值。
在手机上，我决定优先选择通过电子邮件向自己发送链接，以便稍后下载模板，使用户能够实现他们的目标，而不管他们在哪个平台上。
桌面和移动设备之间的下载体验稍加修改，即可为每个平台创建优化的体验。这些屏幕显示了如何将电子邮件发送给自己是移动设备上的主要选项，而在桌面上则优先考虑下载。
我还对我的工作流程做了一个非常简单的更改，以确保在设计过程的每个阶段都考虑响应性设计。当我在中设置新文件时素描（我们团队用于界面设雷竞技苹果下载官方版计的主要软件），我总是创建两个相邻的“艺术板”——一个用于桌面，一个用于移动设备。
当我为桌面设计屏幕时，我同时将相同的内容安排到移动屏幕大小，而不删除任何内容，然后根据移动环境进行必要的调整。这不是一个移动优先的方法，但它是朝着正确方向迈出的一步。
为响应性设计方法设置的文件示例
2.让导航有意义。
你的导航越好，你的网站结构的方式，更好的爬虫将能够发现内容和理解你的网站是什么。
但清晰导航不仅仅适用于机器人，它还可以帮助访问者浏览你的网站，找到有趣的相关内容。想想你自己第一次访问网站的经历。也许你已经在谷歌上找到了一篇你喜欢阅读的文章，并希望看到该作者的更多文章。一个组织良好的网站可以让你随时获得这些内容。
你可能熟悉几个通常用于组织内容的模块:“相关”feeds，“人们也搜索”，“人们也买了……”——这些功能通常在电子商务和目录网站上使用。虽然它们看起来像是噱头，但它们对顾客来说是有价值的，原因如下:
- 加强内容分类。访问者将了解你如何在你的网站上定义类别，以及属于每个类别的内容类型。这使他们能够在没有帮助的情况下找到特定的内容。
- 促进相关内容的发现。这使得网站能够为客户提供超出其原始查询范围的价值，鼓励客户将我们视为知识渊博、有用的信息来源。当他们将来看到我们的内容时，他们可能更信任我们。
- 有助于决策. 这些组件减少了必须识别和召回数据的认知负荷，客户感到放心，他们并不孤单。然而，重要的是明智地使用这些数据以提供帮助——并且不要滥用它.
其他UI组件，如面包屑导航目录在设计界可能名声不好，但它们对于利用复杂的信息架构很有用。
这些组件有助于展示网站的组织方式，让爬虫程序和访问者更容易在网站上找到自己的方式。
从用户的角度来看，清晰的导航就像路标，告诉你更多关于你在哪里，你去过哪里，你要去哪里。没有什么比浏览器上的后退按钮更糟糕的了，因为你不知道还可以点击哪里。
3.给人们想要的。
有多少次你搜索谷歌的答案，并点击了一个链接，给你的内容不同于你所期待的?我们可能会同意，获得没有回答我们问题的内容是一种令人沮丧的体验，并可能导致信任的丧失。
搜索引擎希望提供高质量的内容来回答他们收到的查询——这使得设计具有相关内容的页面成为实现强大搜索引擎优化最重要的部分之一。毕竟，当搜索引擎不能提供高质量的内容时，他们就会失去客户和收入。
了解什么对游客有价值来自了解他们的意图质询背后熟悉用户目标为您创建能够提供价值的内容奠定了基础。
有一些简单的方法可以让我了解更多关于用户目标的信息(游戏邦注:但不能读懂他们的想法)，我喜欢定期练习这些方法:
1)关键字研究
关键词研究检查人们在搜索引擎中输入的关键词，在给定时间段内(通常是每月)被搜索的次数，以及其他一些参数，这些参数可以帮助你确定搜索关键词的价值和难度。
通过检查用户正在搜索的完整查询，您可以更多地了解用户对关键字的了解及其搜索意图。将内容的特定性与用户的期望相匹配对于确保您提供价值至关重要。
举个例子来说吧:
在第一个示例中，有人正在搜索“商业计划建议书模板”下载“可能期望一个页面,使他们能够直接下载一个商业计划模板,意味着高水平的特异性和意图——这个客户很有可能在考虑阶段的搜索,并且可能已经知道什么是商业计划的建议以及如何使用它。
另一方面，如果有人输入“商业计划建议模板”之类的查询例子可能不知道一个好的商业计划应该包含哪些内容，可能会对提供更多背景以及一些不同选择的高级文章感兴趣。
关键词研究也可以作为一个很好的试金石，测试你的拷贝与客户的共鸣程度。您可以使用月度搜索量（MSV）等指标来查看搜索引擎中通常键入的关键字。这可以帮助您了解客户在现实世界中是如何引用相关概念的。在权衡一个众所周知的术语和教一个新术语的成本和收益时，你可能会考虑这一点。
然而，在将关键字研究纳入您的流程时，了解使用关键字研究的局限性是很重要的。关键词研究会显示用户在搜索什么，但不会告诉你他们在搜索什么其实找.
搜索同一术语的人可能会搜索非常不同的内容，这在很大程度上取决于提示他们输入查询的上下文。你可以使用关键词研究来帮助你形成一个关于用户意图的假设，但是你不能从中得出任何关于因果关系的结论。使用关键词研究可以是一个强大的工具，但前提是你要从表面上看它的发现并正确地使用它。
2)移情锻炼
一旦我看过人们正在搜索的单词，我就开始分析他们查询背后可能的意图。对于我正在创建的每个页面或资产，我将创建一个简短的关键字、目标和内容列表，访问者可能会发现这些内容对实现他们的目标很有价值。
这个简单的移情练习帮助我考虑人们访问的上下文，并绘制出能为用户创造价值的模块。
以下是一个模板，可以帮助您开始自己的移情练习：
对于业务模板目录，我制作了一个类似以下内容的列表：
用户搜索查询背后的背景可能会对他们对您的内容的期望产生巨大影响——因此，在执行移情练习时，要知道您可能不会捕获每个用例或场景，这一点很重要。
我使用这种移情练习来形成关于用户目标的假设，然后确定该页面上哪些内容可能最有价值。这为必须包含的内容设置了基准，这使我能够线框显示重要内容的模块。
我们可以建立这个基础，增加ORU营销团队或利益相关者可能需要的内容，只要它不阻止客户获得最大价值。
3)用户研究和测试
用户测试或研究是评估项目假设的另一个有用工具。令人难以置信的是，你的假设往往与客户所持有的实际价值不符，所以尽可能获得他们的直接见解至关重要。
在我们的团队中，我们将审核和未审核的用户测试合并到我们的测试库中，使用的程序有验证和被调查者，这两者都允许您招募和筛选用户来测试您的设计。
如果将这三种方法结合使用，可以让您更好地了解人们搜索词背后的背景，以及他们希望您的内容帮助他们实现的目标。
4.应用易访问性最佳实践。
在设计过程中，让所有访问者都能访问内容是一个重要的步骤，但这一步往往被忽略。对于为什么无障碍性没有被优先考虑，有很多常见的解释——不幸的是，其中一些可能听起来很熟悉：
“无障碍设计在视觉上并不有趣，而且看起来很无聊。”
“让所有人都能使用这些东西需要额外的时间。”
“它只影响我们的一小部分客户。”
事实是，可访问性并不是那么困难，为我们为什么做不到找借口是不可接受的。使内容可访问对搜索引擎优化有影响，因为它创造了更好的用户体验，并帮助搜索引擎理解你的内容。
如果这听起来令人气馁，以下是一些你可以做的简单的事情，以改善整体客户体验，并积极影响你的SEO:
1)添加描述性的alt文本。
Alt文本帮助有视力障碍的人理解你的网站上的非文本内容是关于什么的。像屏幕阅读器这样的技术被用来帮助有视觉障碍的人与网站互动，这些工具在遇到图像、视频或其他非文本内容时读取你提供的alt文本。
此外，在图像无法加载的情况下（如缓慢或不稳定的internet连接），alt文本会显示在图像的位置，这样用户仍然可以理解他们看不到的内容。
人们并不是唯一使用alt文本的人——搜索引擎也使用。爬虫使用alt文本有两件事:
- 了解图像是关于什么的。在alt文本描述中捕获图像的主题和目的有助于搜索引擎在图像搜索中对图像进行排名，并为网站增加流量。
- 了解你的网站是关于什么的。这有助于搜索引擎更好地了解您的网站是关于什么的，以及它为用户提供的价值，这会影响您的页面在SERP上的显示。
设计人员、开发人员和营销人员可以共同努力，确保在所有内容上都实现了描述性的alt文本。通过协作和相互负责，可以为您的网站带来流量，并帮助我们为所有人创造包容性的体验。
2） 创建清晰的内容层次结构。
使用标题建立一致的视觉层次结构使人们和爬虫都更容易理解内容。人们很难阅读长正文，因此标题在为用户提供一种快速扫描和查找长内容的方法方面发挥着重要作用。
标题应该是视觉上区分的、清晰的和描述性的，并告诉读者（和爬虫）前面到底有什么。
3） 编写描述性锚文本。
按钮和CTA上写着“阅读更多”或“了解更多”是比较常见的。不幸的是，这对访问者或机器人了解下一步应该看到什么并没有多大帮助。
当有效使用时，cta和超链接副本应该有助于设定访问者对链接页面的期望，允许他们评估该页面是否对他们有价值。
有视觉障碍的用户也可以通过屏幕阅读器阅读锚文本，使用非描述性的链接可能会让那些不了解CTA生活环境的用户感到特别困惑。
考虑SEO的设计将帮助你创造更强大、更好的客户体验把顾客放在第一位。
通过使用合作的、有意的方法进行设计和搜索引擎优化，我们可以为我们的业务带来可衡量的影响，并为所有人创造更具包容性的体验。
最初发布于2019年7月25日上午7:00:00，更新于2020年5月7日
话题：
网站设计相关文章
