在搜索引擎中索引會更好：img標籤或具有screenreader標籤的背景圖片？

Question

構建響應式網站時，我有時會使用背景圖像爲合適的屏幕尺寸渲染適當的圖像。

如：

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

爲了讓屏幕閱讀器知道什麼樣的元素，我們正在處理我添加

role="img" 

而一個

aria-label 

這裏是我的問題：

我有一個他們知道，在實際的圖像元素中添加像公司徽標這樣的圖像會更好。

如

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

的理由是，該標誌將出現在谷歌圖片上的公司名稱搜索。 （假設網站的排名足夠好）

當作爲div實施時，Google仍會「刮」徽標嗎？例如

<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. 谷歌不會自動索引背景圖像，否則圖像搜索結果將充滿圖像精靈。谷歌並沒有正式聲明這一點，但它很可能會增加帶有詠歎調品牌的div的價值，儘管一張圖片很可能仍然會有更多價值。 （兵理應不會與這雖然做任何事情）

所以說：這是最有可能最好使用一個img標籤