什么是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. 关于Rotation和Quaternion的一些问题

    当我们使用unity的时候,面对一个物体,一个不可避免的问题就是:控制物体的旋转. unity的Transform组件的第二个属性Rotation为我们提供控制物体旋转的功能.在一个物体的Inspec ...

  2. ylbtech-Recode(记录)-数据库设计

    ylbtech-dbs:ylbtech-Recode(记录)-数据库设计 -- =============================================-- DatabaseName ...

  3. JAVA 文本框、密码框、标签

    //文本框,密码框,标签 import java.awt.*; import javax.swing.*; public class Jiemian5 extends JFrame{ JPanel m ...

  4. 微信支付开发若干问题总结，API搞死人(谢谢ζั͡ޓއއއ๓http://www.thinkphp.cn/code/1620.html)血淋淋的教训，第二次栽这里了

    近日,我研究了微信支付的API,我是用简化版的API,首先简述一下流程: 1.通过APP_ID,APP_SCRECT获取网页授权码code, 2.利用code获取用户openid/userinfo 3 ...

  5. centos的软件安装方法rpm和yum

    centos的软件安装大致可以分为两种类型: [centos]rpm文件安装,使用rpm指令  类似[ubuntu]deb文件安装,使用dpkg指令 [centos]yum安装   类似[ubuntu ...

  6. oracle中统计重复几次的数据有几条

    源地址:http://zhidao.baidu.com/link?url=ZgCztNzCScRI5kAqGqug1LJvf7IX311EQs6fJ0-W1kOtWaaR7MrtLoV_228Ed8F ...

  7. [ActionScript 3.0] AS3 GUID(全局唯一标识符)

    package com.controls { import flash.display.Sprite; import flash.system.Capabilities; public class G ...

  8. I2C协议(转)

    1.I2C协议   2条双向串行线,一条数据线SDA,一条时钟线SCL.   SDA传输数据是大端传输,每次传输8bit,即一字节.   支持多主控(multimastering),任何时间点只能有一 ...

  9. [kuangbin带你飞]专题十一 网络流

            ID Origin Title   34 / 81 Problem A POJ 3436 ACM Computer Factory   92 / 195 Problem B POJ 3 ...

  10. (easy)LeetCode 205.Reverse Linked List

    Reverse a singly linked list. 解法一:记录单链表每个节点的val,然后重新为单链表赋值.(取巧,仅仅是将val部分改变,原始node节点并没有改变) 代码如下: /** ...