相信大部分的前端开发人员应该深知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. 快速排名 让人疯狂的黑帽seo技术

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

  3. 前端中的SEO

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

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

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

  5. 为什么做前端要做好SEO

    我就挑干货说啦SEO可能听起来很高大上,其实翻译成中文就是"搜索引擎优化",它只是通过一定的方法在网站内外发布文章.交换连接等,最终达到某个关键词在搜索引擎上获得好的排名. 我有幸 ...

  6. WordPress的SEO技术

    原文:http://blog.wpjam.com/article/wordpress-seo/ 文章目录[隐藏] 内容为王 页面优化 标题 链接(URL) Meta 标签 语义化 H1 H2 H3 等 ...

  7. 转载——web前端相关资源总结

    前端牛人博客:张克军.阮一峰.拔赤(李晶).拔赤(李晶)2.张鑫旭.梦想天空.阿当.泽飞.刘杰(嗷嗷).为之漫笔(李松峰).goddyzhao.hax的技术部落.周爱民.随网之舞.子鼠.司徒正美.ju ...

  8. 【前端童鞋看过来!】给大家分享网盘里前端相关书籍,主要是和网络通信(HTTP/TCP/IP)及javascript相关的

    百度云链接:https://pan.baidu.com/s/1kUPdf5H(无密码) 截图: <HTTP权威指南> [豆瓣书评]:此书第一部分是HTTP的概略,如果你没有时间,通读第一部 ...

  9. 前端开发与SEO

    前端开发中通过一些小习惯,可以有利于SEO,本着蚊子再小也是肉的原则,能抓住自然不能忽略. 1.控制首页链接数量,不能过多,也不要太少.更不要为了凑数而添加 2.扁平化层次,力争跳转三次可以到任何页面 ...

随机推荐

  1. .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    .Net中我们通常使用Random类生成随机数,在一些场景下,我却发现Random生成的随机数并不可靠,在下面的例子中我们通过循环随机生成10个随机数: ; i < ; i++) { Rando ...

  2. Bootstrap框架的学习(一)

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  3. 免费开发者证书真机调试App ID失效问题:&quot;Unable to add App ID because the &#39;10&#39; App ID limit in &#39;7&#39; days has been exceeded.&quot;解决方案(5月5号)

    免费开发者证书真机调试App ID失效问题:"Unable to add App ID because the '10' App ID limit in '7' days has been ...

  4. WebBrowser与IE的关系,如何设置WebBrowser工作在IE9、10、11模式下?

    Web Browser Control – Specifying the IE Version http://www.west-wind.com/weblog/posts/2011/May/21/We ...

  5. jQuery基础(2)-- jQuery 选择器

    jQuery 选择器允许您对 HTML 元素组或单个元素进行操作.jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 ...

  6. SPOJ220 Relevant Phrases of Annihilation(后缀数组)

    引用罗穗骞论文中的话: 先将n 个字符串连起来,中间用不相同的且没有出现在字符串中的字符隔开,求后缀数组.然后二分答案,再将后缀分组.判断的时候,要看是否有一组后缀在每个原来的字符串中至少出现两次,并 ...

  7. JS-010-覆盖率测试工具 JSCoverage 初识

    在日常的 js 脚本语言开发过程中,在开发攻城狮进行日常的单元测试和测试攻城狮日常的测试过程中,js 代码的覆盖率是白盒测试的一个重要的考量标准.前些天,在无意中看到了一个 js 覆盖率测试统计工具 ...

  8. 50道经典的JAVA编程题(46-50)

    50道经典的JAVA编程题(46-50),最后五道题了,这是一个美妙的过程,编程真的能让我忘掉一切投入其中,感觉很棒.今天下午考完微机原理了,大三上学期就这样度过了,这学期算是解放了,可是感觉我还是没 ...

  9. mysql的数据导入导出

    1.Navicat for Mysql XML导出导入格式支持二进制数据:虽然同步数据人眼看不出区别,但是java尝试读取数据时,报datetime字段取出的值为“0000-00-00 00:00:0 ...

  10. 一个不喜欢读书的Javaer的读书单

    很可惜,从我一开始学技术开始,我就不喜欢看书,严重的时候翻不到两页就会开始狂打瞌睡.很幸运,有互联网能够为我提供很多知识,甚至一些知识从网上看来的会更加权威一些.但是,我的经验告诉我,无论是从功利性的 ...