使用选项卡时，需要考虑优化需求：
Posted: Tue Dec 03, 2024 8:42 am
每个选项卡都应被机器人视为具有自己的 URL 和元标记的单独页面。这可以通过添加锚链接轻松实现。如果不这样做，则只会对第一个元素建立索引，默认情况下该元素始终打开。
实现时只使用简单的html。如果使用 JS 动态渲染选项卡，那就很糟糕了。
为了提高块的搜索引擎优化水平，建议在第一个选项卡中放置最多面向 SEO 的文本，并将其余信息放置在第二个及后续选项卡中。如果出现问题，具有优化内容的页面的主 URL 将不会从搜索结果中删除。
从用户体验的角度来看，选项卡是一种非常方便的信息访问工具。此外，它们还可以用作不显眼的仪表板，指示选项卡内有多少元素。示例：56 条评论，16 个类似产品。
此时此地：工具提示和模态框
各种模式元素可以很好地补充您的销售文本或简约的 UI
最成功的例子是页面内容的交互式上下文提示，通过单击文本中的图标或单个单词来打开。这使您不仅可以从内容中排除重复和非优先的文本元素，还可以在不同的情况下重复使用它们。
如何提高内容页面的可用性而不丢失 SEO 指标 - 5 - image
建议考虑用户行为的特殊性和界面可访问性的基本要求：
调用模态窗口的元素应该足够大，以便移动屏幕上的光标或手指可以轻松触摸。
开场动作必须明确，操作清晰。例如，如果通过悬停打开一个元素，设置明显的延迟或过渡是不可接受的——用户将没有时间接收界面响应，而只会移动光标。
对于使用键盘而不是光标进行导航的残障人士来说，无法通过悬停打开弹出元素。
免费加载 12 种产品，无需短信
在多页面目录中，用户并不非常有意识地使用特定页面的选择——他们经常随机选择下一页或随机页面。
一种方便实用的技术是通常的分页和“加载更多”按钮的组合。用户不再需要选择特定的内容，并且可以更自由地导航到新页面。编号将告诉您当时处于浏览目录的哪个阶段。
如何提高内容页面的可用性而不丢失 SEO 指标 - 6 - image
“加载更多”方法与“延迟加载”很好地结合在一起，此时页面上的元素不是一次全部出现，而是以多个行的形式出现。
提高可用性的另一个措施是指示用户在下一个浏览阶段将看到多少新元素。
优化器会进行自己的调整：每个页面必须具有唯一的 URL 和元标记。否则，机器人会将所有页面视为一个页面，并且可能不会索引某些内容。
还有一个替代解决方案 - 无限滚动。它有很多缺点，其中最主要的一个是操作不直观以及浏览器中“后退”按钮的错误操作。
剧透，到处都是剧透！
如果某些内容对于SEO指标来说并不重要，而对于用户来说则是次要的，那么您可以安全地使用“显示更多”或“展开”剧透。
主要条件：不要将SEO文本、关键词或链接置于剧透下方。它们很有可能不会被索引或很快不会被纳入索引。
如何提高内容页面的可用性而不丢失 SEO 指标 - 7 - 图片
剧透很容易与实现分页的“加载更多”解决方案混淆。关键区别在于剧透中包含的内容已经在页面代码中，并且在分页时按需加载。
例外：扰流板在移动屏幕上效果很好，因为在自适应显示中它不会影响 SEO，但它允许您显着减少为机器人分配的文本内容的区域。
这里的手风琴不是“关于音乐”
Accordion 是两种解决方案的组合：旋转木马和扰流板。不是一个非常适合 SEO 的内容格式化解决方案。由于默认情况下大部分文本都是隐藏的，因此搜索机器人会忽略除展开元素之外的所有内容。
如何提高内容页面的可用性而不丢失 SEO 指标 - 8 - image
对于故意在页面上放置非唯一文本的情况来说，这是一个很好的解决方案 - 一些评论、常见问题、说明和其他供用户使用的文本，而不是索引。
否则，情况就接近轮播了：连续不超过3-5个元素，切换场景方便易懂，状态信息使用图标。
对于移动设备，手风琴通常可以让您摆脱产品卡和其他 荷兰电话号码数据 包含大量信息的繁琐页面上的选项卡。加载时，用户会看到主要的展开元素，其余元素以带有标题的可点击块的形式呈现。
这对用户有何影响？
如果您使用解决方案来减少专门 SEO 文本的可见部分，效果将是中性或积极的。
对于导航和销售元素 - 如果没有直观地理解实际上有更多的内容，它可能会产生负面影响。绝对建议注意可预测性和可控性用户界面。
损害部分隐藏内容可用性的主要错误：
轮播幻灯片切换太快，并且没有机制来跟踪用户的注意力以暂停动画。如果用户将鼠标悬停在轮播上或使用前进/后退按钮，建议停止自动切换。
所有手风琴块可以同时打开。使用手风琴的目的正是根据标题的含义分部分显示内容。如果您一次展开所有块，您将得到一面文字墙。
水平滚动或滑动不会向用户提供有关内容实际大小的信息。该块应包含提示：最后一个可见段的突出部分、进度条、可以“拉动”的控制元素等。
选项卡中隐藏了大量冗余信息；选项卡名称不明确。建议不要过度使用选项卡，给它们提供清晰的名称，并且如果在单独的块中呈现内容，不要懒惰地添加有关内容量的信息。
使用“加载 N 更多”的页面导航会向页面添加太多元素，降低体验，并在服务器上产生负载。您不应加载超过一屏或一屏半的新内容。如果元素太多，用户很可能会错过第一行元素并专注于最后一行。
并非所有用户都是一样的
当使用复杂的场景与内容交互时，我们不能忘记残疾用户。地球上大约有七个人属于这个定义。此外，残疾不仅应被理解为身体问题，还应被理解为活动和参与的限制。
其中许多用户不得不使用辅助技术来输入和输出信息，并放弃我们熟悉的交互类型。
禁用的选项卡功能或焦点伪选择器的隐式样式剥夺了无需鼠标而仅使用键盘执行导航操作的能力。示例：用户在不使用鼠标的情况下将无法切换手风琴元素。
功能和注意力有限的人无法访问通过悬停光标触发的弹出元素。一个人根本无法执行激活该元素所需的操作。
轮播中幻灯片的变化太快或不可逆转 - 内容的可用性在时间上受到严重限制。
无法捕获弹出元素的状态以进行详细研究。示例：一旦光标离开预期区域就会关闭的菜单。
减慢交互速度的动画和过渡。
一般结论：
本文描述的提高可用性的方法是减少SEO文本分配的空间并优化内容块的布局。
需要鼓励用户阅读标题、带有销售文本的视觉突出部分，而“机器人”内容几乎仍然在幕后。
如何实现这一点以及它将如何影响 SEO 指标：
汉堡菜单- 对人体无害SEO推广，但并不总是合适的。有必要考虑用户的习惯；在某些情况下可能会观察到使用导航的活动减少。自适应布局中的标准情况。
推广页面时，带有文本块的轮播（滑块）是安全的。如果甚至有文本将被阅读的提示，您需要将其放入 3-4 张幻灯片并方便地放置控件。自动滚动 - 否。
块的水平滚动（类似于移动应用程序中的刷卡） -不会对首席执行官。它并不总是方便，需要设计者了解情况。不适合在线商店，存在用户看不到某些产品的风险。建议将重要信息或号召性用语放置在可见区域。
选项卡- 可以按照以下要求使用：
每个选项卡都有一个唯一的 URL，具有自己的元标记。
选项卡内是简单的 html。不要将其包装在 java 脚本中，不要异步加载选项卡的内容。
默认打开的第一个选项卡应包含 SEO 文本。对于在线商店的产品页面，这可能是产品的特征和描述。
弹出窗口和模式元素（导航、工具提示等）的实现应考虑到用户的清晰度。您需要清楚地了解什么操作（单击、点击、悬停）会导致元素激活。可能会降低页面的可访问性。推荐用于上下文提示和次要目标操作。
可以使用“Load more N”分页- - ，符合要求：
每个后续页面都有唯一的 URL 和元标记。
明确指定将显示多少个新元素。
使用经典分页进行复制，并允许用户独立选择所需的页面。
可以与延迟加载结合使用来优化加载——随着页面滚动逐行加载元素
剧透“展开，显示更多” - 建议使用它来仅降低您不介意从索引中删除的内容的可见性。关键词和链接的权重降低了。
带有文本块的手风琴- 类似于扰流板，可防止内容的自由索引和链接权重的传输。可用于形成包含评论、常见问题解答和其他类似元素的块，这些元素无需更改即可放置在网站的多个页面上。
通过实施所有这些解决方案，您可以有效地减少分配给 SEO 文本的可见区域，将正确的重点放在对用户真正重要的信息上，而不强迫他阅读所有内容。
与此同时，排名的恶化和搜索流量的减少是无法预测的，而这种情况通常是这样的重新设计或布局的根本改变。
实现时只使用简单的html。如果使用 JS 动态渲染选项卡，那就很糟糕了。
为了提高块的搜索引擎优化水平，建议在第一个选项卡中放置最多面向 SEO 的文本，并将其余信息放置在第二个及后续选项卡中。如果出现问题，具有优化内容的页面的主 URL 将不会从搜索结果中删除。
从用户体验的角度来看，选项卡是一种非常方便的信息访问工具。此外，它们还可以用作不显眼的仪表板，指示选项卡内有多少元素。示例：56 条评论，16 个类似产品。
此时此地：工具提示和模态框
各种模式元素可以很好地补充您的销售文本或简约的 UI
最成功的例子是页面内容的交互式上下文提示，通过单击文本中的图标或单个单词来打开。这使您不仅可以从内容中排除重复和非优先的文本元素，还可以在不同的情况下重复使用它们。
如何提高内容页面的可用性而不丢失 SEO 指标 - 5 - image
建议考虑用户行为的特殊性和界面可访问性的基本要求：
调用模态窗口的元素应该足够大，以便移动屏幕上的光标或手指可以轻松触摸。
开场动作必须明确，操作清晰。例如，如果通过悬停打开一个元素，设置明显的延迟或过渡是不可接受的——用户将没有时间接收界面响应，而只会移动光标。
对于使用键盘而不是光标进行导航的残障人士来说，无法通过悬停打开弹出元素。
免费加载 12 种产品，无需短信
在多页面目录中，用户并不非常有意识地使用特定页面的选择——他们经常随机选择下一页或随机页面。
一种方便实用的技术是通常的分页和“加载更多”按钮的组合。用户不再需要选择特定的内容，并且可以更自由地导航到新页面。编号将告诉您当时处于浏览目录的哪个阶段。
如何提高内容页面的可用性而不丢失 SEO 指标 - 6 - image
“加载更多”方法与“延迟加载”很好地结合在一起，此时页面上的元素不是一次全部出现，而是以多个行的形式出现。
提高可用性的另一个措施是指示用户在下一个浏览阶段将看到多少新元素。
优化器会进行自己的调整：每个页面必须具有唯一的 URL 和元标记。否则，机器人会将所有页面视为一个页面，并且可能不会索引某些内容。
还有一个替代解决方案 - 无限滚动。它有很多缺点，其中最主要的一个是操作不直观以及浏览器中“后退”按钮的错误操作。
剧透，到处都是剧透！
如果某些内容对于SEO指标来说并不重要，而对于用户来说则是次要的，那么您可以安全地使用“显示更多”或“展开”剧透。
主要条件：不要将SEO文本、关键词或链接置于剧透下方。它们很有可能不会被索引或很快不会被纳入索引。
如何提高内容页面的可用性而不丢失 SEO 指标 - 7 - 图片
剧透很容易与实现分页的“加载更多”解决方案混淆。关键区别在于剧透中包含的内容已经在页面代码中，并且在分页时按需加载。
例外：扰流板在移动屏幕上效果很好，因为在自适应显示中它不会影响 SEO，但它允许您显着减少为机器人分配的文本内容的区域。
这里的手风琴不是“关于音乐”
Accordion 是两种解决方案的组合：旋转木马和扰流板。不是一个非常适合 SEO 的内容格式化解决方案。由于默认情况下大部分文本都是隐藏的，因此搜索机器人会忽略除展开元素之外的所有内容。
如何提高内容页面的可用性而不丢失 SEO 指标 - 8 - image
对于故意在页面上放置非唯一文本的情况来说，这是一个很好的解决方案 - 一些评论、常见问题、说明和其他供用户使用的文本，而不是索引。
否则，情况就接近轮播了：连续不超过3-5个元素，切换场景方便易懂，状态信息使用图标。
对于移动设备，手风琴通常可以让您摆脱产品卡和其他 荷兰电话号码数据 包含大量信息的繁琐页面上的选项卡。加载时，用户会看到主要的展开元素，其余元素以带有标题的可点击块的形式呈现。
这对用户有何影响？
如果您使用解决方案来减少专门 SEO 文本的可见部分，效果将是中性或积极的。
对于导航和销售元素 - 如果没有直观地理解实际上有更多的内容，它可能会产生负面影响。绝对建议注意可预测性和可控性用户界面。
损害部分隐藏内容可用性的主要错误：
轮播幻灯片切换太快，并且没有机制来跟踪用户的注意力以暂停动画。如果用户将鼠标悬停在轮播上或使用前进/后退按钮，建议停止自动切换。
所有手风琴块可以同时打开。使用手风琴的目的正是根据标题的含义分部分显示内容。如果您一次展开所有块，您将得到一面文字墙。
水平滚动或滑动不会向用户提供有关内容实际大小的信息。该块应包含提示：最后一个可见段的突出部分、进度条、可以“拉动”的控制元素等。
选项卡中隐藏了大量冗余信息；选项卡名称不明确。建议不要过度使用选项卡，给它们提供清晰的名称，并且如果在单独的块中呈现内容，不要懒惰地添加有关内容量的信息。
使用“加载 N 更多”的页面导航会向页面添加太多元素，降低体验，并在服务器上产生负载。您不应加载超过一屏或一屏半的新内容。如果元素太多，用户很可能会错过第一行元素并专注于最后一行。
并非所有用户都是一样的
当使用复杂的场景与内容交互时，我们不能忘记残疾用户。地球上大约有七个人属于这个定义。此外，残疾不仅应被理解为身体问题，还应被理解为活动和参与的限制。
其中许多用户不得不使用辅助技术来输入和输出信息，并放弃我们熟悉的交互类型。
禁用的选项卡功能或焦点伪选择器的隐式样式剥夺了无需鼠标而仅使用键盘执行导航操作的能力。示例：用户在不使用鼠标的情况下将无法切换手风琴元素。
功能和注意力有限的人无法访问通过悬停光标触发的弹出元素。一个人根本无法执行激活该元素所需的操作。
轮播中幻灯片的变化太快或不可逆转 - 内容的可用性在时间上受到严重限制。
无法捕获弹出元素的状态以进行详细研究。示例：一旦光标离开预期区域就会关闭的菜单。
减慢交互速度的动画和过渡。
一般结论：
本文描述的提高可用性的方法是减少SEO文本分配的空间并优化内容块的布局。
需要鼓励用户阅读标题、带有销售文本的视觉突出部分，而“机器人”内容几乎仍然在幕后。
如何实现这一点以及它将如何影响 SEO 指标：
汉堡菜单- 对人体无害SEO推广，但并不总是合适的。有必要考虑用户的习惯；在某些情况下可能会观察到使用导航的活动减少。自适应布局中的标准情况。
推广页面时，带有文本块的轮播（滑块）是安全的。如果甚至有文本将被阅读的提示，您需要将其放入 3-4 张幻灯片并方便地放置控件。自动滚动 - 否。
块的水平滚动（类似于移动应用程序中的刷卡） -不会对首席执行官。它并不总是方便，需要设计者了解情况。不适合在线商店，存在用户看不到某些产品的风险。建议将重要信息或号召性用语放置在可见区域。
选项卡- 可以按照以下要求使用：
每个选项卡都有一个唯一的 URL，具有自己的元标记。
选项卡内是简单的 html。不要将其包装在 java 脚本中，不要异步加载选项卡的内容。
默认打开的第一个选项卡应包含 SEO 文本。对于在线商店的产品页面，这可能是产品的特征和描述。
弹出窗口和模式元素（导航、工具提示等）的实现应考虑到用户的清晰度。您需要清楚地了解什么操作（单击、点击、悬停）会导致元素激活。可能会降低页面的可访问性。推荐用于上下文提示和次要目标操作。
可以使用“Load more N”分页- - ，符合要求：
每个后续页面都有唯一的 URL 和元标记。
明确指定将显示多少个新元素。
使用经典分页进行复制，并允许用户独立选择所需的页面。
可以与延迟加载结合使用来优化加载——随着页面滚动逐行加载元素
剧透“展开，显示更多” - 建议使用它来仅降低您不介意从索引中删除的内容的可见性。关键词和链接的权重降低了。
带有文本块的手风琴- 类似于扰流板，可防止内容的自由索引和链接权重的传输。可用于形成包含评论、常见问题解答和其他类似元素的块，这些元素无需更改即可放置在网站的多个页面上。
通过实施所有这些解决方案，您可以有效地减少分配给 SEO 文本的可见区域，将正确的重点放在对用户真正重要的信息上，而不强迫他阅读所有内容。
与此同时，排名的恶化和搜索流量的减少是无法预测的，而这种情况通常是这样的重新设计或布局的根本改变。