相信大部分的前端开发人员应该深知seo对我们的重要性，所以个人认为平台在开发初期就应该要考虑好seo优化的问题，不然做出来的页面，就算是效果很炫，功能很强，但是对搜索引擎也不友善。如果等到成熟时期再来调整这个问题，既费时又费力。

最近被seo工作人员教育一番后，本人秉着学习的态度，好好补了一补seo和技术相关的知识。

1、简化代码结构，更利于搜索引擎抓取页面内容。相信现在大部分的前端开发人员都已经脱离了table布局的方式，而采用了div+css的方式布局。不过在表格的表现模式下面，用table还是要比div方便简洁一些。同样，让页面上的源于尽量精简，css,js都采用外链模式。例如：如下的代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>快递选择控件_demo</title>

<link href="dist/css/bootstrap.css" rel="stylesheet" media="screen">

<link href="css/express-picker.css" rel="stylesheet" media="screen">

</head>

<body>

<div class="container" style="min-height: 500px;">

   <h1>Express Picker</h1>

    <label for="expressPicker">快递公司</label>

    <div id="renderTo" style="position:relative;">

        <input id="expressPicker" type="text">

    </div>

</div>

</body>

</html>

<script src="jquery-1.10.2.min.js"></script>

<script src="dist/js/bootstrap.js"></script>

<script src="js/express-picker.js"></script>

2、尽量使html得结构语义化。虽然语义化的HTML属于WEB标准化范畴，但对于一个全面的SEO来说，使用标准化的网页结构，对SEO是有百利而无一害的，而WEB标准化就必须谈到语义化的HTML。具体标签的语义化对SEO的优化，下一篇继续。例如：

　　＜em＞、＜strong＞这两个标签对SEO有着较大影响效果，适当使用它们，可使你的网页增色不少。＜em＞、＜strong＞与Hx一样，其区别也 在于重要性不　　一样。＜em＞ 表示强调，而＜strong＞意为重点强调，较em更重一些。在SEO时，我们可以将最重要的关键词用strong标记，对第二重要的用em标记。

3、链接最好加上title，根据需要加上rel的nofllow值。链接一定要加上href属性。对

于重要的导航链接，不可用onclick事件来代替href，做过SEO优化的人员都知道，蜘蛛目前对于js的支持很差，基本无法读取里面的链接地址。

4、图片应该加上alt说明，蜘蛛不认识图片上的内容，只能通过alt属性来判断，而对于具有说明意义的图片，不应用作背景图，应该用img标签。例如：<img src=”okdi/bg-name.png” alt=”****站点名称”/>

5、每个页面只能出现一次H1标签，H2标签可以多次：H1权重很高，普遍认为仅次于title，一般资讯详情页的标题、商品详情页的标题，都放在H1里。

6、重要的内容要优先加载，通过css的样式来控制相应的样式。文档的顺序读取优先放重要内容。例如：navigation视觉上是在前面，而content才是优先加载的。

　　

<html>

<head>

<style>

#navigation {position: absolute;top: 10px;left: 50%;width: 800px;margin-left: −400px;text-align: left;}

#content {position: absolute;top: 150px;left: 50%;width: 800px;margin-left: −400px;text-align: left;}

body {    text-align: center;    min-width: 600px;}

</style>

</head>

<body>

<div id="content">content<!-- SEO optimized content text goes here.--></div>

<div id="navigation">navigation<!-- navigational elements, ads go here--></div>

</body>

</html>

7、除首页外别的页面最好要加上面包屑型导航，导航结构一定要清晰。

8、做好404页面，一般会加首页链接及错误提示，并测试其返回状态码为404：1、用户体验友好，可以留住用户，不至于直接关闭页面;2、蜘蛛友好，可以返回抓取其他页面。

9、网站结构呈扁平状树型，目录结构不宜过深，每个页面离首页最多点击不超过3次，过深不利于搜索引擎的抓取。

10、有一些SEO作弊的技巧，比如display:none,position:absolute;以及overflow:hidden等。

前端相关的seo技术的更多相关文章

  1. Web前端相关资源

    Web前端相关 GRUNT: js task runner Sea.js: js模块化 knockout.js:MVVM开发前台,绑定技术 Angular.js: 使用超动感HTML & JS ...

  2. 必知干货：Web前端应用十种常用技术你全都知道吗？

    Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...

  3. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  4. 快速排名 让人疯狂的黑帽seo技术

    对于黑帽seo大家或许并不陌生,黑帽seo和白帽seo恰恰相反,是作弊手段.有白帽seo的时候,就有了黑帽seo一直到现在.但隔行如隔山这句话这句话一点都没错,再没接触黑帽seo技术之前我根本不知道黑 ...

  5. 前端中的SEO

    前端中的SEO: mate.title META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). <Meta name="Keywords" ...

  6. https://stackoverflow.com/与程序相关的IT技术问答网站

    https://stackoverflow.com/ Stack Overflow是一个与程序相关的IT技术问答网站.用户可以在网站免费提交问题,浏览问题,索引相关内容,在创建主页的时候使用简单的HT ...

  7. 学习seo技术要不断地扩大思维和思路

    http://www.wocaoseo.com/thread-148-1-1.html        目前学习seo技术的人员是越来越多了,通过查看seo这个词的指数,就能发现一些状况,从最初的每天3 ...

  8. 如何通过seo技术提高网站对用户的友好度

    http://www.wocaoseo.com/thread-129-1-1.html    今天的天气又是29度,眼看着满大街的人都穿着短袖和衬衣了,自己也再不能穿个厚厚的外套出去了,要不会被别人笑 ...

  9. 前端相关技术之ajax相关

    AJAX技术点 async javascript and xml:异步的js和xml,用js异步去操作xml ajax用于数据交互,不能操作DOM –节省用户操作,时间,提高用户体验,减少数据请求 – ...

随机推荐

  1. cscope 的使用

    一. cscope安装 1.软件下载:http://sourceforge.net/project/showfiles.php?group_id=4664 2.软件安装: ./configure -- ...

  2. Yii连接多个数据库的方法

    一.配置多数据库 大多数情况下,我们都会采用同一类型的数据库,只是为了缓解压力分成主从或分布式形式而已.声明你可以在 主配置文件 ( main.php )   中里声明其它的数据库连接: <?p ...

  3. nginx upstream的几种配备方式

     nginx upstream的几种配置方式 nginx 的upstream目前支持4种方式的分配 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器 ,如果后端服务器down掉,能自动剔 ...

  4. OSX 10.10安装教程。

    现在苹果已经放出了OS X 10.9 Mavericks第一个开发者预览版,从Mac App Store中获得的安装程序,可以在10.8的系统中直接进行升级,原有文件都会保留.但是要想制作成一个10. ...

  5. JavaScript 建立简单的图片库

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 实现3D摄像机缓冲系统的一些思考

    最近需要模拟红侠乔伊的镜头运用.这东西初看简单,实际还是很需要功夫的.关键不是程序技术如何(就一个摄像机),而是分析其轨迹和追踪点规律.其实就是一个3D空间中的缓冲系统.你如何确定都有什么参数,这么多 ...

  7. PHPCURL直接访问JSONRPC服务

    <?php $ch = curl_init(); $url = 'http://localhost/jsonrpc?tm='.time().mt_rand (100,999); //参数是为了防 ...

  8. Linux下Python获取IP地址

    <lnmp一键安装包>中需要获取ip地址,有2种情况:如果服务器只有私网地址没有公网地址,这个时候获取的IP(即私网地址)不能用来判断服务器的位置,于是取其网关地址用来判断服务器在国内还是 ...

  9. python开发vim插件

    [python开发vim插件] 按如下方式使用python开发vim插件,注意调用时使用的是exec. 但在函数中嵌入python代码更为简便,如下: python如何传递参数给python: 代码头 ...

  10. python知识点（07-08）

    python: 循环else: while true: if x>1: print() break else: print() 文件循环: for line in open(‘test.txt’ ...