相信大部分的前端开发人员应该深知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 studio gradle 打包 那些事

    总结了一下 目前觉得比较好用的gradle 和一些打包 经验.放在这里. 首先说下 渠道号 这个概念,我们经常会统计我们的api 访问来源 是来自于那个app store,这有利于 我们针对性的推广. ...

  2. arcengine9.3与10开发授权代码

    arcgis10: ESRI.ArcGIS.RuntimeManager.Bind(ESRI.ArcGIS.ProductCode.EngineOrDesktop); arcgis9.3: 在窗体上放 ...

  3. PHP开发规范

    十.开发规范下面我们讲解 Yii 编程中推荐的开发规范.为简单起见,我们假设 WebRoot 是 Yii 应用安装的目录.1.URL默认情况下,Yii 识别如下格式的 URL: http://host ...

  4. 字符串中符号的替换---replace的用法

    #include<iostream> #include<string> using namespace std; int main() { string s1 = " ...

  5. java中的类实现comparable接口 用于排序

    import java.util.Arrays; public class SortApp { public static void main(String[] args) { Student[] s ...

  6. 批量还原数据库 SQL Server 2008

    1.如果你够懒,不想一步一步点路径,一步一步选择 2.如果你连单个备份数据库的存储过程都不想多执行,一般每还原一个需要修改数据库名 下面的脚本适合你: /*********************** ...

  7. Java与云计算有什么关系呢

    在如今这个信息技术高速发展的今天,云计算已经不是一个陌生的概念了,但是,当云计算遇到java将会有什么样的问题产生呢?下面,新霸哥将会为你揭晓Java与云计算之间的关系. 众所周知,java是一种应用 ...

  8. 星星字体 ps教程

    本教程主要使用Photoshop制作绚丽星空装饰的艺术字教程,这个教程很简单,只需要一些简单技巧,即可做出海报.书籍杂志的封面效果.其中的字体.笔刷和背景均可以更换 教程所需要的素材链接:http:/ ...

  9. 单源最短路径的Bellman-Ford 算法

    1.算法标签 BFS 2.算法概念 Bellman-Ford算法有这么一个先验知识在里面,那就是最短路径至多在N步之内,其中N为节点数,否则说明图中有负权值的回路,这样的图是找不到最短路径的.因此Be ...

  10. [TL-WR841N V5~V9] 如何当作无线交换机使用？

    http://service.tp-link.com.cn/detail_article_1034.html