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

我想做两件事：

知道我对SEO友好，并且正确插入了文本（这样搜索引擎就会知道这是“我的徽标”）

了解如何在屏幕小于特定宽度时调整徽标的大小（假设我知道如何处理媒体查询）

---

我应该怎么做才能实现这两个目标？我的CSS应该是什么？我是否正确编写了代码？

使用alt属性可以满足您的第一个要求。此文本由搜索引擎使用，不在浏览器中显示

当由于某种原因（例如用户已禁用图像加载）无法加载图像时，也将使用此选项

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

编辑： stack overflow徽标使用此技术，使用firebug并查看：p

编辑：

---

问：不添加和不可见有什么区别？ 答：大多数搜索引擎都会读取你在alt标记中输入的内容，这也会显示给使用文本浏览器的用户。据说更复杂的搜索引擎工作方式不同，尽管文本缩进技巧目前是我所有测试中最有效的方法，可以将搜索引擎可读的文本输入到使用图像的徽标和菜单中。这一切都是正常的y取决于用户的选择。alt标记是一种有效的方法。我个人认为文本缩进的seo效果更好。

如果使用

，则可以将背景图像添加到

（使用CSS代码中删除的“a”选择器尝试演示-您将无法单击徽标）

不添加和不可见有什么区别？
<h1>
  <a href="http://www.mysite.com">Text that search engines will see but not users</a>
</h1>

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

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

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