前端开发中的SEO
什么是SEO
SEO由英文Search Engine Optimization缩写而来，
中文意译为“搜索引擎优化”。SEO是指从自然搜索结果获得网站流量的技术和过程，是在了解搜索引擎自然排名机制的基础上，
对网站进行内部及外部的调整优化， 改进网站在搜索引擎中的关键词自然排名， 获得更多流量， 从而达成网站销售及品牌建设的目标。
SEO的分类
- 白帽SEO：改良和规范网站设计，使之对搜索引擎和用户更加友好，是一种搜索引擎推荐的做法。
- 黑帽SEO：利用或者放大搜索引擎的缺陷，使用不正当竞争获取更多的访问量。（例如最近花千骨电视剧热播，马上有一些网站使用这个标题标题，但是内容却是推销广告的，给广大网名造成很大困扰）。
SEO的主要方面
- 网站标题、关键字、描述
- 网站内容优化
- 合理设置Robot.txt文件
- 生成对搜索引擎友好的网站地图
- 增加外链引用
其中最重要的是以下2个方面： - 网站结构布局优化
- 网页代码优化
网站结构布局优化
推荐使用扁平化结构。网站的目录层级要尽可能少，中小型网站不要超过3级。做到扁平化结构需要注意以下的3个方面：
- 控制首页的链接数量（网站首页的权重最高）。首页应该有有效的链接，爬虫通过首页的连接到达内页，如果没有有效的链接就会直接影响网站的收录数量。当然首页也不能有过多的链接，内页的链接不要放在首页，链接过多会影响用户体验。中小企业网站首页的链接数量应该在100个以内。链接的性质可以是页面导航、锚链。
- 扁平化的目录层次。尽量让Spider跳转3次就可以到达网站的任意一个内页。例如网站的设计可以使用以下的3级：主页、栏目、内容页扁平铺开的结构，而不能是纵深的结构。例如我们要做一个关于植物的网站可以采用以下的层级结构：
- 导航SEO优化。导航可以分为主导航和父导航。导航应该使用文字，如果为了用户体验采用图片导航，则应该为图片设置必要的
alt和title属性。其次在导航的设计上应该使用面包屑导航。它能够让用户了解到当前的位置，了解网站内容的组织方式。 - 页面的大小控制在100k以下。
代码SEO优化
<head>标签放网页的标题，各个页面不同。<meta keywords>列举出几个重要的关键词。<meta description>网页内容的高度概括。<br />标记应该放在文本中间，即使用<p><br /></p>替代突兀的<br />标记。- html语义化。例如我们要做一个导航，可以使用
div+span标记：
<div class="nav">
<span>课程</span>
<span>|</span>
<span>问答</span>
<span>|</span>
<span>社区</span>
</div>
但是以上的代码丝毫没有语义化（div和span标记是html中语义化最低的标签），推荐的做法是使用ul和li标记，再通过合适的CSS样式来实现同样的效果：
<ul class="nav">
<li>课程</li>
<li>问答</li>
<li>社区</li>
</ul>
.nav li{
float: left;
list-style: none;
display: block;
margin: 0 5px;
border-right: 1px solid #000;
}
<a>标记要加上说明（title属性），对于指向外部网站的链接要使用rel="nofollow"属性告诉爬虫不要去爬其他的页面。<h1>正文标题要使用<h1>标记，副标题要使用<h2>。可以使用CSS样式进行显式风格的设置。切记：不重要的地方不要随便使用<h1>标记。<table>标记的优化。使用<caption>标记为表格指定标题。
<table>
<caption>表格标题</caption>
<tr>
<th>季度</th>
<th>销售额</th>
</tr>
<tr>
<td>1</td>
<td>33665.25</td>
</tr>
<tr>
<td>2</td>
<td>21215.99</td>
</tr>
</table>
- 强调网页中的重要内容应该使用
<strong>标记，避免使用<b>标记（对搜索引擎不友好）。<em>的权重仅次于<strong>。如果仅仅使显示的效果发生变化就使用<b>标记和<i>标记。
Tips
- 将重要html代码放在最前面，广告等不重要的部分放在整个文档的最后，然后利用CSS样式控制广告div左右浮动。
- 重要内容不要使用js输出。
- 尽量少使用
iframe框架。 - 对于暂时不需要显示的元素应该使用
z-index属性而不是display:none;这样的代码，因为Spider会过滤display属性为none的内容。 - 尽量精简代码。
前端开发中的SEO的更多相关文章
- WEB前端开发中的SEO注意点
近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写 ...
- 说说前端开发中的SEO
SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为.我认为这是一门说来简单,但操 ...
- 初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
- web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
- px em rem在WEB前端开发中的区别
我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...
- 一探前端开发中的JS调试技巧
前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
- WEB前端开发中的图片压缩
web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...
- 前端开发中的JS调试技巧
前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
- 前端开发中使用mac自带apache服务
场景 前端开发中,总是会有这样的需求,就是快速的写一个脚本,或者一个简单的demo页面.这时,我们需要马上可以启动一个web服务,来支持开发. 我们可以安装一个全局的cli工具,通过node服务来满足 ...
随机推荐
- HDU - 5685 Problem A（逆元）
这题我第一次想的就是直接模拟,因为我是这样感觉的,输入n是3次方,长度是5次方,加起来才8次方,里面的操作又不复杂,感觉应该能过,然而不如我所料,TLE了,玛德,这是第一次的代码. #include ...
- NeHe OpenGL教程 第二十三课：球面映射
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- 键盘--android 隐藏系统键盘
. -----------------------------------------已验证----------------------------------- public static void ...
- Python中作Q-Q图（quantile-quantile Plot）
Q-Q图主要可以用来回答这些问题: 两组数据是否来自同一分布 PS:当然也可以用KS检验,利用python中scipy.stats.ks_2samp函数可以获得差值KS statistic和P值从而实 ...
- 利用js将 json对象在textarea中赋值与展示
明明很简单的东西,可惜网上一大堆废话.在此记录,转需. jsonStr = JSON.stringify(jsondata,); example: <!doctype html> < ...
- [ActionScript 3.0] AS3.0 获取文本的明暗度
/** * 获取文字的明暗值 * @param t 文字 * @return Number */ function getDensity(t:String):Number { var ttf:Text ...
- java GUI之基本图形
1.为了支持图形用户界面程序设计,java1.0的标准类库中包含一个抽象窗口工具箱(Abstract Window Toolkit,AWT). 这个工具箱极不成熟,其编程模型也不是面向对象的,有很大的 ...
- Eclipse CDT 代码高亮配置
效果图如下: 配置生效方式: 找到CDT的workspace目录中如下文件 X:\workspace\.metadata\.plugins\org.eclipse.core.runtime\.sett ...
- nginx 反向代理（Reverse Proxy）与耗时记录
反向代理服务器位于实际的服务器之前,他能够缓存服务器响应,加速访问,同时也启到了负载均衡服务器的效果.反向代理服务器解析客户端请求,根据负载均衡算法转发到不同的后台服务器上.用户和后台服务器之间不再有 ...
- Flask + Gunicorn + Nginx 部署
最近很多朋友都在问我关于 Flask 部署的问题,说实在的我很乐意看到和回答这样的问题,至少证明了越来越多人开始用 Flask 了. 之前我曾发表过一篇在 Ubuntu 上用 uwsgi + ngin ...