谷歌正在抓取屏幕外文本定位/文本缩进（用于屏幕阅读器），有没有办法从 SEO 中隐藏某些元素？

Question

为了便于访问，我正在使用“仅限屏幕阅读器”类来隐藏页面上的文本。此类使用 position:absolute 和 text-ident 对视觉用户隐藏文本，但对屏幕阅读器显示。例如，在这里我有一个标题，我使用屏幕阅读器将常见问题解答作为 3 个单独的字母而不是一个单词一起阅读：

<h1> FAQ Page 
<span class="screenreader-only"><abbr>F A Q</abbr> Page </span> 
</h1>

但是，我最近意识到，当此页面出现在 Google 搜索中时，描述中显示：“FAQ PageF A Q Page ...”。这并不理想。有没有办法隐藏仅限屏幕阅读器的文本，以便谷歌不接受它？或者至少当用户在描述中搜索我的页面时它不会显示？

感谢您的帮助

Answer 1

你认为屏幕阅读器会看到什么？

它还会显示“常见问题页面，常见问题页面”，因为您没有从屏幕阅读器中隐藏原始文本（如果这是正确的方法，您可以在原始文本周围放置 <span> 并使用 aria-hidden="true"处理它，在这种情况下不是）。

虽然它没有回答问题，但这将在两个方面解决您的问题：

<h1>
    <abbr title="Frequently Asked Questions">FAQ</abbr>
</h1>

它将在搜索引擎中正确显示并且可以访问。

黄金法则是不要试图干扰屏幕阅读器的发音。如果单词在第一遍时没有意义（一次一个字母），您可以通过其他方式读出一个单词。

通过将<abbr> 元素与title 结合使用，还有其他信息可以解释该术语。

如果您想要 100% 可靠的方式（因为一些不起眼的屏幕阅读器不喜欢 title，即使在 <abbr> 元素上使用时也是推荐的方式）。您可以将术语链接到词汇表。我不建议在标题中使用它！

实际上，在您的示例/用例中它可以更简单

虽然我向您展示了如何添加 <abbr> 元素，但实际上“常见问题解答”是如此广泛使用并理解为：

<h1>
   FAQ
</h1>

完全可以接受。

再一次，使用屏幕阅读器的人很快就会明白这一点，如果他们不逐字逐句地阅读并理解它。

视觉隐藏的文字

大多数情况下，视觉上隐藏的文本会被 Google 忽略（无法保证）。

无论哪种方式，将文本移出屏幕都不利于可访问性。

因此，如果您使用 "proper" visually hidden class，这也会有所帮助，并且会更加健壮：

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}