浅析HTML5的优势及对于SEO的影响

什么是 HTML5

HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本,旨在消除富 Internet 程序(RIA)对 Flash, Silverlight, JavaFX 一类浏览器插件的依赖。

HTML5 概要

HTML5 带来很多新功能,以及 HTML 代码上的改变,你需要使用一些特定的 API 脚本,如:

DOM
实现 2D 绘图的 Canvas 对象
可控媒体播放
离线存储
文档编辑
拖放
跨文档消息
浏览器历史管理
MIME 类型和协议注册

HTML5可以提供:

在用户的可用性和友好体验上带来一些改进;
新的标签,这将有助于开发人员定义重要的内容;
可以给站点带来更多的多媒体元素(视频和音频);
可以很好的替代FLASH和Silverlight;
当涉及到网站的抓取和索引的时候,对于SEO很友好;
将被大量用户移动应用程序和游戏。

那些支持 HTML5 的浏览器在处理 HTML 代码错误的时候必须更灵活,而那些不支持 HTML5 的浏览器将忽略 HTML5 代码。

HTML 语法的变化

HTML5 引入了新的 HTML 元素和属性,有的是传统通用元素的语义化版本,如取代  div 元素的 nav, footer 等元素,也有一些全新的元素,如 audio, video。一些在 HTML4 中不被推荐使用的元素,如 font 和 center 将被弃用。HTML5 引入的新 HTML 元素包括:

article:文章
aside:内容旁边的侧边栏内容
audio:音频
canvas:2D 绘图
command:命令按钮
datalist:下拉选择框
details:对象的细节
dialog:对话框
embed:外部插件或对象
figure:一组媒体对象以及标签文字
footer:页脚
header:页首
hgroup:文档某一部分的信息
keygen:表单生成的 Key
mark:标注的文字
meter:预先定义的范围内的度量
nav:导航条
output:输出
progress:进度条
rp:标识 rubby 内容
rt:rubby 内容的解释
ruby:rubby 内容
section:定义一个部分
source:媒体的资源
time:日期时间
video:视频

这些新标签,可以让你的 HTML 文档更容易加载,且更容易被搜索引擎抓取其中的有用信息。比如,搜索引擎可以直接抓取它最关心的 article 标签里面的内容。

HTML5 同那些流行的技术如何共存

如今的 Web 世界已经习惯了各种插件和 API,HTML5 为 Web 开发与设计者带来了方便与不便,HTML5 将如何同现在的这些流行技术共存?

HTML5 与 Flash

这个争论由来已久,Flash 被某些开发设计者滥用导致一些网页加载缓慢,而 HTML5 为之带来一线曙光。拿仍在襁褓中的 HTML5 和已经有10年历史的 Flash 进行比较也许有失公允,但这是人人都关心的一个问题。相对 Windows 用户来说,Mac 用户可能会从 HTML5 获得更多好处,因为苹果一直不愿支持 Flash。下面是 Mike Chambers 针对 Mac 和 Windows 平台浏览器的 CPU 负载而做的一部分测试:

测试显示,Mac 平台的 Flash 表现要差于  Windows 平台,这还取决于你使用的浏览器。现在看来,就视频游戏而言,Flash 是更好的选择,但取决于你的浏览器,如果你的视频不是很复杂,HTML5 是更好的选择。Web开发与设计者从这些争论中应该吸取的东西是,Flash 之外还有别的选择,但 Flash 有牢固的地盘,在为客户提供开发设计的时候,需要对他们的目标客户做一些研究。

HTML5 与 Ajax

现在的 HTML 语言的一个问题是,它是一种轻量级的应用界面,那些喜欢使用 Ajax 实现在线应用的开发者会发现 HTML 非常不好用。Ajaxwith.com 认为,HTML 适合用来加载界面,JavaScript 用来执行命令,虽然 HTML 在作为界面语言方面并不好用,但鉴于多数开发者对它的熟悉程度,HTML 还是不可缺少。

一个好消息就是,HTML5 会让 Ajax 应用的实现变得更容易。

HTML5 with CSS

你需对你的 CSS 代码就行整理以支持 HTML5,因为 h1, h2 之类的标签将不再使用,为了实现同 HTML5 的兼容,最好的方式是使用 CSS reset,将那些常见的 HTML 标签的 CSS 属性清零,woork 认为,最好的 CSS Reset 是 Eric Meyers CSS reset。

HTML5和Google

2010年5月22日,谷歌创建了一个涂鸦来纪念Pac Man的视频游戏。这个涂鸦是一个动画,同时也是一个可以玩的Pac Man的游戏。这个涂鸦就是谷歌通过使用HTML5标准制作的,当然谷歌也提供一个FLASH版本来支持不兼容HTML5的浏览器。我敢打赌,这是大多数 互联网网民第一次和HTML5的接触。对于个人来说,这是一个兴奋的消息。以我的观点,这个涂鸦提供了一个机会可以窥视未来互联网、网页、移动应用软件和 游戏等发展趋势。对于搜索引擎优化,他开辟了我更多的想象,它让我思考HTML5在SEO领域的潜力。网站转移到HTML5标准对于SEO有什么优势?

HTML5与SEO

一、使搜索引擎更加容易抓去和索引

对于一些网站,特别是那些严重依赖于FLASH的网站HTML5是一个大福音。如果你有一个都是FLASH的站点,你就一定会看到切换到HTML5 的好处。首先,搜索引擎的蜘蛛将能够抓去你的站点和索引你的内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。在搜索引擎优化的基本理论中,这一方 面将会驱动你的网站获得更多的右击流量。

二、提供更多的功能,提高用户的友好体验

使用HTML5的另一个好处就是它可以增加更多的功能。对于HTML5的功能性问题,我们可以从全球几个主流站点对它的青睐就可以看出。社交网络大 亨Facebook已经推出他们期待已久的基于HTML5的iPad应用平台,潘多拉最近也推出他们基于HTML5的音乐播放器的新版本。游戏平台 Zynga最近也在推出了三款新的在移动设备浏览器上运行的基于HTML5的游戏等等。每天都有不断的基于HTML5的网站和HTML5特性的网站被推 出。保持站点处于新技术的前沿,也可以很好的提高用户的友好体验。

三、可用性的提高,提高用户的友好体验

最后我们可以从可用性的角度上看,HTML5可以更好的促进用户于网站间的互动情况。多媒体网站可以获得更多的改进,特别是在移动平台上的应用,使 用HTML5可以提供更多高质量的视频和音频流。到目前位置,事实就是iPhone和iPad将不会支持FLASH,同时ADOBE公司也在近期公开声明 将停止FLASH基于移动平台的开发,现在我们已经可以这么说移动平台日后视频音频是HTML5的天下。

可以肯定的是,越来越多的SEOer开始研究对于HTML5站点的优化,对于搜索引擎来说,他们也会不断的更新算法来适应HTML5的发展。

HTML5 可能对移动 Web 带来更多好处,原因是,现在的移动 Web,iPhone 占主导地位,而 iPHone 是不支持 Flash 的。HTML5 还会让其它平台的移动浏览器有更快的网页加载速度。另一个好处是 SEO,Google 4月9号宣布,将页面加载速度作为搜索排名的一个因素,因此,基于 HTML5 的页面也会因加载速度更快而受益。