如何在不损失SEO指标的情况下提高内容页面的可用性
Posted: Tue Dec 03, 2024 8:42 am
客户：提高可用性。我们每天有 5 万名访客，但转化率并不令人鼓舞！
用户体验：是的，请。这里有52个改进点。
SEO专家：只在我的尸体上！把一切恢复原样，否则我就开始射杀人质！
我们让优化器放心，释放了人质，但需要简化设计师和谢奥什尼科夫- 留下来了。
暂时先把Axure放在一边，草图和Figma，我们收集了需求并形成了一套针对内容页面的设计和实现的建议。
机器人的文本和人的文本
任何内容页面的主要特征都是主导性搜索引擎优化文本位于销售文字上方。
用户非常不愿意阅读网络上的文本。注意力滑过标题，部分捕获了段落开头的几个单词。极其结构化的文本有助于扭转局面。如果您读完本段内容，则属于该规则的例外。
我们决定将苍蝇与肉排分开，并使用两种不同的方法进行内容设计。
标题、销售文字和“页面内容”的重要部分在清晰的视觉强调的帮助下脱颖而出。
带有关键字的千字节文本对于设计和布局工具来说是次要的。
根据标题和重音元素，访问者可以快速了解页面的内容并决定下一步该做什么。认知度提高，销售元素和号召性用语的可及性增加。
机器人在页面的源代码中看到，文本均匀分布在屏幕上，有h1-h6标题的层次结构，并且页面底部没有集中的SEO材料。宾果！
一般实施指南
如果网站已经有位置和流量，不建议突然改变页面、文字内容和标题的结构和架构。这可能会导致 SEO 指标丢失。
最好在没有任何装饰的情况下布局内容块。这足以实现任何复杂的布局。表格数据 - 标准 html 表格。在这种情况下，一个简单的解决方案是正确的。
仅当标题 h2-h6 的内容和周 荷兰电话号码数据 围文本是唯一的且仅在本页面上使用时，才使用标题 h2-h6。
导航、服务和常规元素不应包含在标题标签中。选择具有 CSS 样式的纯文本元素。
布局的视觉部分构建于其上的级联样式表必须放置在单独的 CSS 文件中。
样式文件应该被缓存并且不影响主页代码。这可以加快加载速度并减少重新打开页面所花费的时间。
仅第一阶段样式例外，它支持第一个屏幕的网格和格式 - 它们必须立即加载，但大小不能超过 14 KB。
所有大型（超过 15-20 行）JS 脚本都类似地分配给文件，除非将脚本集成到页面代码中是其操作的关键和强制条件。另外，您可以更容忍小脚本。
在哪里隐藏无聊的 SEO 文本
我们已经确定了布局技术和基本要求。这些内容很容易被搜索机器人阅读，但仍然会阻止懒惰和不参与的用户。我们开始隐藏一切不必要的东西。
汉堡不是快餐，而是一种导航手段
三横条纹图标自 2010 年出现在 Facebook 移动应用程序中后广受欢迎。之后它成为一种 UI 标准，首先迁移到自适应界面，最后迁移到桌面界面。
如何提高内容页面的可用性而不丢失 SEO 指标 - 图片
没有必要专门在小屏幕上使用“汉堡”。图标可以取代一长串的导航链接，让人赏心悦目。
有观点认为汉堡可能会对用户体验产生负面影响。一些消息来源声称，图标的使用减少了对导航菜单的需求 - 用户在页面本身上查找必要的链接或在页脚中使用替代导航。这一切都取决于使用环境。
如果您需要减轻网站标题并不断将与网站主菜单的交互元素保持在用户的注意力区域，那么汉堡是最好的选择。
值得记住的是，单击汉堡时打开的菜单元素应该是直观的，并且在用户眼中与页面的主要内容清晰分开。这是通过对比纯色和页面临时变暗来实现的。
汉堡不会损害页面优化；菜单中的链接已被机器人很好地索引。
轮播而不是三个带有文本的屏幕
解决方案很明显：使用现代网络上熟悉的交互式块在其中放置文本。
如何提高内容页面的可用性而不丢失 SEO 指标 - 2 - image
各个幻灯片包含文本的小节，这些文本的间距均匀，以避免滚动浏览时高度跳跃。该块在页面上占用的空间与所使用的幻灯片的数量一样少。
没有必要滥用帧数；最好使用 3-4。自动滚动没什么用，制作易于理解的“前进/后退”按钮就足够了。
对于页面代码中的机器人来说，该块看起来就像几个具有不同内容的相似 HTML 元素。
水平滚动或滑动文本
移动应用给Web开发带来了几种非典型的UI案例。其中之一是刷一长排部分隐藏在块右边缘后面的图片或卡片。作为隐藏不必要内容的一种方法，这是一个很好的解决方案。
如何提高内容页面的可用性而不丢失 SEO 指标 - 3 - image
文本被分成大致相等的块，就像轮播一样。块可以有副标题、编号或图标，以免看起来无聊。结果是一个相当有趣且方便的解决方案，用于实现大型项目符号和编号列表、摘要、优点，而无需占用 2-3 个屏幕。
您可以将销售和 SEO 文本结合起来：在可见区域放置可读的内容，并用索引内容稀释它。机器人不会看到犯罪行为。
水平滚动（滑动）绝对不适合电子商务，在电子商务中，显示产品卡的范围而不隐藏任何内容非常重要。
标签永远不会太多！
有时，您需要在页面上放置许多不同类型的内容：一些冗长的文本、带有链接的附加材料、用户内容、营销块。
如何提高内容页面的可用性而不丢失 SEO 指标 - 4 - image
一个引人注目的例子是包含详细特征、评论、交叉销售、保修、付款和交付提示的产品页面。一个足够的解决方案是选项卡。
用户体验：是的，请。这里有52个改进点。
SEO专家：只在我的尸体上！把一切恢复原样，否则我就开始射杀人质！
我们让优化器放心，释放了人质，但需要简化设计师和谢奥什尼科夫- 留下来了。
暂时先把Axure放在一边，草图和Figma，我们收集了需求并形成了一套针对内容页面的设计和实现的建议。
机器人的文本和人的文本
任何内容页面的主要特征都是主导性搜索引擎优化文本位于销售文字上方。
用户非常不愿意阅读网络上的文本。注意力滑过标题，部分捕获了段落开头的几个单词。极其结构化的文本有助于扭转局面。如果您读完本段内容，则属于该规则的例外。
我们决定将苍蝇与肉排分开，并使用两种不同的方法进行内容设计。
标题、销售文字和“页面内容”的重要部分在清晰的视觉强调的帮助下脱颖而出。
带有关键字的千字节文本对于设计和布局工具来说是次要的。
根据标题和重音元素，访问者可以快速了解页面的内容并决定下一步该做什么。认知度提高，销售元素和号召性用语的可及性增加。
机器人在页面的源代码中看到，文本均匀分布在屏幕上，有h1-h6标题的层次结构，并且页面底部没有集中的SEO材料。宾果！
一般实施指南
如果网站已经有位置和流量，不建议突然改变页面、文字内容和标题的结构和架构。这可能会导致 SEO 指标丢失。
最好在没有任何装饰的情况下布局内容块。这足以实现任何复杂的布局。表格数据 - 标准 html 表格。在这种情况下，一个简单的解决方案是正确的。
仅当标题 h2-h6 的内容和周 荷兰电话号码数据 围文本是唯一的且仅在本页面上使用时，才使用标题 h2-h6。
导航、服务和常规元素不应包含在标题标签中。选择具有 CSS 样式的纯文本元素。
布局的视觉部分构建于其上的级联样式表必须放置在单独的 CSS 文件中。
样式文件应该被缓存并且不影响主页代码。这可以加快加载速度并减少重新打开页面所花费的时间。
仅第一阶段样式例外，它支持第一个屏幕的网格和格式 - 它们必须立即加载，但大小不能超过 14 KB。
所有大型（超过 15-20 行）JS 脚本都类似地分配给文件，除非将脚本集成到页面代码中是其操作的关键和强制条件。另外，您可以更容忍小脚本。
在哪里隐藏无聊的 SEO 文本
我们已经确定了布局技术和基本要求。这些内容很容易被搜索机器人阅读，但仍然会阻止懒惰和不参与的用户。我们开始隐藏一切不必要的东西。
汉堡不是快餐，而是一种导航手段
三横条纹图标自 2010 年出现在 Facebook 移动应用程序中后广受欢迎。之后它成为一种 UI 标准，首先迁移到自适应界面，最后迁移到桌面界面。
如何提高内容页面的可用性而不丢失 SEO 指标 - 图片
没有必要专门在小屏幕上使用“汉堡”。图标可以取代一长串的导航链接，让人赏心悦目。
有观点认为汉堡可能会对用户体验产生负面影响。一些消息来源声称，图标的使用减少了对导航菜单的需求 - 用户在页面本身上查找必要的链接或在页脚中使用替代导航。这一切都取决于使用环境。
如果您需要减轻网站标题并不断将与网站主菜单的交互元素保持在用户的注意力区域，那么汉堡是最好的选择。
值得记住的是，单击汉堡时打开的菜单元素应该是直观的，并且在用户眼中与页面的主要内容清晰分开。这是通过对比纯色和页面临时变暗来实现的。
汉堡不会损害页面优化；菜单中的链接已被机器人很好地索引。
轮播而不是三个带有文本的屏幕
解决方案很明显：使用现代网络上熟悉的交互式块在其中放置文本。
如何提高内容页面的可用性而不丢失 SEO 指标 - 2 - image
各个幻灯片包含文本的小节，这些文本的间距均匀，以避免滚动浏览时高度跳跃。该块在页面上占用的空间与所使用的幻灯片的数量一样少。
没有必要滥用帧数；最好使用 3-4。自动滚动没什么用，制作易于理解的“前进/后退”按钮就足够了。
对于页面代码中的机器人来说，该块看起来就像几个具有不同内容的相似 HTML 元素。
水平滚动或滑动文本
移动应用给Web开发带来了几种非典型的UI案例。其中之一是刷一长排部分隐藏在块右边缘后面的图片或卡片。作为隐藏不必要内容的一种方法，这是一个很好的解决方案。
如何提高内容页面的可用性而不丢失 SEO 指标 - 3 - image
文本被分成大致相等的块，就像轮播一样。块可以有副标题、编号或图标，以免看起来无聊。结果是一个相当有趣且方便的解决方案，用于实现大型项目符号和编号列表、摘要、优点，而无需占用 2-3 个屏幕。
您可以将销售和 SEO 文本结合起来：在可见区域放置可读的内容，并用索引内容稀释它。机器人不会看到犯罪行为。
水平滚动（滑动）绝对不适合电子商务，在电子商务中，显示产品卡的范围而不隐藏任何内容非常重要。
标签永远不会太多！
有时，您需要在页面上放置许多不同类型的内容：一些冗长的文本、带有链接的附加材料、用户内容、营销块。
如何提高内容页面的可用性而不丢失 SEO 指标 - 4 - image
一个引人注目的例子是包含详细特征、评论、交叉销售、保修、付款和交付提示的产品页面。一个足够的解决方案是选项卡。