SEO优化-关于img的alt与title

SEO(search engine optimization)搜索引擎优化，即使让百度、谷歌等搜索网站能够更容易搜索到你，将你的网站放到一个比较靠前的位置，从而容易得到流量。

关于如何优化SEO的文章已经很多了，我这里主要针对hexo博客系统中的图片标签的优化进行研究。

图片标签是如何影响SEO的

在html中图片一般有两个常用的标签 <alt> ， <title> 。例如：

<img src="dog.png" alt="可爱的小狗" title="狗狗">

通过查阅网上的解释， <alt> 标签的最初意义在于描述图片的内容，这样在图片无法显示的时候，读者也能大概知道图片是什么样的，同时也照顾了眼睛残疾人士听网页的需求。而 <title> 标签就是给图片起个名字，当鼠标移动到图片上时会出现 <title> 的值。效果如图：

<alt> 的值在图片无法显示的时候就会填充在图片区域。
根据Google的说明， <alt> 会在实际上影响SEO，而 <title> 没有作用。具体可以查看google的官方说明Google 图片发布指南。我在其中摘录了一段

• 效果欠佳（缺少替代文字）：<img src="puppy.jpg" alt=""/>
• 效果欠佳（关键字堆砌）：<img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>
• 效果较好：<img src="puppy.jpg" alt="puppy"/>
• 效果最佳：<img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

从这段说明中，我们可以看出，关键词中实际起作用的是 <alt> 标签的值。
明白了关键词在哪里写，接下来就改造我们的hexo吧。

优化Hexo

在hexo中添加图片的方式常用的有两种，分别是：

1. ![可爱的小狗](dog.png)
2. {% asset_img dog.png 可爱的小狗 %}

第1中方式其实是markdown的写法，但是由于hexo的原因，用这种方式生成的网页，图片在主页上能够显示，但是在文章中却不能显示（真是个奇葩的设定，经过观察就是在路径上差了一个反斜杠\）。
而第2种方式生成的网页可以完美显示了，但是 <alt> 标签却没有了，换成了 <title> （也是够奇葩的，为什么当初设计程序的时候不把两个标签都写上）。
所以为了能够优化SEO，必须把<alt> 加上。好在有人写了一个插件，可以解决markdown方式的路径问题，不用自己再去改代码啦。插件地址 github/hexo-asset-image。
使用方式很简单，安装上这个插件后，就可以用markdown的方式连接图片啦。