如何使用图形标签将 SEO 的 Alt 和标题添加到响应式设计中

Question

如何使用Alt和Title构建响应式移动优先页面，其中包含针对SEO优化的图像？

目前，我像这样更改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

如果您有SEO/跨浏览器(包括IE(限制，我建议您这样做

使用此类 HTML 采用移动优先方法

<figure alt="Image of Childrens" title="Image of Childrens">
<img alt="Image of Childrens" title="Image of Childrens" src="../Images/Shop/img.childrens.480x320.jpg" />
</figure>

这意味着默认情况下，客户端(此处为移动(将获取专用于移动设备的较小图像

然后，对于更大的屏幕(台式机甚至平板电脑(，您将拥有这样的应用 CSS

@media only screen and (min-width : 768px) and (max-width: 1023) {
section.value-offer > div.container > figure{
background: url('../Images/Shop/img.childrens.768x511.jpg') top center no-repeat;
}
}
@media only screen and (min-width : 1024px) and (max-width: 1280) {
section.value-offer > div.container > figure{
background: url('../Images/Shop/img.childrens.1024x720.jpg') top center no-repeat;
}
}

如果您的媒体查询定义良好，则意味着是的：桌面将在所有情况下下载较小的图像+更大的图像。 但至少，您可以限制移动设备下载资产的大小，也假设桌面设备处于更牢固的联系上。

Answer 2

如果您希望这些图像在任何现代搜索引擎图像搜索中排名(我想这就是您问题的目的(，那么您不应该将它们用作css背景图像，因为这不会被它们索引。选择语义html(<figure>(是一个正确的选择，但根据图像和内容结构，你也可以使用普通的旧<img>标签。 如果您需要了解有关响应式图像的更多信息，这是一个很好的起点。

此外，我建议使用前面提到的 scrset，尽管 IE 没有采用此属性。有一个简单的解决方法，IE 将忽略scrset属性，但仍使用该src，以便您可以从那里获取默认 IE 映像：

<img src="default.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="your_alt">