图片alt属性添加方法

JS/jQuery/Ajax/Bootstrap 专栏收录该内容
150 篇文章 1 订阅

原文地址:http://blog.sina.com.cn/s/blog_7ee3154e0102woet.html


       写过代码的人知道,如果网页中要写入一张图片,规范的写法是写入图片的宽度width和高度height以及alt属性。很多人不理解为什么要添加这么多代码,认为代码越精简越好,少了这三个属性,图片依旧显示完好。但是如果我们不给图片添加高和宽,会增加计算的时间,打开的速度会受到影响。当网页中图片过多且加载较慢,服务器请求失败的时候,图片有可能就不显示,也没有提示,影响用户的体验。这时,如果我们给图片加上一个alt属性,就能很好地解决问题。

       图片alt设置的意义在于解决用户体验的问题,也可以说所有的优化操作都是解决用户的体验问题。图片的alt属性是图片的替代文本,如果没有alt属性,搜索引擎和用户将无法或者难于判断图片所要表达的内容。我们在百度搜索绿萝,则会搜索到与绿萝相关的网站和图片,我们打开网站分析,图片加了alt属性的页面得以很好的排序展现,更直观也更直接的让用户找到需要的信息。图(1)所示

  图(1)图片alt属性设置规范

       那么如何设置图片的alt属性才是规范的呢?图片alt属性设置的替代文本必须与图片相符。如图(2)所示。图片中包含关键字如彩页、宣传单,如果将alt属相设置为“彩色的纸”或者“美食”则不符合规范。一个好的图片alt是既包含关键字又能准确表达图片所要表达的意思的。通常我们可以使用延伸的关键词来做替换文本,如果将下面的属性设置为“广州彩色宣传单印刷”会不会更好呢。

图(2)彩页宣传

       在优化过程中有许多误区,有的人放大了图片alt的作用,堆砌关键词,这样的做法是不好的,图片alt属性对网站的排名的效果并没有那么明显。我们还要避免一个alt属性表达多个核心,多核心也就相当于没有核心。比如你想表达方向盘、车轮、车的标志,其实你想表达的就是一辆汽车。设置好alt属性后,我们还要检查设置的长尾词是否符合用户的搜索习惯和表达习惯。用错了方法,我们的努力就是白费的。


我总结了几个图片alt属性的案例:

1.图片不添加alt属性。这是不符合规范的做法,我们一定要避免,如图(3)

错误的alt是设置

2.在网站中只添加相关的图片,下面这幅图片是出自装修网站,家庭装修也需要摆放盆栽以及了解包养的方法。下图的alt属性简洁明了地告诉了浏览者这是一张金鱼吊兰图片,符合用户的搜索规则。如图(4)

图(4)金鱼吊兰图片alt属性设置

3.正确的图片alt代码添加标准案例,既有图片宽高,也有alt属性。如以下代码:

 总结:在网站中,用户只有通过图片或视频以及文字的方式获取信息,如果一个网站或是一篇文章,图文结合能给用户带来良好的搜索和阅读体验。所以图片要能准确传达信息,我们可以通过分析解决用户的客观需求和隐性需求。我们在图片上尽可能的不添加水印,保持图片的尺寸统一外,添加合适的图片alt属性,这样的添加方法才能使页面美观,更符合搜索引擎的判断标准。


  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值