html - 如何使用 Figure 标签将 SEO 的 Alt 和 Title 添加到响应式设计

Question

如何使用针对 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 更改它。

Answer 1

如果您希望这些图像在任何现代搜索引擎图像搜索中排名(我猜这就是您问题的目的)，那么您不应该将它们用作 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">