一、什么是Alt标签?
Alt标签是指对网站里的页面图片的描述或说明,用文本形式表达图片所展示的内容。
二、为什么要给图像添加Alt标签呢?有什么作用?
1.提高用户的体验感
给图像添加文字可以使有视力障碍的人群、使用屏幕阅读器的人群也能更加清晰的浏览到我们的外贸独立站的内容,可以更加明确的表达出图片内容,而不是读出来让用户不知是什么的图片的文件名;并且图片因任何原因无法加载时,则会显示替代文本,这大大提升使用屏幕阅读器人群的用户体验感。
2.提升主题相关性
在我们使用图片但没有替代文字时,谷歌就只能识别到这个图片大概是个什么类型,而无法识别出具体特征,举个例子:我们的内容正在描述不同品种猫咪时,如果没有使用替代文字,谷歌只能识别它是猫的图片,而不能理解到这个图片是在对比不同品种的猫。但如果我们使用了替代文字的话,谷歌就可以更加好的理解我们的页面内容,这有利于提升我们页面的主题相关性。
3.有利于提升Google图片引流
替代文字可以有利于提升我们网站的图片在谷歌搜索图片时的排名,这可以让我们网站的图片获得更多的谷歌流量更有一些图片优化的好的海外独立站可以仅靠通过谷歌图片的Total clicks都能比很多网站的自然流量还高。
4.Alt文本可作为图像链接的锚文本
我们都知道锚文本一般用于一个网页指向另一个网页的点击词文本,可用于链接其他页面内容。但事实上,锚文本也可以链接到图片,当我们的锚文本链接图片时,Alt文本可以帮助谷歌了解更多关于我们链接的图片的信息。
三、如何在图像中添加Alt文本?
只需将 alt 属性添加到HTML 代码中的标记。
带有 alt 标签的图片:
在 WordPress 中,当将图像添加到页面时,会有填写Alt文本的地方在Shopify中:从你的 Shopify 后台--转到Products--单击要编辑的产品的名称--在产品详细信息页面中--在主题编辑器侧边栏中--在图像下方,单击编辑--输入 ALT 文本保存即可。
四、如何写出优质的图片Alt文本?
1.要简洁明了,过于繁琐的Alt文本会让使用屏幕阅读器的人感到啰嗦,离开我们的网站,我们应该尽量使用简短,能够直接表明内容的单词
2.准确表达。要准备表达图片内容,举例:“strawberry cheesecake”,而不是“cake”。
3.不需要说明这是图片的Alt文本。举例:alt=“cheesecake”,而不是alt=“picture of cheesecake”。
4.避免重复。不要重复图像上下文当中已经存在的文本信息,举例页面内容是描述cheesecake,而芝士蛋糕的展示图片正下方的文字就是cheesecake时,谷歌是可以理解的,我们无需重复把描述添加到alt标签中。
五、如何查找何修复Alt属性问题?
许多工具都可以直接抓取网站缺失的Alt属性,但是缺少Alt文本并不一定全都是错误的,正如前文所说并不是所有图像都需要Alt文本比如一些icon图片。
所以与其一直查找所有缺失alt文本的页面再来分析是不是需要优化,不如直接审核优化已经是主要流量页面的Alt标签。
(1)首先通过Google Analytics的Top Page报告,找网站自然流量最多的页面。
(2)审核主要流量页面的Alt属性。安装免费的Alt Text Tester Chrome 扩展,加载流量最多的页面,然后激活扩展。当你滑动图像时,会看到显示的替代文本。如果缺少alt属性,将会看到警告检查页面上一些图像的替代文本。这样很快就可以知道它们的优化是好是坏还是根本没有优化。