CSS 用徽标图像替换 H1 文本：搜索引擎优化和可访问性的最佳方法？

Question

提问by Andrew

It seems like there are a few different techniques out there, so I was hoping to get a "definitive" answer on this...

似乎有一些不同的技术，所以我希望得到一个“明确”的答案......

On a website, it's common practice to create a logo that links to the homepage. I want to do the same, while best optimizing for search engines, screen readers, IE 6+, and browsers who have disabled CSS and/or images.

在网站上，通常的做法是创建一个链接到主页的徽标。我想做同样的事情，同时针对搜索引擎、屏幕阅读器、IE 6+ 和禁用 CSS 和/或图像的浏览器进行最佳优化。

Example One:Doesn't use an h1 tag. Not as good for SEO, right?

示例一：不使用 h1 标签。对 SEO 不太好，对吧？

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Example Two:Found this somewhere. The CSS seems a little hacky.

示例二：在某处找到了这个。CSS 似乎有点hacky。

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

Example Three:Same HTML, different approach using text-indent. This is the "Phark" approach to image replacement.

示例三：相同的 HTML，使用文本缩进的不同方法。这是图像替换的“Park”方法。

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

Example Four:The Leahy-Langridge-Jefferies method. Displays when images and/or css is turned off.

示例四：Leahy-Langridge-Jefferies 方法。当图像和/或 css 关闭时显示。

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don't let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

What method is the best for this sort of thing? Please provide html and css in your answer.

什么方法最适合这种事情？请在您的答案中提供 html 和 css。

Answer 1

采纳答案by Rahul

You're missing the option:

你错过了这个选项：

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

title in href and img to h1 is very, very important!

href 和 img 中的标题到 h1 非常非常重要！

Answer 2

回答by Rob Knight

I do it mostly like the one above, but for accessibility reasons, I need to support the possibility of images being disabled in the browser. So, rather than indent the text from the link off the page, I cover it by absolutely positioning the <span>to the full width and height of the <a>and using z-indexto place it above the link text in the stacking order.

我主要像上面那样做，但出于可访问性的原因，我需要支持在浏览器中禁用图像的可能性。因此，我没有从页面上的链接中缩进文本，而是通过将绝对定位<span>到的全宽和高度<a>并使用z-index将其按堆叠顺序放置在链接文本上方来覆盖它。

The price is one empty <span>, but I'm willing to have it there for something as important as an <h1>.

价格是一个空的<span>，但我愿意把它放在那里作为一个重要的东西<h1>。

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }

Answer 3

回答by se_pavel

If accessibility reasons is important then use the first variant (when customer want to see image without styles)

如果可访问性原因很重要，则使用第一个变体（当客户想要查看没有样式的图像时）

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

No need to conform imaginary SEO requirements, because the HTML code above has correct structure and only you should decide does this suitable for you visitors.

不需要符合想象的 SEO 要求，因为上面的 HTML 代码具有正确的结构，只有您应该决定这是否适合您的访问者。

Also you can use the variant with less HTML code

您也可以使用具有较少 HTML 代码的变体

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>

/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

Please note that I have removed all other CSS styles and hacks because they didn't correspond to the task. They may be usefull in particular cases only.

请注意，我已经删除了所有其他 CSS 样式和技巧，因为它们与任务不对应。它们可能仅在特定情况下有用。

Answer 4

回答by Ross

I think you'd be interested in the H1 debate. It's a debate about whether to use the h1 element for the page's title or for the logo.

我想你会对H1 辩论感兴趣。关于是将 h1 元素用于页面标题还是徽标，这是一个争论。

Personally I'd go with your first suggestion, something along these lines:

就我个人而言，我会同意您的第一个建议，大致如下：

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

Of course this depends on whether your design uses page titles but this is my stance on this issue.

当然这取决于你的设计是否使用页面标题，但这是我在这个问题上的立场。

Answer 5

回答by Mattypants

Chiming in a bit late here, but couldn't resist.

在这里加入有点晚，但无法抗拒。

You're question is half-flawed. Let me explain:

你的问题有一半是错误的。让我解释：

The first half of your question, on image replacement, is a valid question, and my opinion is that for a logo, a simple image; an alt attribute; and CSS for its positioning are sufficient.

你的问题的前半部分，关于图像替换，是一个有效的问题，我的意见是，对于一个标志，一个简单的图像；alt 属性；和 CSS 对其定位就足够了。

The second half of your question, on the "SEO value" of the H1 for a logo is the wrong approach to deciding on which elements to use for different types of content.

您问题的后半部分，关于徽标 H1 的“SEO 价值”是决定将哪些元素用于不同类型的内容的错误方法。

A logo isn't a primary heading, or even a heading at all, and using the H1 element to markup the logo on each page of your site will do (slightly) more harm than good for your rankings. Semantically, headings (H1 - H6) are appropriate for, well, just that: headings and subheadings for content.

徽标不是主要标题，甚至根本不是标题，并且使用 H1 元素在您网站的每个页面上标记徽标对您的排名（略）弊大于利。从语义上讲，标题（H1 - H6）适用于：内容的标题和副标题。

In HTML5, more than one heading is allowed per page, but a logo isn't deserving of one of them. Your logo, which might be a fuzzy green widget and some text is in an image off to the side of the header for a reason - it's sort of a "stamp", not a hierarchical element to structure your content. The first (whether you use more depends on your heading hierarchy) H1 of each page of your site should headline its subject matter. The main primary heading of your index page might be 'The Best Source For Fuzzy Green Widgets in NYC'. The primary heading on another page might be 'Shipping Details for Our Fuzzy Widgets'. On another page, it may be 'About Bert's Fuzzy Widgets Inc.'. You get the idea.

在 HTML5 中，每页允许有多个标题，但一个徽标不值得其中之一。您的徽标可能是一个模糊的绿色小部件，并且出于某种原因，某些文本位于标题一侧的图像中 - 它是一种“图章”，而不是用于构建内容的分层元素。第一个（您是否使用更多取决于您的标题层次结构）您网站每个页面的 H1 应该作为其主题的标题。索引页面的主要标题可能是“纽约市模糊绿色小部件的最佳来源”。另一个页面上的主要标题可能是“我们的模糊小部件的运输详细信息”。在另一个页面上，它可能是“关于 Bert's Fuzzy Widgets Inc.”。你明白了。

Side note: As incredible as it sounds, don't look at the source of Google-owned web properties for examples of correct markup. This is a whole post unto itself.

旁注：尽管听起来令人难以置信，但不要查看 Google 拥有的网络资产的来源以获取正确标记的示例。这本身就是一个完整的帖子。

To get the most "SEO value" out HTML and its elements, take a look at the HTML5 specs, and make make markup decisions based on (HTML) semantics and value to users before search engines, and you'll have better success with your SEO.

要从 HTML 及其元素中获得最大的“SEO 价值”，请查看HTML5 规范，并在搜索引擎之前根据 (HTML) 语义和对用户的价值做出标记决策，您将获得更好的成功搜索引擎优化。

Answer 6

回答by Vishal Gupta

<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

This was the good option for SEO because SEO gives the H1 tag high priority, inside the h1 tag should be your site name. Using this method if you search the site name in SEO it will show your site logo as well.

这是 SEO 的好选择，因为 SEO 给予 H1 标签高优先级，h1 标签内应该是您的网站名称。如果您在 SEO 中搜索站点名称，则使用此方法它也会显示您的站点徽标。

you want to hide the site name OR text please use text-indent in negative value. ex

您想隐藏站点名称或文本，请在负值中使用文本缩进。前任

h1 a {
 text-indent: -99999px;
}

Answer 7

回答by 30ml

You missed title in <a>element.

您错过了<a>元素中的标题。

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

I suggest to put title in <a>element because client would want to know what is the meaning of that image. Because you have set text-indentfor the test of <h1>so, that front end user could get information of main logo while they hover on logo.

我建议将标题放在<a>元素中，因为客户想知道该图像的含义是什么。因为你已经设置text-indent了这样的测试<h1>，前端用户可以在他们悬停在徽标上时获取主徽标的信息。

Answer 8

回答by Sebastien Horin

How W3C does?

W3C是怎么做的？

Simply have a look a look at https://www.w3.org/. The image has a z-index:1, the text is here but behind because of the z-index:0coupled to the position: absolute;

只需看看https://www.w3.org/。图像有一个z-index:1，文本在这里但由于z-index:0耦合到position: absolute;

The original HTML:

原始 HTML：

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

The original CSS:

原始CSS：

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}

Answer 9

回答by DFA

One point no one has touched on is the fact that the h1 attribute should be specific to every page and using the site logo will effectively replicate the H1 on every page of the site.

没有人提到的一点是 h1 属性应该特定于每个页面，并且使用站点徽标将有效地在站点的每个页面上复制 H1。

I like to use a z index hidden h1 for each page as the best SEO h1 is often not the best for sales or aesthetic value.

我喜欢为每个页面使用 az index hidden h1，因为最好的 SEO h1 通常不是最好的销售或美学价值。

Answer 10

回答by c_sea

A new (Keller) method is supposed to improve speed over the -9999px method:

一种新的 (Keller) 方法应该可以提高 -9999px 方法的速度：

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

recommended here:http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

这里推荐：http: //www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

CSS 用徽标图像替换 H1 文本：搜索引擎优化和可访问性的最佳方法？

提问by Andrew

采纳答案by Rahul

回答by Rob Knight

回答by se_pavel

回答by Ross

回答by Mattypants

回答by Vishal Gupta

回答by 30ml

回答by Sebastien Horin

How W3C does?

W3C是怎么做的？

回答by DFA

回答by c_sea

相关推荐

最近更新

标签

CSS 用徽标图像替换 H1 文本：搜索引擎优化和可访问性的最佳方法？

提问by Andrew

采纳答案by Rahul

回答by Rob Knight

回答by se_pavel

回答by Ross

回答by Mattypants

回答by Vishal Gupta

回答by 30ml

回答by Sebastien Horin

How W3C does?

W3C是怎么做的？

回答by DFA

回答by c_sea

相关推荐

CSS 宽度 100% 包括溢出

是否有 Ruby on Rails 布局/css 存档？

CSS 布局，使用 CSS 重新排序 DIV

浏览器打印预览不显示 CSS 背景

相关推荐

最近更新

标签