SEO在网页制作中的应用

关于SEO

 

(1)SEO概念：

  SEO，即 “搜索引擎优化”，它是利用搜索引擎的搜索排名规则，使用一系列的优化技巧来提高目的网站在有关搜索引擎内的排名的方式。

(2)SEO分类：

  白帽SEO：

  通过正常的手段对网站内部(包括网站标题，网站结构，网站代码，网站内容，关键字密度等)调整、网站外部的链接建设，来提高网站关键字在搜索引擎排名的一种SEO技术。 

   黑帽SEO：

  笼统来说所有使用作弊手段或一些可疑手段的都可称为黑帽SEO。例如隐藏网页，关键词堆砌，垃圾链接，桥页等等。

网页制作与SEO

 

网站结构布局优化:

• 一个好的网站结构布局会让搜索引擎蜘蛛更好的爬行，所以一个网站在建站之前首先要确定的就是网站的整体结构布局。

•  蜘蛛爬取层次的时候是有耐心和预算的，标准来说是在3-4层。清晰的网站结构用户喜欢，搜索引擎也喜欢。

 

细节优化

• 导航一定要清晰

–　　　　对于网站下的栏目，关键字一定要在主导航里边都能够体现

• 面包屑导航

–　　　　Google已经将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个层级的名称，多使用关键字，都可以实现SEO优化。面包屑路径，

　　　　对于提高用户体验来说，是很有帮助的。

• 链接数量

　　　　–一般标准的一个网页链接数量是不超于100个链接，如果一个页面超过了100个页面，这对搜索引擎来说是不喜欢的。

网页代码优化

(1)精简代码

• 将css和js放在外部

　　　　将css、js写在外部文件中，css在头部进行引用，js在底部引用。尽量不在头部定义样式，也不要html标签中定义样式。

• 删除冗余代码

　　　　删除多余的空格符、空语句、空标签块、多余的嵌套标签、不必要的注释等垃圾代码

 

(2)头部优化权重标签优化

• Title标签

　　　　浏览器根据这部分内容来确定页面的内容，在决定排名中占相当大的权重，保持主要词在这里出现，关键词越靠前越好！注意不要堆砌关键词。

• Keywords标签

　　　　权重越来越低，仍需重视。关键词需做到精准，不要写太多的关键词。每一处标签都有权重，你强调的内容越少，那么它的权重会相对更高。同时，尽量在每一个页面写不同的关键词

• Description标签

　　　　这是一个页面的导读，在这里可以对关键词进行说明，说明网页的主要内容。对网站描述写得越具体，就越有可能在索引的时候出现这个标签中的内容。

(3)代码语义化

　　语义化对网页的好处，最主要的就是对搜索引擎友好，具有良好的结构和语义的网页内容自然容易被搜索引擎抓取。

　　并且，爬虫可根据标签确定上下文和各关键字的权重，有助于爬虫抓取更多的有效信息。同时，标签语义化还有增强用户体验，方便其他设备解析的好处.

1. 无语义标签：<div><span>

2. 语义标签：

◦标题：h1~h6

◦无序列表：<ul><li></li></ul>

◦有序列表：<ol><li></li></ol>

◦数据列表：<dl>

           　　　　<dt>列表项</dt>

        　　　　  <dd>列表项描述</dd>

                </dl>

　　　　◦表强调：<strong></strong>

               　　  <em></em>

　　A、尽可能少的使用无语意标签<div>、<span>

　　举例：

<div class=“head”>head</div>

<div class=“content”>content1</div>

<div class=“content”> content2</div>

改：

<h1>head</h1>

<p>content1</p>

<p>content2</p>

　　B、<h1>标签具有较大的权重，一般每个页面只能有一个h1。 h2、h3按需要采用，不可以太多

　　C、在语义不明显，既可以使用<div>或者<p>时，尽量用<p> 

　　D、将无序列表运用于导航

举例：

<div class=“nav”>

<span><a href=“javascript:void(0);”>首页</a></span>

<span><a href=“javascript:void(0);”>导航1</a></span>

<span><a href=“javascript:void(0);”>导航2</a></span>

<span><a href=“javascript:void(0);”>导航3</a></span>

</div>

更合理方式：

<div class="nav">

 <ul>

   <li><a href="javascript:void(0);">首页</a></li>

   <li><a href="javascript:void(0);">导航1</a></li>

   <li><a href="javascript:void(0);">导航2</a></li>

   <li><a href="javascript:void(0);">导航3</a></li>

 </ul>

</div>

 

　　E、<strong><em>与<b><i>标签

　　　　虽然从页面效果上看<strong>与<b>、<em>与<i>的显示效果一样，但是在语义上<strong><em>的作用更强一些，有加强字符语气的作用。

　　　　所以在写页面的时候如果要强调页面的关键词，建议用<strong><em>标签。

 

　　F、其他细节

◦标签中的内容就是内容，不要加的代码，&nbsp尽量通过设置padding/margin/缩进来实现效果。

◦使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

◦表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

◦每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

 

小结：

◦如果无视标签语义和默认样式，所有标签都用div，其实也是可以写出来视觉效果很好的页面，只要你灵活运用CSS。

但是那样的话虽然视觉上达到了要求，但是整个页面一点语义都没有，搜索引擎还是看不懂。

所以，要记住：结构(html)才是重点，样式(css)是用来修饰结构的。所以，要先确定html，确定标签，再来选用合适的css。

 

(4)图片、超链接优化

 

• Img 标签：

搜索引擎不认识图片，但是可以通过图片属性alt来读出图片是做什么的，可以在这里添加适当的关键词。

Title属性虽然对seo作用不大，但是对用户体验很重要，所以，有必要对在title属性中添加对图片的描述。

• A标签：

<a href=”/” title=”链接说明”>链接词</a>

链接词“建议最好写成自己的关键词，如果不可行也一定要在”链接说明“里出现关键词。

若在a标签里面写上rel=”nofollow”，意思是告诉搜索引擎不要追踪此网页上的链接，一般用在外链上，以免爬虫爬出网站。