我可以为所有图标使用相同的替代文本和标题吗[关闭]答案

【问题标题】：Can I use same alt text and title for all icons [closed]我可以为所有图标使用相同的替代文本和标题吗[关闭]
【发布时间】：2020-05-28 20:25:40
【问题描述】：

我可以使用alt 文本作为 HTML 中的图标。但是，如果我对所有图标使用相同的 alt 文本和 title 可以吗？ SEO会有什么问题吗？

<table>
  <tbody>
    <tr>
      <td><img class="icon" src="orange.png" alt="Icon" title="Icon"> Oranges
      </td>
      <td> Oranges are good for health</td>
    </tr>
    <tr>
      <td><img class="icon" src="apples.png" alt="Icon" title="Icon"> Apples
      </td>
      <td>Apples May Be Good for Your Heart</td>
    </tr>
  </tbody>
</table>

我使用<img> 标记作为图标，然后使用CSS 进行样式设置。我没有找到任何其他添加图标的最佳选择。有些建议使用<i> 标签，有些建议使用<span> 标签作为图标。我用<img> 因为大多数旧版本的浏览器都支持它。

【问题讨论】：

alt 描述会在您的图像无法在浏览器端正确加载时显示给用户。因此最好在 alt 文本中提及正确的图像描述，以便用户了解当图像未呈现时会出现什么图像。
这个问题似乎是题外话，因为它是关于 SEO 这在 Stack Overflow 上是题外话。请阅读"Which SEO questions should be closed as non-programming/non-admin?"，以更好地了解何时可以在此处提出 SEO 问题（大多数情况不可以）以及您可以在哪里获得帮助。

标签： html css seo

【解决方案1】：

替代文字是改善网站可访问性并使屏幕阅读器能够描述您的图片的好方法。虽然这将有助于您的 SEO，但主要原因是可访问性。

标题应该不同，因为重复属性没有多大意义。话虽如此，标题不会影响您的 SEO。

【讨论】：

【解决方案2】：

建议使用不同的替代文本，甚至那些应该定义该图标的含义。如果图标没有加载，用户仍然可以看到替代文本并找出应该存在的内容。

同样，标题文本也可以作为指南，在将鼠标悬停在元素上时应显示相关的有用信息。

此外，它还提高了可访问性，因为屏幕阅读器会在 alt 和 title 中为视障用户找到有意义的内容。

【讨论】：

【解决方案3】：

替代文本应传达图像要传达给查看者的信息。一个很好的基本测试是将图像替换为alt 属性的值，将其与周围的文字一起大声读出，并询问句子是否有意义。

图标橙子：橙子对健康有益

这是一个连贯的句子吗？

在您的示例中，图像传达了与其旁边的文本相同的信息（只是形式不同）。它当然不会传达信息“图标”。你应该有alt=""。

标题属性应该传达关于元素的可选但有用的附加信息。您的示例中没有任何内容，因此应完全省略 title 属性。

【讨论】：