<a> 标签包含图像 URL 时如何设置 alt 属性？答案

【问题标题】：How to set alt attribute for an <a> tag when it contains an image URL?<a> 标签包含图像 URL 时如何设置 alt 属性？
【发布时间】：2019-07-12 13:56:08
【问题描述】：

这是我的代码：

<a itemprop='image' target='_blank' href='http://lamtakam.com/img/post/imageGenerator.php?tc=17&id=321780&t=%D8%B3%D9%84%D8%A7%D9%85'>show</a>

看到了吗？它是一个<a> 标记，其中包含图像的 URL。这就是为什么我给它设置了itemprop='image'，幸运的是，谷歌也检测到了它。

我只想知道，我怎样才能为该图像设置文本？ alt 属性之类的东西？

【问题讨论】：

标签： html seo

【解决方案1】：

你不能。 <a> 元素是容器，而不是替换的内容。没有任何内在内容可供替代。

【讨论】：

好吧，谢谢.. 知道如何使它对 seo 友好吗？那是一张图片，我怎样才能给它分配一些词呢？
<a href...>something more descriptive than the word "show"</a>

【解决方案2】：

正如@Quentin 指出的那样，您不能以这种方式使用<a>。

但是，您可以将 <a></a> 包裹在 <img> 周围。例如，您可以使用

<a itemprop='image' target='_blank' rel='noopener noreferrer' href='http://lamtakam.com/img/post/imageGenerator.php?tc=17&id=321780&t=%D8%B3%D9%84%D8%A7%D9%85'><img src='example-image.gif' alt='Example image' height='42' width='42'></a>

注意到里面的rel='noopener noreferrer'了吗？如果您使用target='_blank'，则应使用rel='noopener noreferrer' 来防止称为reverse tabnabbing 的网络钓鱼攻击。

【讨论】：