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

Question

我想做两件事:

1. 知道我SEO 友好并且我正确插入了文本(这样搜索引擎就会知道这是“我的 Logo ”

2. 了解如何在屏幕低于特定宽度时调整 Logo 的大小(假设我知道如何使用媒体查询)

   <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;
}

编辑: stack overflow logo就用到了这个技巧，用firebug看看吧:p

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