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

Posted 2023-03-05

技术标签:

【中文标题】什么会在搜索引擎中更好地被索引：img 标签或带有屏幕阅读器标签的背景图像？【英文标题】：What will be indexed better in search engines: img tags or background-images with screenreader tags? 【发布时间】：2014-11-04 13:15:48 【问题描述】：

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

例如：

    #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">

原因是在谷歌图片搜索公司名称时会显示徽标。（假设网站排名足够好）

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

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

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

【问题讨论】：

这个问题属于webmasters.stackexchange.com 【参考方案1】：

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

何时使用<img />

被搜索引擎索引

alt

title

何时使用 CSS background-image

纯粹用于设计的图像。与内容无关。我们可以使用 CSS3 播放的小图像。重复图片（在博客作者图标中，每篇文章都会重复日期图标等）。

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

徽标图像具有语义含义并与内容相关。所以从语义的角度来看，这是正确的做法。 Google 不会自动索引背景图片，否则图片搜索结果将充满图片精灵。谷歌尚未就此正式发表声明，但它很可能会为带有 aria 标签的 div 添加更多价值，尽管图像很可能仍然具有更多价值。（据说 Bing 对此并没有做任何事情）

所以：最好使用img 标签

【讨论】：

正如@koenpeters 所说，如果您希望您的徽标正确编入索引并与您的品牌相关联，则必须使用 alt 标签。自 2014 年回答此问题以来，目前在 google 上索引背景图像的状态如何？我认为即使现在使用 css / JS，谷歌在网络报废方面也更加智能！ :)【参考方案2】：