首页 > 代码库 > 前端相关的seo技术
前端相关的seo技术
相信大部分的前端开发人员应该深知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=http://www.mamicode.com/”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技术