前端相关的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等。

时间: 2024-08-13 04:35:30

前端相关的seo技术的相关文章

独家揭开几项神秘SEO技术的猪八戒面纱

我们常常在励志文章上看到一句话:20岁的时候跟对人,30岁之后要做对事,我觉得这话很有道理. 按照我的理解,20岁的时候你一定要进入到正确的圈子,30岁之后就要努力打造属于自己的圈子. 不论你混白道黑道还是互联网圈,都要讲究的.白道,你没有权力硬邦邦的后台,爬到副科级就是天花板了;黑道,你没后带头大哥罩你,早晚被人砍死在下水沟;互联网圈,你没有交费进到几个已经在互联网上被骗过无数次的大师带你,那么你被骗的次数更多,走的路更曲折. 你接触到的人越多,你就会越来越明白就那么回事——师傅领进门,修行在

我对知乎前端相关问题的十问十答

之前知乎上有不少同行邀请我回答一些前端相关问题,但是,大家都知道了,要认真回答一个问题是需要大量时间和精力的,对于还在不断学习积累阶段的我,时不时分散原本的精力,打乱自己原本的节奏,实际上是一件不划算的事情.就好像邮件或者微信,来一条信息,你就去看一下,时间和精力都会大大分散,工作和学习效率必然会大打折扣.所以我的策略是一段时间后专门花时间统一处理,这样时间利用率会更高,投入产出比会更大. 对于知乎上的这些前端的问题,我也打算采用同样的套路,趁着端午节前还有两个晚上的自由时间(当晚修正:两个晚上

【转载】张鑫旭对知乎前端相关问题的十问十答

问题一.前端现在怎么这么多人? 原问题地址是:https://www.zhihu.com/question/55886635 问题描述如下: 投出去的简历没有人看了 我的回答: 想来想去,还是从一个非前端领域的切身故事说起吧. 我的老家江苏泰兴是中国银杏之乡,产量全国1/3,而我外公家宣堡镇除了小馄饨出门,还是就是中国银杏第一乡的美称.在我小的时候,银杏的药用价值和使用价值被发掘,银杏价格突然猛增,那个时候的银杏树是没有人专门种植的,全部都是很早很早以前的那些老树,百年以上的比比皆是,或者说全部

必知干货:Web前端应用十种常用技术你全都知道吗?

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的web界面应用技术. Web应用程序的界面设计,其核心就是网页设计 ,但它的重点主要是在功能方面.要超越桌面应用程序, Web应用程序必须提供简单.直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情. 以前,我们并没有注意到web应用程序这个方式,但是现在是时候仔

Web前端十种常用的技术

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的web界面应用技术. Web应用程序的界面设计,其核心就是网页设计 ,但它的重点主要是在功能方面.要超越桌面应用程序, Web应用程序必须提供简单.直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情. 以前,我们并没有注意到web应用程序这个方式,但是现在是时候仔

日常相关的标准技术和组织

在使用开源项目做技术选型时,如果对技术标准有一些了解,可以帮我们更容易的了解一些技术的生态和工具链.比如上面的 LDAP,我们可以在采购软件时优先考虑支持 LDAP 的产品,从而降低自行接入的成本:对于自己项目上更为具体的实现,如设计 API,我们可以选择一套参考标准,如 JSON:API,让沟通成本大大降低:在前后端协作上,如果采用 Swagger 的 OpenAPI 可以容易的找到一套开源工具帮我们完成文档.SDK 生成等工作. 下面让我们一起了解一些互联网常见的技术标准和组织. IETF

黑帽SEO技术不可取

在SEO与搜索引擎同步发展的过程中,搜索引擎和SEO在一定程度上形成了一种"道高一尺,魔高一丈"的竞争关系.这里的魔高一丈指的是"黑帽SEO技术". 搜索引擎在搜索新网站的过程中,感受到了SEO给他们带来的方便,使得网站经过优化后能够容易地被它们所抓取,提高了搜索信息准确度和信息量. SEO从业人士总是想刺探搜索引擎排名规律,使自己网站能够容易地根据这些规律来得到优化在搜索结果中占据优先位置.同时,SEO人士来捕捉搜索引擎的漏洞和缺陷,将不好网站塞给搜索引擎,以次充

学会在短时间内最有效的提升你的seo技术

很多新站长们刚加入互联网这个大环境,都想通过搜索引擎这个免费的流量的通道获取大量的流量,但并不是每个人都知道掌握SEO优化的细节,所以导致大家在获取这个流量 的时候有时付出了大量的时间和精力,有时甚至精力时间花费了却流量也没有来,在这过程中很多站长都会放弃,其它SEO是一门技术,里面包含的技术知识点很多,并不是一两天就可以学会的,那应该如何学习SEO呢,这里我给大家一些建议. 第一.要给自己设定一个合理的期限学会 为什么这样说呢,其实很简单,做任何事都要有规划和目标,如果没有,那再容易的事都可能

快速排名 让人疯狂的黑帽seo技术

对于黑帽seo大家或许并不陌生,黑帽seo和白帽seo恰恰相反,是作弊手段.有白帽seo的时候,就有了黑帽seo一直到现在.但隔行如隔山这句话这句话一点都没错,再没接触黑帽seo技术之前我根本不知道黑帽seo能这么快的排名.今天我就解密下7天快速排名的方法,同时感谢来自"黑帽技术网"的技术解答我的问题,据了解,百分之九十的黑帽技术来自它,拥有独家的黑帽技术代码及视频教程. 黑帽seo技术之权重转移: 如图片所示,相信大家也看过一个新站权重5的站,在此之前,笔者一直疑惑,其实这就是黑帽中