在构建响应式网站时,我有时会使用背景图像来为适当的屏幕尺寸呈现适当的图像。
例如:
#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 />
- 当您的图片需要被搜索引擎编入索引
- 如果它与内容有关而不是设计。
- 如果您的图片不是太小(不是标志性图片)。
- 可以添加的图片
alt
和title
属性。
何时使用 CSS background-image
- 图片纯粹用于设计。
- 与内容无关。
- 我们可以使用 CSS3 播放的小图像。
- 重复图片(在博客作者图标中,日期图标将为每篇文章等重复)。
根据上面的列表和一些观察,我们有以下理由使用 img
标签:
- Logo 图像具有语义意义并与内容相关。所以从语义的 Angular 来看,这是正确的做法。
- Google 不会自动为背景图片编制索引,否则图片搜索结果将充满图片 Sprite 。谷歌尚未就此正式发表声明,但它很可能会为带有 aria 标签的 div 添加更多值(value),尽管图像很可能仍然具有更多值(value)。 (不过 Bing 应该不会对此做任何事情)
因此:最好使用 img
标签
关于html - 什么在搜索引擎中会被索引得更好 : img tags or background-images with screenreader tags?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25773047/