相信大部分的前端开发人员应该深知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. javaScript生成二维码(支持中文,生成logo)

    资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrco ...

  2. kafka总结

    近期在做kafka metrics. 参考了几个开源的项目,诸如kafka manager, Burrow, kafkaOffsetMonitor,东西都很不错,可惜没有一个是用java编写的,最终自 ...

  3. Install Hbase

    1. You should guarantee you have installed hadoop on your computers. 2. Download and uncompress the ...

  4. Hadoop集群搭建

    配置IP,修改主机名,关闭防火墙,配置SSH免密码登录

  5. gcc参数-l传递顺序错误导致`undefined reference&#39;的一点小结

    刚才编译一个pthread的单文件程序, 使用的命令行是: gcc -o thread1 -lpthread thread1.c 结果报错: $ gcc -o thread1 -lpthread th ...

  6. MyEclipse中无法识别 sun.misc.BASE64Encoder

    sun.misc.BASE64Encoder/BASE64Decoder类不属于JDK标准库范畴,但在JDK中包含了该类,可以直接使用.但是在MyEclipse中直接使用却找不到该类. 解决方法: 1 ...

  7. Windows Server 2008(R2)配置apache+php+mysql环境问题事项

    服务器环境:Windows 2008 R2 64位.apache,mysql,php都是32位. 1. 80端口的外网访问问题 表现:80端口本地可以访问,外网不能访问,换了8080端口也是一样,检查 ...

  8. [转载]ExtJs4 笔记(6) Ext.MessageBox 消息对话框

    作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法 ...

  9. qwt 介绍

    QWT,全称是Qt Widgets for Technical Applications,是一个基于LGPL版权协议的开源项目, 可生成各种统计图. [QWT简介] 它为具有技术专业背景的程序提供GU ...

  10. MySQL 5.7.9的多源复制

    什么是多源复制? 首先,我们需要清楚 multi-master 与multi-source 复制不是一样的. Multi-Master 复制通常是环形复制,你可以在任意主机上将数据复制给其他主机. M ...