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

Question

我想做两件事：

1. 知道我对SEO 很友好并且我正确插入了文本（所以搜索引擎会知道这是“我的徽标”

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

   <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 演示（尝试在 CSS 代码中删除“a”选择器的演示 - 您将无法单击徽标）

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

CSS：

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