图片 ALT 属性的作用和写法（SEO 如何优化 ALT 标签）

什么是替代文本？

Alt 文本（替代文本），也称为“alt 属性”、“alt 描述”或者称为“alt 标记”，在 HTML 代码中用于描述页面上图像的内容和功能。

替代文本的作用：

• 帮助搜索引擎理解图像：通过在图像中添加替代文本，可以帮助搜索引擎理解图像的内容。如果网站上的图片很多，这一点尤其重要。
• 提高可访问性：屏幕阅读器使用替代文本向视障用户描述图像内容。这有助于让特殊的用户群体更容易访问网站。
• 提高点击率：如果图像使用 alt 文本进行了适当优化，它们将更有可能出现在图像搜索结果中。这可能会带来更多的流量。

最佳替代文本格式

ALT 替代文本应该具有足够的描述性，不要在其中过渡的添加关键字。可以想象一下，如果你闭上眼睛，让别人给你朗读图片中的替代文字，你希望别人怎样为你描述图片的内容。

让我们看一下下面这张看起来很美味的蓝莓煎饼图像的替代文本示例：

还可以的：

 <img src="pancakes.png" alt="pancakes"> 

这个替代文本只是“好的”，因为它不是很具有描述性。这是一堆烤饼的图像。但是，关于这张图片还有很多话可以说。

比较好的： 

<img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">

这个替代文本是一个更好的选择，因为它更能描述图像中的内容。这不仅仅是一堆“烤饼”，这是一堆蓝莓烤饼，上面还撒了一层糖粉。

不建议的：

<img src="pancakes.png" alt="">

或者

<img src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">

最下面的两个例子添加 ALT 替代文本的方式都不推荐。第一行代码没有添加任何替代文本，而第二个示例填充了大量的关键词及其变体。

为什么 ALT 替代文字很重要？

1.可访问性

ALT 替代文本最初的（并且仍然是主要的）目的是向无法看到它们的访问者描述图像内容。当用户使用无法访问图像的屏幕阅读器和浏览器访问图片时，或者用户视力受损或无法在视觉上识别图像时，替代文本可以帮助用户了解图像的内容。

2.图片搜索引擎优化

在图像上使用替代文字可以改善用户体验，它也可以帮助网站获得显式和隐式的 SEO 好处。

尽管近年来搜索引擎图像识别技术有了很大的进步，但搜索爬虫仍然无法像人类一样“看到”网站页面上的图像，因此将解释权交给爬虫是不明智的。如果它不理解或弄错了图片内容，可能就不会对网站的 SEO 优化产生正面的影响。

由于页面上的关键词仍然是搜索引擎排名的重要影响因素，因此创建既能描述图像又能包含关键字词的替代文本，有利于提升网站的排名。

如何写好 ATL 替代文本？

尽可能具体地描述图像。替代文本首先是为无法看到图像的用户提供图像的文本解释。

保持简短。屏幕阅读器会截断 alt 文本，因此建议使用尽可能少的本文内容。

使用关键字。ALT 替代文本提供了在页面上包含目标关键字的一个机会，从而向搜索引擎发出信号，证明页面与特定搜索查询相关。虽然首要任务应该是描述图像并提供上下文，但如果同时在图像的替代文本中包含关键字是个不错的选择。

避免过渡堆砌关键词。虽然过渡使用关键词不一定会被惩罚，但也一定不会给网页带来好处，所以尽可能的使 ALT 替代文本具有描述性，同时适当的体现关键词的内容。

不要在替代文本中包含“图片”、“图像”等文字。ALT 替代文本就是指图像，所以无需在其中进行文字体现。

不要忽视表单按钮。如果您网站上的表单使用图像作为“提交”按钮，请给它设置 alt 属性。图片按钮应该有一个描述按钮功能的 alt 属性，例如“搜索”、“立即申请”、“注册”等。

好的替代文本是什么样的？

让我们看几个实际使用中的 alt 文本示例：

好的替代文字：

<img src="bird.png" alt="Rooster">

较好的替代文字：

<img src="bird.png" alt="Rooster crowing">

很好的替代文字：

<img src="bird.png" alt="Red-crested rooster crowing">

好的替代文字：

 <img src="escalator.jpg" alt="man on escalator">

较好的替代文字： 

<img src="escalator.jpg" alt="man walking on escalator">

很好的替代文字： 

<img src="escalator.jpg" alt="man wearing backpack walking down escalator">