兼顾UE与SEO的六种利器
这篇文章最初发表在 YouMoz，由于其对我们这个行业所具有的巨大价值现在升级成为重要博客。文中观点均为作者个人见解，因此并不能反映 SEOmoz，Inc.的意见。
免责声明：本文是对 Mozinar 的 Designing for SEO: Improving Site Visibility and Enhancing UX.（规划 SEO：提高网站可见性和加强用户体验）补充的帖子。贾斯汀 · 泰勒回答并拓展了 Mozinar 上 Q&A 部分听众最常问的几个问题。
为什么看起来很棒的网站的 SEO 几乎总是很逊色？¶
这正是在近期我的 Mozinar about designing for SEO（Mozinar 关于 SEO 设计）中我准备回答的问题。
要想成为搜索引擎结果页面中真正的王者，你当然不仅仅需要一个经过精心设计、搜索优化的网站。您可能也需要大量的社会口碑、有质量的链接、引文和协同引证等。这些排名因素的问题是它们难以大规模完成并且一般需要相当大的工作量才能实现，因此绝大多数网站不具备它们。
然而你仍可以通过伟大的设计和页面上的优化来获得成功。
问题出在哪里？¶
问题其实很简单。通常看起来令人惊叹的网站几乎没有给页面优化提供机会，相反的，经过优化的网页常常牺牲了精心设计的页面和良好用户体验。
这就产生了鸡生蛋还是蛋生鸡的问题。拥有一个看起来很棒，却无法搜索到的网站有什么意义？同样，网站虽然容易找到但是毫无吸引力又有什么意义？
我们如何创建看起来有魅力、令人惊异，同时能够维持良好 SEO 表现的网站？
输入 Webfont(网页字体)¶
来自像 Google、Font Deck、Typekit、Fonts.com 的网页字体已经出现了几年，并且能够提供不损害搜索引擎蜘蛛爬行的网页风格。它们成为经过精心设计，用心优化的网站的基本结构和支柱。
为了增强视觉冲击，设计师会给网站添加诸如横幅和有号召力的图形元素。这些元素通常以图像形式创建，以便设计师可以使用华丽的字体，添加类型效果，如阴影、渐变和其他设计师工具箱中的处理方法。
网站需要这些类型的图形，因为它们使网站有魅力，他们帮助改善用户体验，并且它们可以降低用户跳出率。
以下面的图形为例，它看起来有太多的信息需要收录在 Alt 标签内。并且它也很难强调并优先排序 alt 标记内的信息，因为它只是纯文本。
借助使用 webfonts、HTML 和 CSS 的组合，通过创建的所有文本元素在内的”活文本”横幅，兼顾网页的美观和实现良好的 SEO 就会变成可能。
文字横幅现在不仅看起来很棒，他们还可以使用 H1、正文类型、粗体文本和动态更新标记。搜索引擎将只会认为这是标准的 HTML。最棒的是，这些横幅或图形甚至可能被标记为使用图表或微观数据的丰富文本。
优化设计¶
在创建外表美观且具有良好 SEO 属性的网站过程中最大的障碍是如何统一下面的两条规则。设计师关注的重点是使网站看起来很棒和在引人注目的同时创造良好的用户体验，然而 SEO 通常需要一个易抓取且排名好的网站。
如果设计和 SEO 团队了解对方的要求，结果便会变得出色且具有创新性。以下图为例：这些是时装零售商的网站画面，左手边一栏由设计师勾画出，此面板的用户体验是成功的，它展示了一个穿着产品的模特，通过使用恰当的定位类型解释了到底用户通过单击可以期盼在这里看到什么。问题在于，从 SEO 角度来看，此面板无法收录。
SEO 会需要更多像右手边一样的东西。它有一个明确定义的标题，可能是一个，跟随着一些长尾文本。很明显，这一部分远远无法满足用户体验的需求，左侧的面板将获得比右边面板更高的点击率。
对这一问题的一个潜在的解决方案是鼠标悬停。最初查看时，面板将看起来同左手边一样（完全按照设计者的期望），然而当用户将鼠标滚动到图像上时，面板将变为右手边所看到的（正好是 SEO 所需要的）。
此解决方案的魅力在于用户体验和点击得到维持，并且由于此文本全部是活文本，因此它是可抓取且对搜索引擎机器人开放的，提供了搜索引擎对网站进行索引时所需要的一切。
可扩展的 div¶
将可索引的内容纳入简约页面设计的另一个非常好的方式是可扩展的 div。它能够取得巨大的 SEO 和用户体验成功通过使鼠标点击中相关的（可抓取的）文本可视。
看下图的例子：通常这些产品面板以图像为代表，它们通过提供丰富的视觉单击导航方法吸引用户。
除了个别 alt 文本，这类面板通常难以供搜索引擎进行爬行抓取。
通过为这些面板添加可扩展的 div，它可提供大量的 SEO 机会。单击上述项目的其中一个现在就可以提供此产品类别令人信服的说明，包括有助于购买过程且增加转换及用户参与为结果的额外功能。但也许可扩展的 div 的最大的好处是我们可以提供这么多额外的长尾文本供搜索引擎索引。
将可扩展的 div 纳入网页不仅仅对于用户来说很友好，同时也为可编入索引的内容提供了令人难以置信的机会。
秘密武器¶
行动号召、信任信号、广告牌和所有其他页面元素常常会包含我们希望谷歌抓取的信息，然而在大多数情况下，这些将表示为图像。因此，折扣、免费送货、次日交付和其他优惠都不能被抓取。
用 webfonts，CSS 和 HTML 创建所有这些元素以便蜘蛛和机器人可以爬行。我们真的希望消息，例如”免费送货”、”10% 折扣”或”出售”被搜索引擎隐藏吗？
下列项目包含巨大的销售信息，并且全部使用 webfonts，CSS 和 HTML，因此全部可抓取。
综合¶
上文提到的技术理论上听起来都很不错，但是事实上是否真的可以应用呢？答案是肯定的。并且为了证明它，我们运用这些技术为一个虚构的零售商“random boutique”创建了一个网站。网站上展示了所有这些技术并使用 webfonts，HTML 和 CSS 打造不只是赏心悦目且提供了出色的用户体验和大量的供搜索引擎抓取的数据。测试网站使用 rollup 汇总数据、可扩展的 div 和实时文字广告牌，再加上许多其他技术来提供一个具有出色的用户体验的网站。然而，没有一个是以牺牲页面 SEO 为代价的。该网站给搜索引擎大量难以置信的内容而不损害用户体验。
使用活文本也自然可以提供一些可移动性、可访问性和多语言网站方面的优势，但最引人注目的是使用 webfonts 的 A / B 测试变得超级简单。为了证明这一点，我们创建了 A / B 版本的示范站点，即由相同的 URL 服务，分享相同的代码库且对于搜索机器人来说看起来相同。两个站点之间的唯一区别纯粹在于使用 webfonts，CSS 和几个不同的背景图像。
测试网站可通过下列连接进行访问：http://www.graphitas.co.uk/randomboutique
网页解剖¶
具备 webfonts、HTML 和 CSS，你就可以拥有创建令人惊叹的包含 SEO 所有需求元素的工具。
要充分利用这些资产，了解页面结构非常重要。当然，这根据您的客户、市场分区和他们想要传递的信息会有所不同。
设计师首先应该了解的事之一就是信息在页面、行动号召和信任信号上位置的重要性。
一个很好的类比，网页设计就像是一个杂志的封面。绝非巧合的是大多数杂志在布局上非常类似，这是因为杂志设计师了解最有可能使人们购买（从杂志架上）的相关参数。
他们知道通常杂志堆叠在分层的货架上，因此杂志必须具有可识别的清晰明了大标题。他们还会倾向使用页面的上四分之一部分来传达关键特色。杂志设计中的这些考虑参数与网站设计有天然相似之处，网站设计者不得不面对首屏或页面倍（page fold）问题，根据谷歌最近更新的头重脚轻算法，比以往更加关注页面位置。
无论是在线还是离线，要求都是能够抓住你的注意力。在杂志设计中，大标题区域通过你熟悉的内容引诱你，并且提供那些早已设计好的目的正是让你拿起这本杂志的内容。一旦你选中它，你会看到诱人的摄影作品和更多的关键内容。这些关键内容占据的区域被称为”热点”——基本上都是杂志设计师知道的网页上能够吸引你的注意力的最佳机会。
这些确切的相同参数同样适用于网页设计，所以在 Graphitas 的团队，我们整理了一个信息图，其中注明了适用于任何网页的关键位置和热点，并指示了其可能产生的影响。
Mozinar 问与答¶
我的 Mozinar 中有几个问题，要么是我没有时间回答，要么就是问题需要有深度的答案。以下是我深思熟虑后对问题的回答：
问：浏览器兼容性如何影响设计？¶
答：影响很小。最近所有版本的浏览器（包括 IE 6）都支持 webfonts，因此设计只受到浏览器 CSS 兼容性的影响。例如，某些版本的 IE 不允许在某个角度显示文本。在这种情况下，浏览器会忽略 CSS 条目，然后导致布局问题，我们因此不得不为不兼容的浏览器创建单独的 CSS。在大多数情况下，在不影响整体设计的前提下为不兼容的浏览器创建设计特例是可能的。
问：是否有好的工具用于创建”活文本”图形？¶
答：事实上我还没有遇到任何特别理想的工具。工具像 Adobe Edge 确实显现出一些潜力，虽然目前它生成的元素的文件还太大，而且它很大程度绑定到自己的 Typekit 网页字体库中。我们倾向于创建就像其基本窗体中的我们自己的元素，这些只是包括 webfonts 的经典 HTML 和 CSS，并且这些可以通过任何标准的 web 开发工具创建。
问：是否有供使用网页中的”活文本”的好资源呢？¶
答：再次，没有能够迎合 webfonts、HTML、CSS 和 SEO 涵盖一切的资源。但是有很多能够单独处理这些项目的资源。我能给的最好的建议是借用其他人已经创建好的资源。上述的示例站点展现出一些很好的具备共同要素的例子，请随意使用那里的代码。我计划为演示站点的各种元素创建代码片段以便可以更轻松地使用它们。如果你想让我在他们能够使用之后通知你的话，请留下您的推特信息或电子邮件。
问：Webfonts 会不会使网页加载速度变慢？¶
答：每个 webfont 约有 50 k 的大小，所以过度使用 webfonts 会影响页面加载。由于 webfonts 通常用于替换图形，最终结果可能是 webfonts 可以轻松地减小页面大小。我的建议是在开发过程中评估文件大小并保留您现有的页面阈值大小。显然如果带宽用于图形或 webfont 下载的话没有任何区别。
问：滚动和移动查看呢？他们对触摸屏适用吗？¶
答：滚动（或鼠标悬浮）在触摸设备上无法工作。有两种解决方案，或者移除触摸设备上的鼠标悬停事件，以便触摸板具备按钮功能；或者将鼠标悬停事件更改为单击事件来显示鼠标滚动经过图像时的文本。由于隐藏在鼠标滚动之后的文本对搜索机器人仍将是可见的，因此任一方案都是可行的。