我正在开发的网站使用 CSS 中定义的图像作为主徽标。 html 代码如下所示：
<h1>Something.com | The best something ever</h1>
我想只显示 CSS 中定义的图像，并将信息从 h1 标签传递到搜索引擎。
正确的做法是什么？谷歌对此非常严格，我知道display:none是错误的，那么visibility:hidden呢？
提前致谢！
你应该没问题
visibility: hidden也就是说，如果您的图像是内容的一部分（我敢说公司徽标是内容，而不是演示），并且您关心可访问的 html，那么您应该考虑更改代码以将图像包含为带有
imgtitlealtbackground-image此外，如果您希望将搜索引擎吸引到
<h1>h1最简单、万无一失、最好的 SEO 解决方案是
<h1><img src=logo.png alt="Something.com | The best something ever"></h1>
将图像设置为 h1 的背景（设置宽度/高度以使其适合），然后将文本缩进设置为疯狂的值，例如 -9999px。这样，当 css 被禁用（例如被抓取）时，机器人将看到标题中的文本而不是背景。
示例：
CSS
#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}
HTML
<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>
执行此操作的“正确”方法是将文本放在标题栏或页面的元文本中。
如果您首先隐藏
<h1><h1>不要只使用
<h1><h1>汽车维修
汽车维修是与我理论上正在处理的特定页面相关的关键字。
希望这是有道理的。
此处解释了有关此问题的完整文章https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ 所以，当我工作时，我使用此代码来支持屏幕阅读器以及隐藏一些 h1 并使用图片而不是像（徽标）那样的
.offscreen{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
要了解更多信息，请点击链接
<h1 style="font-size: 2px; margin: 0px;">Something goes here</h1>
就像魅力一样......;-) 屏幕阅读器会解释它并且不会影响您的 SEO。
我认为
visibility: hidden;您的网站仅由一个页面组成吗？
否则，您应该将每个页面的标题放在
h1调整块大小就可以了：
h1 {
overflow: hidden;
width: 1px;
height: 1px;
}
某些框架（例如 Bootstrap、TailwindCSS）将使用
visually-hiddensr-only示例：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}