什么是SEO

SEO由英文Search Engine Optimization缩写而来，
中文意译为“搜索引擎优化”。SEO是指从自然搜索结果获得网站流量的技术和过程，是在了解搜索引擎自然排名机制的基础上，
对网站进行内部及外部的调整优化， 改进网站在搜索引擎中的关键词自然排名， 获得更多流量， 从而达成网站销售及品牌建设的目标。

SEO的分类

  • 白帽SEO：改良和规范网站设计，使之对搜索引擎和用户更加友好，是一种搜索引擎推荐的做法。
  • 黑帽SEO：利用或者放大搜索引擎的缺陷，使用不正当竞争获取更多的访问量。（例如最近花千骨电视剧热播，马上有一些网站使用这个标题标题，但是内容却是推销广告的，给广大网名造成很大困扰）。

SEO的主要方面

  • 网站标题、关键字、描述
  • 网站内容优化
  • 合理设置Robot.txt文件
  • 生成对搜索引擎友好的网站地图
  • 增加外链引用
    其中最重要的是以下2个方面：
  • 网站结构布局优化
  • 网页代码优化

网站结构布局优化

推荐使用扁平化结构。网站的目录层级要尽可能少，中小型网站不要超过3级。做到扁平化结构需要注意以下的3个方面：

  1. 控制首页的链接数量（网站首页的权重最高）。首页应该有有效的链接，爬虫通过首页的连接到达内页，如果没有有效的链接就会直接影响网站的收录数量。当然首页也不能有过多的链接，内页的链接不要放在首页，链接过多会影响用户体验。中小企业网站首页的链接数量应该在100个以内。链接的性质可以是页面导航、锚链。
  2. 扁平化的目录层次。尽量让Spider跳转3次就可以到达网站的任意一个内页。例如网站的设计可以使用以下的3级：主页、栏目、内容页扁平铺开的结构，而不能是纵深的结构。例如我们要做一个关于植物的网站可以采用以下的层级结构：
  3. 导航SEO优化。导航可以分为主导航和父导航。导航应该使用文字，如果为了用户体验采用图片导航，则应该为图片设置必要的alt和title属性。其次在导航的设计上应该使用面包屑导航。它能够让用户了解到当前的位置，了解网站内容的组织方式。
  4. 页面的大小控制在100k以下。

代码SEO优化

  • <head>标签放网页的标题，各个页面不同。
  • <meta keywords>列举出几个重要的关键词。
  • <meta description>网页内容的高度概括。
  • <br />标记应该放在文本中间，即使用<p><br /></p>替代突兀的<br />标记。
  • html语义化。例如我们要做一个导航，可以使用div+span标记：
<div class="nav">

    <span>课程</span>

    <span>|</span>

    <span>问答</span>

    <span>|</span>

    <span>社区</span>

</div>

但是以上的代码丝毫没有语义化（div和span标记是html中语义化最低的标签），推荐的做法是使用ul和li标记，再通过合适的CSS样式来实现同样的效果：

<ul class="nav">

    <li>课程</li>

    <li>问答</li>

    <li>社区</li>

</ul>


.nav li{

    float: left;

    list-style: none;

    display: block;

    margin: 0 5px;

    border-right: 1px solid #000;

}
  • <a>标记要加上说明（title属性），对于指向外部网站的链接要使用rel="nofollow"属性告诉爬虫不要去爬其他的页面。
  • <h1>正文标题要使用<h1>标记，副标题要使用<h2>。可以使用CSS样式进行显式风格的设置。切记：不重要的地方不要随便使用<h1>标记。
  • <table>标记的优化。使用<caption>标记为表格指定标题。
<table>

    <caption>表格标题</caption>

    <tr>

        <th>季度</th>

        <th>销售额</th>

    </tr>

    <tr>

        <td>1</td>

        <td>33665.25</td>

    </tr>

    <tr>

        <td>2</td>

        <td>21215.99</td>

    </tr>

</table>
  • 强调网页中的重要内容应该使用<strong>标记，避免使用<b>标记（对搜索引擎不友好）。<em>的权重仅次于<strong>。如果仅仅使显示的效果发生变化就使用<b>标记和<i>标记。

Tips

  1. 将重要html代码放在最前面，广告等不重要的部分放在整个文档的最后，然后利用CSS样式控制广告div左右浮动。
  2. 重要内容不要使用js输出。
  3. 尽量少使用iframe框架。
  4. 对于暂时不需要显示的元素应该使用z-index属性而不是display:none;这样的代码，因为Spider会过滤display属性为none的内容。
  5. 尽量精简代码。

前端开发中的SEO的更多相关文章

  1. WEB前端开发中的SEO注意点

    近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写 ...

  2. 说说前端开发中的SEO

    SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为.我认为这是一门说来简单,但操 ...

  3. 初学者Web介绍一些前端开发中的基本概念用到的技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

  4. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  5. px em rem在WEB前端开发中的区别

    我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...

  6. 一探前端开发中的JS调试技巧

    前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  7. WEB前端开发中的图片压缩

    web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...

  8. 前端开发中的JS调试技巧

    前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  9. 前端开发中使用mac自带apache服务

    场景 前端开发中,总是会有这样的需求,就是快速的写一个脚本,或者一个简单的demo页面.这时,我们需要马上可以启动一个web服务,来支持开发. 我们可以安装一个全局的cli工具,通过node服务来满足 ...

随机推荐

  1. html 其它标签

    <pre> 标签 , 如果写的内容在记事本中  在网页上原样输出 <fieldset> 外框 <p> 段落 <sub>下标 <sup> 上标 ...

  2. Guava 12-数学运算

    范例 int logFloor = LongMath.log2(n, FLOOR); int mustNotOverflow = IntMath.checkedMultiply(x, y); long ...

  3. 播放wav聲音格式

    1. #import <AudioToolbox/AudioToolbox.h> 2.聲明 成員变量 SystemSoundID soundID; 3.播放 - (void)playSou ...

  4. OperationResult

    public class OperationResult<T> { private readonly ConcurrentDictionary<string, T> _valu ...

  5. mysql 增加用户

    mysql 增加用户 3.增加用户: (注意:和上面不同,下面的因为是MYSQL环境中的命令,所以后面都带一个分号作为命令结束符) 格式:grant select on 数据库.* to 用户名@登录 ...

  6. winform窗体的关闭与资源的释放

    单纯的this.Dispose(); this.Close();有时候并不能释放出所用资源.因为Dispose()方法,虽然能释放当前窗体的资源,却不能强制结束循环,  要想强制突出当前程序要用:Sy ...

  7. ruby 字符串学习笔记3

    ascii转字符或者字符串转ascii "a".ord # => 97 "!".ord # => 33 "\n".ord # = ...

  8. checkbox 选中个数

    背景: 1 Choose1 全选checkbox ,选中此checkbox,子列表的checkbox全部为选中状态. 2 在子列表中如果去掉一个checkbox则Choose1 的全选状态也改为不选中 ...

  9. [datatable]两个DataTable 连接

    using System; using System.Collections.Generic; using System.Text; using System.Data; namespace Cons ...

  10. Cocos2d-x 3.0 事件系统【转】

    事件系统,是一个软件的核心组成部分.从小处讲它是应用程序内部各模块交互的设计模式,从大处讲,它是软件架构的组成模块.在现代软件开发中,操作系统通常通过一些预定义的事件,告知应用程序发生的一些事情如用户 ...