Html 隐藏 <h1> 标签而不被 Google 禁止的正确方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3239202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the correct way to hide the <h1> tag and not be banned from Google?
提问by Martin Zahuta
The website I am working on uses an image defined in CSS as the main logo. The html code looks like this:
我正在开发的网站使用 CSS 中定义的图像作为主徽标。html 代码如下所示：
<h1>Something.com | The best something ever</h1>
I would like to display just the image defined in CSS and pass the information from the h1 tag to the search enginges only.
我只想显示在 CSS 中定义的图像，并将信息从 h1 标签传递给搜索引擎。
What's the correct way to do this? Google is very strict about this, I know that display:none is wrong, what about visibility: hidden ?
这样做的正确方法是什么？谷歌对此非常严格，我知道 display:none 是错误的，visibility: hidden 呢？
Thanks in advance!
提前致谢！
回答by hpique
You should be fine with visibility: hidden.
你应该没问题visibility: hidden。
That said, if your image is part of the content(and I would dare to say that a company logo is content, not presentation), and you care about accessible html, you should consider changing your code to include the image as a imgelement with titleand alternate text, instead of a css background-image.
也就是说，如果您的图像是内容的一部分（我敢说公司徽标是内容，而不是演示文稿），并且您关心可访问的 html，则应考虑更改代码以将图像作为img元素包含在title和alternate 文本，而不是 css background-image。
Additionally, if you hope to attract search engines to the keywords inside the <h1>element, you might want to include those words more than once in the page. The page title is a much more relevant place than the h1element, for example.
此外，如果您希望将搜索引擎吸引到<h1>元素内的关键字，您可能希望在页面中多次包含这些词。例如，页面标题是比h1元素更相关的地方。
回答by Ms2ger
The easiest, foolproof, best for SEO solution would be
最简单、万无一失、最适合 SEO 解决方案的是
<h1><img src=logo.png alt="Something.com | The best something ever"></h1>
回答by cdutson
set the image as the background of your h1 (set the width/height so it fits) then set your text-indent to something crazy like -9999px. That way when css is disabled (such as being crawled) the bot will see the text in the header instead of the background.
将图像设置为 h1 的背景（设置宽度/高度使其适合），然后将文本缩进设置为 -9999px 之类的疯狂内容。这样，当 css 被禁用（例如被抓取）时，机器人将看到标题中的文本而不是背景。
example:
例子：
CSS
CSS
#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}
HTML
HTML
<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>
回答by user3633421
<h1 style="font-size: 2px; margin: 0px;">Something goes here</h1>
Works like a charm.... ;-) The screen readers will interpret it and won't affect your SEO.
就像一个魅力.... ;-) 屏幕阅读器会解释它，不会影响您的搜索引擎优化。
回答by talkingD0G
You're not going to get good SEO results if you, first hide the h1, and second use generic phrases inside the h1.
如果您首先隐藏 h1，然后在 h1 中使用通用短语，您将不会获得良好的 SEO 结果。
Don't just use the h1 for sizing, you can use classes to style.
不要只使用 h1 来调整大小，您可以使用类来设置样式。
H1 tags should contain keyword rich information such as:
H1 标签应包含关键字丰富的信息，例如：
Automotive Repair
汽车维修
Automotive repair being the keyword that relates to the particular page I'm theoretically working on.
汽车维修是与我理论上正在处理的特定页面相关的关键字。
Hope that makes sense.
希望这是有道理的。
回答by me_and
The "correct" way to do this is to have the text in the title bar or in your page's meta text.
执行此操作的“正确”方法是将文本放在标题栏或页面的元文本中。
回答by me_and
I think that visibility: hidden; would work fine. Have you tried it yet?
我认为可见性：隐藏；会工作得很好。你试过了吗？
回答by Chikiro
Resizing the block would work:
调整块大小会起作用：
h1 {
overflow: hidden;
width: 1px;
height: 1px;
}
回答by Guffa
Does your web site consist of just one single page?
您的网站是否只有一页？
Otherwise you should put the headline of each page in the h1tag, not the tagline of the site. Repeating the same headline on every page would make it pretty much useless.
否则，您应该将每个页面的标题放在h1标签中，而不是网站的标语中。在每一页上重复相同的标题会使它变得毫无用处。
回答by Motaz Homsi
A full article in this matter is explained here https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/So , when i work i use this code to support screen reader as well as hide some h1's and use pictures instead of it like (logo)
此处解释了有关此事的完整文章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;
}
to find more follow the link
要找到更多，请点击链接
