Question

喜欢这个：

<a href="/" id="logo"></a>

或者我应该这样做而是将font-size更改为零：

<a href="/" id="logo">Home</a>

编辑：这里没有人似乎理解我的问题。所以我也会发布一些CSS：

#logo {
    display: block;
    width: 326px;
    height: 69px;
    background-image: url(images/logo.gif);
    background-repeat: no-repeat;
}
#logo:hover {
    background-image: url(images/logo-hover.gif);
}

它看起来像那样，所以我不能用图像替换它，因为那样悬停就不起作用了。似乎没有解决方案，所以我想我会跳过它。

Answer 1

不论是否存在任何搜索引擎优化问题，不包括某种形式的描述性文本（文本，标题或说明）将是严重的可访问性失败。

编辑：如果您要求如何隐藏链接的文本，并希望使用背景图像，那么有几种方法可以做到这一点。我喜欢的选择（如果可能的话）是提供一个固定的高度，然后提供一个大约3倍的线高，然后关闭溢出。您还可以调整字母间距以将宽度减小到零，例如来自生产代码：

background：transparent url（../ images / sprites / icons.gif）no-repeat;

  a.foo
  {
    width: 16px;
    height: 16px;
    display: block;
    overflow: hidden;
    line-height: 666px;
    letter-spacing: -1.1em;
  }

Answer 2

据我了解，Google确实使用链接文字对网页进行排名。传入链接文本为“foo”的页面在搜索“foo”时会为该页面提供更高的搜索结果位置。

使用您的示例，您可以执行以下操作：

在链接中使用描述性文字：

<a href="#bar" id="foo">Foo</a>

<style type="text/css">
a.foo {
  display: block;
  text-indent: -999em; /* Hide the text, using a negative indent (only works on single lines) */
  background: url(foo.png) no-repeat;
  width: 329px;
  height: 69px;
}

a.foo:hover {
  background-position: 0 -69px; /* Using spites to switch between normal and hover state */
}
</style>

使用页面中的图片：

<a href="#bar" id="foo"><img src="foo.png" width="329" height="69" alt="Foo" /></a>

<style type="text/css">
a.foo:hover {
  background: url(foo-hover.png) no-repeat;
}

a.foo:hover img {
  visibility: hidden; /* Hide the image on hover, so the background of the link is shown, but dimensions and page flow stay the same */
}
</style>

您选择哪种方法取决于您想要使用它做什么。例如：如果您要创建打印样式表，则首选使用图像，因为不会打印背景图像（默认情况下）。

Answer 3

您应该为链接提供图片或文字。如果你去图像路线，一定要有备用文字来描述图像和/或链接目的地。

未能为链接提供任何上下文，这是你现在正在做的事情，没有任何东西是一个链接，可用性很差，因为对于使用传统浏览器的用户或任何方式的屏幕阅读器没有视觉提示处理链接。

Answer 4

更好的方法可能是将图像放入标签中; a：hover CSS仍可以使用它（至少对某些浏览器而言）。举个简单的例子，

a { color: #30f; }

a:active, a:hover   {   
  text-decoration: none;
  color: #F30;
  background: yellow;
}

会导致黄色条出现在a href中的图像旁边。

Answer 5

在SEO方面，只要涉及图像，就需要Atl标签。

谷歌如何看待没有文字的链接，只有背景？

5 个答案: