如果它已经作为大漫画图像的一部分存在，如何处理重复的文本 h1？

编程问答 2022-05-31

问题描述

假设您有一个显示大漫画图像的页面。对于人类用户，漫画图像已经包含要放入 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 以提供更详细的漫画描述，以便使用辅助技术的人获得更公平的体验。

htmlsemantic-markup