如何使用 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">

Answer 2

如果您有 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;
    }
}

如果您的媒体查询定义明确，则表示可以：桌面版在所有情况下都会下载较小的图像 + 更大的图像。但至少，您限制了移动设备下载资产的大小，同时假设桌面连接更牢固。

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

How to add Alt and Title for SEO to a Responsive design using Figure tag

html

css

seo

image