在构建响应式网站时，我有时会使用背景图像来为适当的屏幕尺寸呈现适当的图像。

例如:

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

为了让屏幕阅读器知道我们正在处理哪种元素，我添加了

role="img"

还有一个

aria-label

这是我的问题:

我一直了解到，SEO 最好在实际图像元素中添加公司 Logo 等图像。

例如

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

原因是当谷歌图片搜索公司名称时， Logo 会出现。 (假设网站排名足够好)

当作为 div 实现时，Google 是否仍会“刮掉” Logo ？例如

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

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

最佳答案

使用 img 标签。出于多种原因，它更好。

何时使用 <img />

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

何时使用 CSS background-image

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

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

1. Logo 图像具有语义意义并与内容相关。所以从语义的 Angular 来看，这是正确的做法。
2. Google 不会自动为背景图片编制索引，否则图片搜索结果将充满图片 Sprite 。谷歌尚未就此正式发表声明，但它很可能会为带有 aria 标签的 div 添加更多值(value)，尽管图像很可能仍然具有更多值(value)。 (不过 Bing 应该不会对此做任何事情)

因此:最好使用 img标签

关于html - 什么在搜索引擎中会被索引得更好 : img tags or background-images with screenreader tags?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25773047/