带两个徽标的H1

问题描述：

我的网站标题中有两个徽标。 Replacing H1 text with a logo image: best method for SEO and accessibility?：带两个徽标的H1

我喜欢这里的解决方案

解决方案：根据马特削减（和其他一些评论）最好的解决办法是使用图像用alt和title属性。 alt属性用于SEO，title属性用于可访问性。使用图像对于语义标记也是有意义的。公司标志实际上是一个重要的内容。

<h1> 
    <a href="http://*.com"> 
    <img src="logo.png" alt="Stack Overflow" title="Click to return to Stack Overflow homepage" /> 
    </a> 
</h1>

如何使用2个logo？

<h1> 
    <a href="http://*.com"> 
    <img src="logo1.png" title="Click to return to Stack Overflow homepage" alt="logo1 " /> 
    </a> 
    <a href="http://*.com"> 
    <img src="logo2.png" title="Click to return to Stack Overflow homepage" alt="logo2" /> 
    </a> 
</h1>

那么h1会是：logo1 logo2？

请显示Matt在哪里说'title'是好的。标题属性不应该使用，因为辅助技术以不同的方式处理它。我有几个答案在谈论这个。 – 2013-03-12 14:18:01

你有一个真实的例子吗？这两个标志包含什么？ – unor 2013-03-13 14:13:12

答

您不应该使用h1作为徽标，正如Harry Roberts（http://csswizardry.com/2013/01/your-logo-is-still-an-image-and-so-is-mine/）所解释的那样。

如果你想使用两个标志，只需使用两个链接。

如果徽标代表网站标题，则应使用'h1'。否则，你的页面大纲可能是错误的。 – unor 2013-03-13 14:08:27

答

在两个徽标的情况下，它取决于上下文。您使用的两张图片，因为它们是两个不同的东西，即

<h2>Our Sponsors</h2> 
<a><img src="" alt="Google"/></a> <a><img src="" alt="MS"/></a> 
<a><img src="" alt="Adobe"/></a>

或者类似的东西：

<a><img src="" alt="Toyota"/><img src="" alt="Corolla"/></a>

如果是个第二，你应该做的：

<a><img src="" alt="Toyota Corolla"/><img src="" alt=""/></a>

对于辅助技术，第一辆丰田卡罗拉的例子会读作：

链接图像丰田花冠图像

和第二种方式：

链接图像丰田花冠。

有人说使用空值（alt=""）对可访问性和/或搜索引擎优化不利。这是错误的。如果图像用于装饰目的，应该使用null alt属性，因为它所做的只是添加不需要的聊天。曾几何时，搜索引擎过去常常使用null alt，但现在不再使用。

关于第二个示例：如果屏幕阅读器用户想要下载图像，他会认为第一个“img”是关于“丰田卡罗拉”，而不是关于“丰田”。机器人（如搜索引擎）也一样。 – unor 2013-03-13 14:11:04

我推荐将两者拼接在一起然后...... – 2013-03-13 14:24:04

带两个徽标的H1

相关推荐