HTML5多媒体标签与SEO的优化关系

早期的因特网主要用来分享学术成果,但是对普通民众而言,更愿意在上面分享一些更有趣的内容,比如视频,音频,图片等,这些技术在html5之前都不是由html标签提供的。当随着技术的更新,使用HTML5多媒体标签都可以解决这些问题,作为一个站长,我们又该通过怎么样SEO优化手段来优化这些标签。

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优化很重要的要素。

添加评论

电子邮件地址不会被公开。 必填项已用*标注