Alt描述 - Alt Text

什么是 Alt 描述

在HTML代码中使用Alt 替代文本，也称为“alt属性”，“alt描述”，以及俗称但技术上不正确的“alt标签”来描述页面上图片img的外观和功能。

alt描述的使用：

• 1.在照片添加描述要以网页可阅读性为原则，让使用屏幕阅读器的视觉障碍用户，使用来阅读alt属性，可以以更好地理解页面图片。
• 2.如果无法下载图片文档时，Alt标签将会显示在图片的位置。
• 3. Alt标签为搜索引擎爬虫提供更好的图片上下文/描述，帮助他们正确地索引图片。

代码示例

<img SRC="chocolate_cake.gif" alt="巧克力蛋糕">

最佳格式

好的描述：

<img src="/static/images/grey.gif" class="lazyload" data-src="chocolate_cake.gif" alt="巧克力蛋糕">

这描述只是“好”，因为它不是很具描述性。是的，这是一巧克力蛋糕的图片，但这幅图片还有更多值得一提的地方。

更好的描述：

<img src="/static/images/grey.gif" class="lazyload" data-src="chocolate_cake.gif" alt="白色餐盘放了一块巧克力蛋糕，并放了一副叉子！" >

这个描述是一个更好的方式，因为它更仔细的描述了图片中的内容，这不仅是一块"蛋糕"（作为第一个描述范例）;白色餐盘放了一块巧克力蛋糕，并放了一副叉子！

不建议：

<img src="/static/images/grey.gif" class="lazyload" data-src="pancakes.png" alt="">

OR

<img src="/static/images/grey.gif" class="lazyload" data-src="pancakes.png" alt="蛋糕,蛋糕,巧克力蛋糕,好吃蛋糕,巧克力蛋糕">

这两个例子都不推荐。代码的第一行实际上根本不包含任何描述（注意引号是空的），而第二个例子显示了描述中的关键字填充。

为什么alt描述是重要的？

1.无障碍

2.图片SEO

在您的图片上使用描述可以带来更好的用户体验，也可能帮助您获得显式和隐式搜索引擎优化的好处，随着添加图片标题和文档命名的最佳做法，包括描述也可能有助于图片SEO。

尽管搜索引擎图片识别技术多年来已经有了很大的改进，搜索爬虫仍然不能在网页上“看”图片，所以将解释完全留给爬虫手中是不明智的，如果他们不明白，或者弄错了，那么你可能会排除到你不想排除的关键字，或者完全错过排名。

从这个意义上来说，描述为您提供了另一个曝光目标关键字的机会，由于网页内关键字的使用量仍然将搜索引擎的排名因素作为重要因素，因此创建替代图片的文本是最符合您重视的环节，如果可能的话，最好要包含您要的目标关键字或关键字相关词组。

我如何撰写好alt的描述？

1.尽可能详细地描述图片，描述：

初衷是设计用来为无法看到图片的用户提供图片的替代解释，如果一个图片没有真正表达任何意义与价值，只是出于设计目的，它应该是放置在CSS，而不是HTML。

2.保持（相对）较短：

3.使用您的关键字描述为您提供了另一个机会：

可以将您的目标关键字包含在网页上，从而有机会向搜索引擎发出信号，表明您的网页与特定搜索查找高度相关，虽然您的首要任务应该是描述图片并提供上下文，如果图片与关键字有相关意义，请将关键字包含在页面上至少一个图片的描述中。

4.避免关键字填充：

google不会把你的注意力停在写得不好的描述上，但是如果你用自己的描述来填充很多的相关关键字，那么你就会遇到麻烦，请专注于为图片提供上下文的描述性替代文本，当然如果可能的话，最好可以包含您的目标关键字。

5.不要将图片做成文本：

这不是对于文本的最佳作法，更不是的搜索引擎优化对于友善的网站开发原则， 由于搜索引擎无法读取图片中的文本，因此应避免使用图片代替文本，如果您必须这样做，请在照片的描述中说明的文本内容。

6.不要在您的描述放入「形象」「图片」等字眼：

它已经假定您的替代文本是指图片，所以没有必要在使用这些文本说明。

7.不要忘记可以使用longdesc = " "：

longdesc =“”使用时机为，网页放入较复杂的图片时，需要更长的描述才可以说明，此时可以指定文档文档方式说明。

8.不要忽略表单按钮：

如果您的网站上的表单使用图片，因为它是“提交”按钮，给它一个ALT属性。图片按钮需要有一个alt属性来描述按钮的功能，如“送出”，“购买”，“注册”等说明。

数据源：