如何解决如果它已经作为大漫画图像的一部分存在,如何处理重复的文本 h1?
假设您有一个显示大漫画图像的页面。对于人类用户,漫画图像已经包含要放入 h1(漫画标题)的文本。在用户体验方面,显示此内容是不必要且具有破坏性的。
(切出一张图片以在 h1 中显示它并带有 alt 文本是不可能的,因为为了重新分发,图片应该作为单个实体存在。)
在不影响用户体验的情况下,让搜索引擎知道 h1 内容的语义正确的方法是什么?
选项 1(包括但不显示 h1):
<article id="todays-comic">
<h1 style="display: none;">Sandwich</h1>
<figure>
<img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
</figure>
</article>
问题:
- 很长一段时间以来,SEO 一直被认为是非常糟糕的做法,
- 没有办法让引擎知道我们的好意。
选项 2(将 h1 隐藏在图像下方):
<article id="todays-comic" style="position: relative;">
<h1 style="position: absolute; top: 0; z-index: 1;">Sandwich</h1>
<figure>
<img style="position: absolute; top: 0; z-index: 2;" src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
</figure>
</article>
问题:
- 引擎可以很聪明地看到 h1 是隐藏的,
- 并认为这是一种比“display: none;”更恶意的欺骗方式,
- 而且没有办法让引擎知道我们的好意。
选项 3(将 h1 放在别处并设置样式):
<article id="todays-comic">
<figure>
<img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
</figure>
<h1 class="small-and-inconspicuous">Sandwich</h1>
</article>
问题:
- 仍可能被引擎视为误导,
- 尴尬的流程(除非采用传统结构但随后使用弹性订单重新定位,否则仍可能被视为具有误导性),
- 仍然需要显示不必要的信息。
选项 4(不包括 h1,将其添加到替代文本):
<article id="todays-comic">
<figure>
<img style="position: absolute; top: 0; z-index: 2;" src="sandwich-comic.jpg" alt="Sandwich. Comic about making a sandwich.">
</figure>
</article>
问题:
- 对 SEO 不利且缺乏语义:引擎不再理解该部分的 h1 应该是什么。
鉴于这种情况,隐藏重复的 h1 内容的最佳方法是什么?有没有更好的替代方案?
解决方法
第二个选项的变体。
正确标记 <h1>
内容(如果存在)对于语义和可访问性(以及因此 SEO)很重要。 <h1>
可以对视力正常的用户隐藏,但使用 display: none
会使辅助技术无法看到它,许多搜索引擎会忽略它。隐藏它的更好方法是采用类似于 Bootstrap's .sr-only
class 的方法,该方法视觉隐藏元素,而不会将它们从辅助技术中隐藏起来。
<article id="todays-comic">
<h1 class="sr-only">Sandwich</h1>
<img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
</article>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0);
border: 0;
}
没有更多上下文,很难知道 <figure>
元素是否有用。此外,您应该考虑在图像上使用 aria-describedby
以提供更详细的漫画描述,以便使用辅助技术的人获得更公平的体验。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。