当您使用有关 SEO 的背景图像时，使用 alt-text 的最佳方法是什么答案

【问题标题】：What is the best way to use alt-text when you use background-image regarding SEO当您使用有关 SEO 的背景图像时，使用 alt-text 的最佳方法是什么
【发布时间】：2021-03-16 13:31:39
【问题描述】：

我想确保以下解决方案针对 SEO 进行了优化，或者至少能够在整个 HTML 代码中检测到。

我工作的网站都是关于图片的，所以这主要是我必须担心的最重要的问题。

1.第一种方法也是我最喜欢的一种，因为当我将鼠标悬停在图片上时，您已经可以看出，通过单击图片，您将被重定向到另一个页面，因为浏览器默认设置链接动画：

<div class="table">
    <a href="NEW LINK" alt="TAGS" class="thumbnail" style="background-image: url(LINK);">Tags</a>
</div>

如你所见，我在两个位置添加了标签。

创建了一个 alt

在标签内

我在互联网上找到的第二种方法，同时寻找我现在要问的相同问题：

<div class="table">
    <span onclick="NEW LINK" class="thumbnail" role="img" style="background-image: url(LINK);" aria-label="TAGS"></span>
</div>

【问题讨论】：

标签： html hyperlink seo

【解决方案1】：

<a> 标签不支持alt 属性。如果您使用背景，最好的选择是使用 aria-* 属性，正如您发现的 role="img" 和 aria-label=""

【讨论】：

【解决方案2】：

您可以在 div 中添加实际图像，并使用自定义代码将其设置为背景图像！一般来说，这是“规则”：将非装饰性 CSS 背景替换为标准内联图像。

【讨论】：