相信大部分的前端开发人员应该深知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. hive部署手册

    安装环境: 机器 只需要安装一台机器      操作系统:Ubuntu 11.04 64操作系统      hadoop:版本是1.0.2,安装在/usr/local/hadoop      sun ...

  2. 一:AndEngine的小例子

    首先导入架包,下载:http://download.csdn.net/detail/duancanmeng/4060082 lib文件夹中 像我们写android程序entends Activity一 ...

  3. JBPM4入门——6.流程实例的创建和执行

    本博文只是简要对JBPM4进行介绍,如需更详细内容请自行google 链接: JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流 ...

  4. reStructuredText

    reStructuredText 简明教程 060724 17:58 作者: Laurence 邮箱: 2999am@gmail.com ID: Kardinal @ Ubuntu.org.cn论坛 ...

  5. RDoc

    RDoc - Ruby Documentation System home github.com/rdoc/rdoc rdoc docs.seattlerb.org/rdoc bugs github. ...

  6. WebAPI初探

    由于即将要接手的新项目计划用ASP.NET MVC3来开发,所以最近一段时间一直在看相关的书或文章.因为之前在大学里也曾学习过MVC2开发,也做过几个简单的MVC2的小型测试项目,不过在后来工作以后主 ...

  7. Anychart 破解备注

    由于项目里用到anychart组件,第一次破解了,后来升级再破解时忘了方法,所以在这里备注一下. 首先需要的工具: swfc  (http://www.buraks.com/swifty/swfc.h ...

  8. eclipse手动导入dtd文件

    1.在eclipse的工具栏上按照“Window->Preferences->XML->XML Catalog”依次点下去,然后在右侧选中 User Specified Entrie ...

  9. 俄罗斯方块游戏 --- java

    俄罗斯方块游戏 如有疑问请查看:http://zh.wikipedia.org/zh-tw/%E4%BF%84%E7%BD%97%E6%96%AF%E6%96%B9%E5%9D%97 更多疑问请参考: ...

  10. python中的深拷贝与浅拷贝

    深拷贝和浅拷贝 浅拷贝的时候,修改原来的对象,浅拷贝的对象不会发生改变. 1.对象的赋值 对象的赋值实际上是对象之间的引用:当创建一个对象,然后将这个对象赋值给另外一个变量的时候,python并没有拷 ...