现在的位置: 首页 > 网络采风 > 正文

img标签中alt属性和title属性的区别、作用及seo影响

2014年05月22日 网络采风 ⁄ 共 1409字 ⁄ 字号 评论 2 条 ⁄ 阅读 1,672 次

此前一直搞不清图片img标签中的alt属性和title属性的区别,网上搜索资料看过后,感觉大多数文章说的太专业化,对于初学者很难理解,就决定用自己理解的意思通过图文形式,简单的说明一下alt属性和title属性的区别和作用以及它们对网站seo的影响。

一、alt属性和title属性的区别。

alt属性:用于指定图片的替代文字。当文章中的图片无法显示(如外链图片失效)或访问者无法看到图片时,可以通过alt属性为访问者提供图片的文字说明。alt属性值的长度必须少于100个英文字符。

title属性:用于为设置该属性的图片提供建设性信息。它可以为图片提供额外的说明信息,比如日期或者其他非本质的信息,其性质为一种备注或者注释。title属性值可以比alt属性值设置的更长。

如果用一句话来简单说明alt和title的区别,可以是这样:alt属性的性质是通过文字代替图片内容,而title属性的性质是关于图片的注释语言。

二、关于alt属性和title属性的作用,通过下面的实例,可以帮你更好的理解。

先预设一张图片的title属性为:点击图片可放大观看,alt属性为:骤雨打新荷宣传图片。图片img代码为:

  1. <a href="http://uuxn.com/wp-content/uploads/2014/05/banner.gif"><img class="aligncenter" title="点击图片可放大观看" src="http://uuxn.com/wp-content/uploads/2014/05/banner.gif" alt="骤雨打新荷宣传图片" width="400" height="51" /></a>

1、当图片正常时,用鼠标悬停图片之上,仅可看到该图片title属性的文字注释。

骤雨打新荷宣传图片

2、当图片失效时,用鼠标悬停图片之上,不仅可以看到该图片title属性的文字注释,还可以看到失效图片中的alt属性替代文字。

骤雨打新荷宣传图片

说明:无论图片是否正常显示,当图片仅设置title属性时,用鼠标悬停图片之上,可以看到该图片title属性的文字注释。当图片仅设置alt属性时,用鼠标悬停图片之上,可以看到该图片alt属性的替代文字。如果图片同时设置了title属性和alt属性,鼠标悬停时仅显示图片的title属性。

三、alt属性和title属性对SEO的影响。

对于alt属性而言,由于alt属性中的替代文字是用来替代图片的,而不是提供额外的说明文字,所以要想保证替代文字确实可以为看不到图片的访问者提供正确的信息,应当设置图片的alt属性为文章的核心内容或图片的真实信息,并尽量简短精确。建议使用文章标题作为图片alt属性中的替代文字。为图片设置alt属性有利于百度谷歌等搜索引擎收录图片,增加网站的访问量。

而对于title属性,可以在设置时考虑一些图片的建议性信息,通常在图片img标签中是可以忽略的。不过,当你通过图片链接到其它文章时,由于title属性可以为链接添加描述性文字,当链接本身不能清晰表达链接的目的时,可以通过title属性让访问者知道链接的目的。比如,在图片title属性中可以这样设置:点击图片详细阅读XX文章。这时,title属性的seo价值就会得以体现。

以上只是骤雨打新荷对于alt属性和title属性在图片IMG标签中相关作用的个人见解,仅为帮助初学者更好的理解。若有不对之外,还望大家帮忙指正。

目前有 2 条留言    访客:1 条, 博主:1 条

  1. 开心一刻笑话 2014年05月29日 下午10:22  @回复  Δ1楼 回复

    这个alt在很多网站都看过都说过对SEO友好

给我留言

留言无头像?


×