前端相关的seo技术

时间:2023-03-09 20:40:43
前端相关的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=”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等。