html5优化,html5优化的方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

HTML5中哪些标签可以用来做SEO优化

一、头部代码

1、标题标签(title标签)

在HTML5中标题标签依然存在，其仍然具有不可替代的作用;不过我们看到还有更多的可供搜索引擎识别的代码，我们将改代码的等级微降。

2、元标签(meta标签)

字符集编码声明标签：该标签原本就是搜索引擎必看且首先要看的标签，其他属性都省略唯独留下charset属性能看到google公司用心良苦。

网页描述标签：该标签虽然没有什么提示，但是该区域的内容将会在SERP显示，其重要性不应该被忽略。

二、正文代码

1、头部标签(header标签)

这块区域之前以logo居多，而从目前的情况来看，很多资料都建议在这类使用标题1或2标签，即h1或h2标签。我们认为未来每个网页只会出现一个H1标签，而他的位置就是位于header标签内。该区域我们不建议使用strong标签，不要使用b标签。

2、导航标签(nav标签)

nav标签内基本上都是a标签，而HTML5中不应该靠添加title标签来进行优化，我们建议是用strong标签。

3、文章标签(article标签)

article标签区域，我们可以使用h2标签，而不建议使用h1标签。基本上有多少个article标签就可以使用多少个h2标签。PS：可把SEO乐死了，估计黑帽又找到作弊的地方了。

而article标签区域的section标签将会替代h2标签链接过去的URL的title属性，这块区域的文字有可能将成为目标URL的description内容，即有可能会影响目标URL在SERP中的描述。

4、左或右侧标签(aside标签)

aside标签的文字信息与article标签区域的文字信息需要匹配，如果关联程度不大，可能会影响到该页面以及目标页面的排名。这是在HTML4中很多SEO忽视的一块区域，而这块区域的关键词对本页面可能影响不是很大。因为aside标签的内容基本上都属于公共内容，即会有N多的页面都有该内容。

5、底部标签(footer标签)

footer标签区域的内容对首页的排名将会增加，而对于内页来说搜索引擎将有可能会视而不见。不建议每个web的footer信息都是独立的，这或许意味着新的黑帽手段将会出现。

相关问答

Q1: HTML5开发对SEO网站优化有哪些好处

HTML5代码新增了不少新元素，整理了下，这些标签应该对SEO还是比较有影响的，适当运用，也许对SEO优化是有很大好处的！

结构上的

header定义了站点的头部信息，也就是页眉，一般放置网站的站点名称以及LOGO和导航栏。搜索引擎更容易识别站点的类型。

nav定义导航链接，也就是栏目或者频道的链接。搜索引擎可以更好了解网站的信息架构，分类等。良好的信息架构，更有利于蜘蛛的爬行和权重的分布。

footer定义了底部信息，也就是页脚。放置页脚导航，一些比如公司介绍，联系我们之类的信息。一般来说对网站比较不重要，有可能搜索引擎会降低其位置的权重。

section该元素用来表示网页中不同的分区。优势体现在每个部分都可以有其独立的HTML标题。这可以让搜索引擎更好的了解网页的结构是如何划分的。搜索引擎可能会根据网页中的section标签找出其信息架构。（同左撇子）

article 定义文章区域，可以更有利于搜索引擎识别网页的内容以及判断相关性。，

aside定义页面内容之外的内容，在左侧或右侧边栏。比如知乎右侧的“相关问题”就属于aside区域。aside标签的文字信息与article标签区域的文字信息最好是相关。可能会影响到该页面和目标页面的排名。

这些结构元素有些在HTML4时代，一般是用div来定义。如div id="header"、div id="nav"和div id="footer"，但是难免有些网站会采用其它的命名方式。而HTML就把这些都标准化了，规范化了，简洁明了。更有利于搜索引擎衡量网页上的内容和相关性，甚至分配权重的流向。

块元素

figure定义媒介内容的分组，以及它们的标题，figcaption定义 figure 元素的标题。这两个元素可以说非常好的使媒介和文字说明联系在了一起。有利于搜索引擎理解内容。文字说明是可见的。

time定义日期/时间，time标签可能会作为一个来判断网页文字源，也就是能够通过time标签来识别哪篇文章是原创的。

audio定义音频

video定义视频

这两个元素区域中间的文字信息将会让搜索引擎读懂视频和音频。据说很多国外社交网站都开始试用HTML5，就是因为搜索引擎可以更好识别社交网站更多出现的音视频。

另外目前搜索引擎可能还不能很好支持的HTML5，毕竟现在还没有更好的推广和运用。但我相信这是未来的趋势。

Q2: HTML5的强大特性有哪些

语义特性（Class：Semantic）HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

本地存储特性（Class: OFFLINE STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。

三维、图形及特效特性（Class: 3D, Graphics Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

性能与集成特性（Class: Performance Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

Q3: 如何做html5 的seo优化

既然HTML5是网页改版的一次创新，那么它跟我们所熟知的SEO有必然的联系吗？实际上，HTML5与SEO之间有着千丝万缕的关系。

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

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

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

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

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

最后我们可以从可用性的角度上看，HTML5可以更好的促进用户于网站间的互动情况。多媒体网站可以获得更多的改进，特别是在移动平台上的应用，使用 HTML5可以提供更多高质量的视频和音频流。

Q4: html5如何提高性能优化，优化方式有哪些

1、css 整合为一个css文件引入到html页面

2、js 整合为一个js 文件引入html

3、特效文件放在最后引入可提升页面的打开速度

Q5: 玩转html5移动页面，怎样优化代码

一、内部优化

（1）TITLE，KEYWORDS，DESCRIPTION等的优化

（2）HEAD,ALT属性等标签的优化

（3）内部链接的优化，包括相关性链接，锚文本链接，各导航等链接页

（4）有规律地保持站内的更新(主要是文章的更新等)