前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网站页面优化:IMG标签

网站页面优化:IMG标签

作者头像
林雍岷
发布2019-07-03 16:41:51
1.8K0
发布2019-07-03 16:41:51
举报
文章被收录于专栏:林雍岷林雍岷

IMG标签在HTML网页插入图片,可以帮助读者更好地理解你的文章。 与其用1000个字描述清楚的事情,不如用一张流程图说明一切。“一张图片胜过千言万语”可能并不适用于谷歌,因为搜索引擎通过图片的ALT标签和TITLE标签理解文章中的插图。

查看网页源码HTML的IMG标签看起来像这样:

代码语言:javascript
复制
<img src="eg_tulip.jpg"  alt="一雯在宁波溪口拍的郁金香" />

IMG标签:使用合适的图片

图片SEO选用合适的图片利于谷歌图片排名最好是自己拍摄的图片.

使用原始的图片(自己拍摄的图像)比来自图片库的更好,例如你团队页面需要实际的团队照片而不是随便找几个家伙的图片敷衍了事。需要与其文章主题相关的图片,如果你用一张随机的宠物照片放在谷歌SEO主题的文章里面,那么你这样做是错了,你违背了图像反映帖子的主题,或者在文章中起不到说明性的目的。

在实际操作过程中如果自己没有自己拍摄的照片,可以用以下方法找到独特的图片:

  • Flickr.com图片网站:在网站SEO内容更多来源详细介绍知识共享概念,我们在FLICKR中找到CREATIVE COMMONS图片使用;
  • freeimages.com图片网站:域名就知道是是免费图片资源网站,也就说里面提供的网站是免费,我们可以直接拿来使用;
  • 更多免费图片来源:点击这里查看更多免费图片来源。

准备使用在文章中的图片

当我们找到合适的图片,无论是插图,图表还是照片,下一步就是准备在网站使用它并优化它,需要考虑以下几点:

正确命名图片文件名

图片搜索引擎优化从文件名开始,你希望GOOGLE在不分析图片的情况下了解图片的内容,请在图片文件名中使用关键字。这很简单:如果你的图片是巴黎圣母院大教堂的日出,文件名不应该是DSC3421.jpg,而是notre-dame-paris-sunrise.jpg,主要关键字是Notre Dame,因为这是照片的主要主题,这就是为什么要把它放在文件名称的开头。

调整优化图片的尺寸

用户体验在SEO中非常重要,网站访问速度越快,搜索引擎越容易访问和索引页面,图片大小会影响网页加载时间,当你上传大图片显示非常小 时,例如250×150像素大小显示2500×1500像素图片,这个过程中需要加载整个图片,麻烦请将图片调整为你希望显示的大小。WORDPRESS可帮助你在上传后自动提供多种尺寸的图片,这并不意味着文件大小也被优化,这只是图像显示大小,所以建议使用PHOTOSHOP把图片调整成希望显示的尺寸后再上传到网站。

压缩图片大小

图像搜索引擎优化还有就是图片被压缩,尽可提供小的图片文件。当然你可以导出图片是使用百分比控制图片质量和大小,但我更喜欢使用100%的图片质量,仍然可以通过删除EXIF数据来减小图片大小。

优化图片大小网站工具:

  • ImageOptim
  • JPEGMini
  • PunyPNG
  • Kraken.io

图片优化后,使用YSlow等工具进行速度测试。

使用响应式图片

使用响应式图片对于搜索引擎优化也是必不可少的,如果你使用的是WORDPRESS,它已经为你做好了,因为从4.4版本开始是默认添加自动适配图片,响应式图片是SRCSET属性,这样可以在不同终端屏幕提供不同尺寸的图片(移动设备)。

设备像素比SRCSET属性

代码语言:javascript
复制
<img src="eg_tulip.jpg" alt="一雯在宁波溪口拍的郁金香" srcset="eg_tulip_2x.jpg 2x, eg_tulip_3x.jpg 3x">

以视窗为基准SRCSET属性

在这个例子中,我们将图像大小调整为360,550,800和1024像素,总共有5张图片,代码如下:

代码语言:javascript
复制
<img src="eg_tulip.jpg" alt="一雯在宁波溪口拍的郁金香" width="100%"
     srcset="eg_tulip_360.jpg 360w, eg_tulip_550.jpg 550w, eg_tulip_880.jpg 880w, eg_tulip_1024.jpg 1024w">

开始在文章添加图片

图片添加到文章相关内容关系谷歌排名ALT标签和TITLE标签带上关键词

现在你的图片可以使用了,不要随便把它扔到你的文章中。如前所述,将图片添加到相关文章内容附近对排名会有很大帮助,确保文本与图片相关,图片与文本相关。

图片说明

图片说明是页面上图片附带的文字,它是每个图像下方灰色框中的文本。为什么图片说明对搜索引擎优化重要呢?因为读者在阅读文章时会浏览这些文本。调查发现读者在浏览网页时倾向于浏览标题,图片和图片说明。早在1997年,尼尔森写道:“增强标题,大型,粗体文本,突出显示的文本,项目符号列表,图形,标题,主题句和目录。”2012年KISSMETRICS更进一步说明“读取图像下的说明比文章正文多3倍,意味着不使用,或者使用不正确,我们错失了吸引大量潜在读者的机会。”

我们需要为每张图片添加说明吗?不,因为有时图片有其它用途,取决于是否要将你的图片用于搜索引擎优化。需要避免过度优化,添加图片说明优先考虑是否对读者有意义,不要为图片搜索引擎优化而在图片下添加说明。

ALT文本和TITLE文本

ALT文本(或ALT标签)将添加到图片中,如果无法向访问者显示图像,则会有适当的描述性文本展示给读者。维基百科描述ALT标签描述得更好:“在读者无法获得图像的情况下,也许是因为他们在网络浏览器中关闭了图像或者由于视觉障碍而使用屏幕阅读器,ALT标签文本确保不会丢失任何信息的功能。” 确保为每个图片添加替代文本,并确保代替文本包含该页面的SEO关键字。

当鼠标悬停在图像上时,IE会将ALT文本显示给读者,CHROME会将TITLE文本显示给读者。图片的TITLE文本和ALT文本是相似的,许多使用TITLE的人只是复制ALT文本,但是现在越来越多的人完全抛弃使用它们。“TITLE属性非常有用,它提供了一种很好的方式展示非必要的信息,例如,图片的渲染在上下文中的意义。” 换句话说,图片展示‘很高兴’的信息。

图片SEO总结

做搜索优化让图片出现在搜索结果中的方法如下:

  1. 优化关键字要在TITLE标签,图片路径名称,图片文件名称和alt标签;
  2. 图片周围正文内容要有关键字;
  3. 靠近图片的H标签要有关键字;
  4. 图片说明(CAPTION)要有关键词;
  5. EXIF(EXCHANGEABLE IMAGE FILE FORMAT)格式JPEG,PNG, NOT GIFS;
  6. 优化关键字要在TITLE标签,图片路径名称,图片文件名称和ALT标签;

图片SEO做到上述基本满足谷歌图片优化的要求。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-05-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 林雍岷 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • IMG标签:使用合适的图片
  • 准备使用在文章中的图片
    • 正确命名图片文件名
      • 调整优化图片的尺寸
        • 压缩图片大小
          • 使用响应式图片
          • 开始在文章添加图片
            • 图片说明
              • ALT文本和TITLE文本
                • ALT文本(或ALT标签)将添加到图片中,如果无法向访问者显示图像,则会有适当的描述性文本展示给读者。维基百科描述ALT标签描述得更好:“在读者无法获得图像的情况下,也许是因为他们在网络浏览器中关闭了图像或者由于视觉障碍而使用屏幕阅读器,ALT标签文本确保不会丢失任何信息的功能。” 确保为每个图片添加替代文本,并确保代替文本包含该页面的SEO关键字。
                • 图片SEO总结
                相关产品与服务
                图像搜索
                图像搜索(Image Search)基于腾讯云的图像解决方案,集成了图像检索、超细粒度元素挖掘和图像匹配等技术,通过以图搜图的方式在用户自建图片库中快速检索出与输入图片相同或相似的图片集合,可应用于图片版权保护、电商侵权审核、相似素材查询、同款商品搜索与推荐等场景。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档