用徽标图像替换H1文本：搜索引擎优化和可访问性的最佳方法？

似乎有一些不同的技术，所以我希望能得到一个“确定的”答案

在网站上，创建链接到主页的徽标是常见的做法。我也希望这样做，同时为搜索引擎、屏幕阅读器、IE6+和禁用CSS和/或图像的浏览器进行最佳优化

示例一：不使用h1标记。对搜索引擎优化没有那么好，对吗

&lt；div id=“logo”&gt；
&lt；a href=“”&gt；
&lt；img src=”https://stackoverflow.com/questions/665037/logo.png“alt=”堆栈溢出“/&gt；
&lt/a&gt；
&lt/部门&gt；

示例二：在某处找到了这个。CSS看起来有点粗糙

&lt；h1 id=“logo”&gt；
&lt；a href=“”&gt；堆栈溢出&lt/a&gt；
&lt/h1&gt；

/*css*/
#标志{
填充：70px0；
溢出：隐藏；
背景图片：url（“logo.png”）；
背景重复：无重复；
高度：0px！重要；
高度/**/：70px；
}

示例三：相同的HTML，使用文本缩进的不同方法。这就是图像替换的“Phark”方法

&lt；h1 id=“logo”&gt；
&lt；a href=“”&gt；堆栈溢出&lt/a&gt；
&lt/h1&gt；

/*css*/
#标志{
背景：透明url（“logo.png”）无重复滚动0%0%；
宽度：250px；
高度：70像素；
文本缩进：-3333px；
边界：0；
保证金：0；
}
#标志a{
显示：块；
宽度：280px；/*比实际图像大*/
高度：120px；
文字装饰：无；
边界：0；
}

示例四：Leahy-Langridge-Jefferies方法。关闭图像和/或css时显示

&lt；h1 id=“logo”class=“logo”&gt；
&lt；a href=“”&gt；堆栈溢出&lt/a&gt；
&lt/h1&gt；

/*css*/
h1.标志{
页边距顶部：15px；/*对于此特定站点，请根据需要进行设置*/
位置：相对；/*允许将子元素放置在相对于此元素的位置*/
溢出：隐藏；/*不要让内容泄漏到标题之外-不需要，因为锚定高度将覆盖整个标题*/
填充：0；/*需要用于对抗重置/默认样式*/
}
h1.a标志{
位置：绝对；/*默认为顶部：0，左侧：0，因此可以忽略这些*/
高度：0；/*隐藏文本，防止其达到峰值*/
宽度：100%；/*686px；填充父元素*/
背景位置：左上；
背景重复：无重复；
}
h1#标志{
高度：60px；/*替换图像的高度*/
}
h1#标志a{
填充顶部：60px；/*替换图像的高度*/
背景图像：url（“logo.png”）；/*替换图像*/
}

对于这类事情，什么方法是最好的？请在回答中提供html和css