seo - 文本定位/文本缩进屏幕外(用于屏幕阅读器)正在被 Google 抓取，有没有办法从 SEO 中隐藏某些元素？

Question

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

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

然而，我最近意识到当这个页面出现在谷歌搜索上时，描述说:“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 */
}