HTML5多媒体标签与SEO的优化关系
早期的因特网主要用来分享学术成果,但是对普通民众而言,更愿意在上面分享一些更有趣的内容,比如视频,音频,图片等,这些技术在html5之前都不是由html标签提供的。当随着技术的更新,使用HTML5多媒体标签都可以解决这些问题,作为一个站长,我们又该通过怎么样SEO优化手段来优化这些标签。
图片格式的介绍
设计网页时,插入图片或视频,可以增加网页生动度。
下面简单介绍普遍常用的三种格式:
- GIF:
影像会有一定程度的失真。不适合用来储存档案颜色较多的图片。适合用在线条分明的图片,如:按钮等。可构成简单的动画。文件名后缀为:.gif - JPEG:
比较适合储存照片图档。压缩成JPEG 档时可以大幅降低档案大小。文件名后缀:.jpg - PNG:
压缩影像不失真。档案相对比较大。有背景透明的特性。文件名后缀:.png
图片标签
如果要在网页显示图片,必须要使用<img>标签。
<img src="图片路径" width="宽度" height="高度">
接下来稍微介绍以上标签的属性:
src:设定图片路径。
width hight:设定图片的宽度和高度,预设单位为像素(pixels)
音频标签
<audio src="音频路径" controls="controls" autoplay loop type="audio/mp3"> <audio/>
介绍以上标签的属性:
src:设定音频路径。
type:文件的格式,定义声音,比如音乐或其他音频。
视频标签
使用html5的video标签来播放既有的影片。
目前FireFox、Chrome、Safari都可以支持该标签。
<video src="视频链接" controls></video>
若你还想设定影片在页面的比例,也可以写成:
<video id="media" src="视频路径" controls autoplay loop width="400px" heigt="400px"> </video>
这些标签也离不开SEO,特别是图片的优化,可以说是SEO的基础之一。
若未来要走网络营销的行列,这些更需要了解。
搜索引擎是无法理解你的图片内容的,所以我们会加上图片说明,让搜索引擎更好找到你这个网站内的搜索者需要的图片。
那你可怎么写呢?
<img src ="https://www.yuzyun.top/wp-content/uploads/2019/08/2019-08-16_183757.jpg" alt ="一只名叫鲍勃的流浪猫">
假设今天图片失效,维护者也可以从alt的属性中,了解原先要配置的图片。
搜索引擎也会对alt来判断这张照片信息,同时也可以让无法看到图片的使用者来理解图片,所以alt尽量已简短好理解的关键字来写,留下正确的图片资讯也是SEO优化很重要的要素。