如何使用针对 SEO 优化的图像以及 Alt 和标题构建响应式移动优先页面?
目前我像这样更改 CSS 文件中的图像源:
section.value-offer > div.container > figure {
background: url('../Images/Shop/img.childrens.480x320.jpg') top center no-repeat;
background-size: cover;
padding-bottom: 66.66666666%;
height: 0;
}
在 HTML 中我只使用:
<figure></figure>
然后在下一个页面尺寸的 CSS 响应部分我会这样做:
@media only screen and (min-width : 480px) {
background: url('../Images/Shop/img.childrens.768x511.jpg') top center no-repeat;
}
但是我做不到:
<figure alt="Image of Childrens" title="Image of Childrens"></figure>
而且我无法将 IMG 标签与 SRC 放在一起,因为我无法仅使用 CSS 更改它。
最佳答案
如果您希望这些图像在任何现代搜索引擎图像搜索中排名(我猜这就是您问题的目的),那么您不应该将它们用作 css 背景图像,因为它们不会被索引。使用语义 html ( <figure>
) 是一个正确的选择,但根据图像和内容结构,您也可以使用普通的 <img>
。标签。如果您需要了解有关 responsive images 的更多信息,这是一个很好的起点.
我还推荐使用前面提到的 scrset,尽管 IE 没有采用这个属性。有一个简单的解决方法,IE 将忽略 scrset
属性,但仍使用 src
因此您可以从那里获取默认的 IE 图像:
<img src="default.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="your_alt">
关于html - 如何使用 Figure 标签将 SEO 的 Alt 和 Title 添加到响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51047299/