相信大部分的前端开发人员应该深知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. 在Android中使用并发来提高速度和性能

    Android框架提供了很实用的异步处理类.然而它们中的大多数在一个单一的后台线程中排队.当你需要多个线程时你是怎么做的? 众所周知,UI更新发生在UI线程(也称为主线程).在主线程中的任何操作都会阻 ...

  2. 更新Code First生成的数据库

    1,首次访问时会自动生成数据库 2,某个Model增加一个字段后,再次访问会报,数据库不是最新 操作 1,Enable-Migrations 注意选择Default project为Star.Core ...

  3. 利用命令控制台cmd进入某个硬盘的某个文件夹的命令是什么？

    在命令行窗口中输入F:后回车就可以切换到F盘,如果想查看F盘的内容,可以再输入dir后回车 (输入“F”后要再输入一个“ :”再回车才行哦)

  4. Safari里使用JsonView

    这是第三方开发的一个Safari的jsonView,和chrome以及FF功能类似,现在已经更新到1.1版了. 传送门:https://github.com/rfletcher/safari-json ...

  5. Linux makefile教程之条件判断六[转]

    使用条件判断 —————— 使用条件判断,可以让make根据运行时的不同情况选择不同的执行分支.条件表达式可以是比较变量的值,或是比较变量和常量的值. 一.示例 下面的例子,判断$(CC)变量是否“g ...

  6. 使用异步任务加载网络上json数据并加载到ListView中

    Android中使用网络访问来加载网上的内容,并将其解析出来加载到控件中,是一种很常见的操作.但是Android的UI线程(也就是主线程)中是不允许进行耗时操作的,因为耗时操作会阻塞主线程,影响用户体 ...

  7. [Everyday Mathematics]20150219

    设 $0<a<b$, 试证: $$\bex \int_a^b (x^2+1)e^{-x^2}\rd x\geq e^{-a^2}-e^{-b^2}. \eex$$

  8. win下 golang 跨平台编译

    mac 下编译其他平台的执行文件方式请参看这篇文章,http://www.cnblogs.com/ghj1976/archive/2013/04/19/3030703.html  本篇文章是win下的 ...

  9. 安卓 开发 The connection to adb is down, and a severe error has occured.

    The connection to adb is down, and a severe error has occured.问题解决 其原因就是其他进程占用了  ADB的端口,所以无法启动 遇到问题描 ...

  10. Android应用解决65K方法数限制

    近日,Android Developers在Google+上宣布了新的Multidex支持库,为方法总数超过65K的Android应用提供了官方支持. 如果你是一名幸运的Android应用开发者,正在 ...