什么将在搜索引擎中更好地索引:img标签或带有屏幕阅读器标签的背景图像？

Question

在构建响应式网站时,我有时会使用背景图像为适当的屏幕尺寸渲染合适的图像.

例如:

    #image { 
        background-image: url(largeimage.jpg); 
    }
    @media only screen and (max-width: 320px) {
        #image { 
            background-image: url(smallimage.jpg); 
        }
    }

为了让屏幕阅读器知道我们正在处理什么类型的元素,我添加

role="img"

和

aria-label

这是我的问题:

我一直都知道SEO最好在实际的图像元素中添加像公司徽标这样的图像.

例如

<img src="logo-companyname.png">

原因是当Google图像搜索公司名称时,徽标会显示.(假设网站排名很好)

谷歌在作为div实施时仍会"刮"出徽标吗？例如

<div id="logo-company" role="img" aria-label="company name"></div>

或者我是否仍需要在某处添加图像以获得所需的结果？谷歌是否会对屏幕阅读器标签做任何事情？

Answer 1

使用img标签.出于多种原因,它会更好.

何时使用 <img />

1. 当您的图像需要被搜索引擎编入索引时
2. 如果它与不设计的内容有关系.
3. 如果您的图像不是太小(不是图标).
4. 您可以添加alt和title属性的图像.

何时使用CSS background-image

1. 纯粹用于设计的图像.
2. 与内容无关.
3. 我们可以用CSS3玩的小图片.
4. 重复图像(在博客作者图标中,每个文章等将重复日期图标).

根据上面的列表和一些观察我们有这些理由使用img标签:

1. 徽标图像具有语义含义并且与内容有关.所以从语义的角度来看,这是正确的做法.
2. Google不会自动索引背景图像,否则图像搜索结果将填充图像精灵.谷歌尚未正式对此发表声明,但它最有可能通过aria标签为div增加更多价值,尽管图像很可能仍然具有更多价值.(Bing据说对此无所作为)

所以:最有可能最好使用img标签