Question

我想做两件事：

知道我 SEO友好并且我正确插入了文字（因此搜索引擎会知道这是“我的徽标”

了解如何在屏幕低于特定宽度的情况下调整徽标大小（假设我知道如何使用媒体查询）

<div id="myLogo">
  <a href="#">
       <img src="css/img/my_logo.png" alt="My Logo">
  </a>  
</div><!--End of #myLogo-->

我应该怎么做才能实现它们？什么应该是我的CSS，我是否正确编写了代码？

Answer 1

<h1>
  <a href="http://www.mysite.com">Text that search engines will see but not users</a>
</h1>

和css

h1{
   background-image:url(mylogo.png);
   width:100px;
   height:100px;
   text-indent: -99999px;
}

编辑：堆栈溢出徽标使用此技术，使用firebug并查看：p

编辑：问：不添加它和不可见之间的区别是什么？答：大多数搜索引擎会读取你在alt标签中放置的内容，这也将显示给使用文本浏览器的人。据说更复杂的搜索引擎的工作方式不同，尽管文本缩进技巧目前是我所有测试的最佳方式，以便将搜索引擎可读文本转换为使用图像的徽标和菜单等内容。它通常归结为用户选择。 alt标签是一种有效的方法。我个人只是从文本缩进中得到了更好的seo结果。

Answer 2

使用alt属性的内容将适用于您的第一个要求。此文本由搜索引擎使用，未在浏览器中显示。

当出于某种原因（例如，用户已禁用图像加载）时，也会使用此图像。

Answer 3

如果您使用<h1>，请将背景图片添加到<a>而不是<h1>本身，就像在“tom at zepsu dot com”中的旧示例中一样。

JSFiddle Demo（尝试在CSS代码中移除“a”选择器的演示 - 您将无法点击徽标）

   <h1 id="hlogo">
      <a href="#">Stack Overflow</a>
   </h1>

CSS：

    #hlogo a { /*code goes here*/ }

为可调整大小的徽标添加不可见文本的正确方法是什么

3 个答案: