什么是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. UVA 272 TEX Quotes

    TEX Quotes 题意: 变引号. 题解: 要想进步,真的要看一本好书,紫书P45 代码: #include<stdio.h> int main() { int c,q=1; whil ...

  2. Redirect 原理

    mvc .net 中,从服务器端跳转页面有很多方法 有些不会改变浏览器地址栏的地址,这个好理解,mvc本身的机制就是action的名字不一定是view的名字 我们请求的不是文件名,在action中我们 ...

  3. sentos nginx安装

    nginx可以使用各平台的默认包来安装,本文是介绍使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好,这里默认你已经装好. ububtu平台编译环 ...

  4. Android之BroadcastReceiver1

    1.触发发送广播 public class MainActivity extends Activity { private Button sendButton; @Override protected ...

  5. git简单使用和说明文件的书写

    一. git 简单使用 1．注册 https://github.com/ 2．初始化 配置 git config --global user.name "Your Name" gi ...

  6. arm-linux-ld

    arm-linux-ld 直接指定代码段,数据段,BSS段的起始地址 -Ttest startaddr -Tdata startaddr -Tbss startaddr 示例: arm-linux-l ...

  7. PHP的require()函数可以在一行代码中多次读取

    [root@NJ232:~]$[root@NJ232:~]$more tt.php m#!/opt/php/bin/php -q<?phpwhile(1){ sleep(2); $arr = r ...

  8. SQL Server 2005中的分区表（四）：删除（合并）一个分区(转)

    在前面我们介绍过如何创建和使用一个分区表,并举了一个例子,将不 同年份的数据放在不同的物理分区表里.具体的分区方式为: 第1个小表:2010-1-1以前的数据(不包含2010-1-1). 第2个小表: ...

  9. C++学习50 对字符串流的读写

    文件流是以外存文件为输入输出对象的数据流,字符串流不是以外存文件为输入输出的对象,而以内存中用户定义的字符数组(字符串)为输入输出的对象,即将数据输出到内存中的字符数组,或者从字符数组(字符串)将数据 ...

  10. Java SE 第二十三讲----static关键字and final关键字

    1.static关键字 [在二十二讲视频中30分钟开始讲授] 2.static修饰属性:无论一个类生成了多少个对象,所有这些对象共同使用唯一一份静态的成员变量:一个对象对该静态成员变量进行了修改,其他 ...