SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为。我认为这是一门说来简单,但操作起来复杂的技术,只可意会,不可言传。作为一名前端工程师,不需要精通SEO,但必须要了解它。SEO有一条不变的准则就是它永远都在变,因为没有一沉不变的优化方案可供大家套用。但我们仍然可以发现一些基础的或是被人们公认的规律来进行网站的SEO。更重要的是我们要有自己的实践,不断发现适合自己行之有效的SEO方法。

  从宏观的角度来说,我认为SEO有三条最重要的规律,那就是原创的内容、高质量的外部链接和持之以恒适度的优化。

  前端是构建网站中很重要的一个环节,本篇重点从前端的角度来讲解一下SEO的实施方法。前端的工作主要是负责页面的HTML+CSS+JS,优化好这几个方面会为SEO工作打好一个坚实的基础。突出重要内容可以让搜索引擎判断当前页面的重点是什么,提升网站访问速度可以让搜索引擎的蜘蛛顺利、快速、大量的抓取网页内容,所以以下我就着重以突出重要内容和提升网站速度为主来总结一下。

突出重要内容

合理的title、description和keywords

  
截图取自于360搜索(so.com

  虽然现在搜索对这三项的权重慢慢减小,但还是希望能够合理的写好他们,只写有用的东西,不要在这里写小说,要表达重点。

  title:只强调重点即可,重要关键词出现不要超过2次,而且要靠前,每个页面title要有所不同,如下图:

  description:把网页内容高度概括到这里,长度要合理,不可过分堆砌关键词,每个页面description要有所不同,如下图:
  

  keywords:列举出几个重要关键词即可,也不可过分堆砌。

语义化书写HTML代码,符合W3C标准。

  对于搜索引擎来说,最直接面对的就是网页HTML代码,如果代码写的语义化,搜索引擎就会很容易的读懂该网页要表达的意思。例如文本模块要有大标题,合理利用h1-h6,列表形式的代码使用ul或ol,重要的文字使用strong等等。总之就是要充分利用各种HTML标签完成他们本职的工作,当然要兼容IE、火狐、Chrome等主流浏览器。
我们来看看著名的禅意花园网站(http://www.csszengarden.com/),在没有样式的情况下,代码非常语义化,看起来很工整,加载不同的样式之后可以随心所欲的改变页面外观。

  无样式情况下:

加载样式1:

加载样式2:

利用布局,把重要内容HTML代码放在最前。

  搜索引擎抓取HTML内容是从上到下,利用这一特点,可以让主要代码优先读取,广告等不重要代码放在下边。例如,在左栏和右栏的代码不变的情况下,只需改一下样式,利用float:left;和float:right;就可以随意让两栏在展现上位置互换,这样就可以保证重要代码在最前,让爬虫最先抓取。同样也适用于多栏的情况。

  

重要内容不要用JS输出。

  蜘蛛不会读取JS里的内容,所以重要内容必须放在HTML里。

尽少使用iframe框架。

  搜索引擎不会抓取到iframe里的内容,重要内容不要放在框架中。

为图片加上alt属性。

  
  当网络速度很慢,或者图片地址失效的时候,就可以体现出alt属性的作用,他可以让用户在图片没有显示的时候知道这个图片的作用。

可以显示图片时:
  

不能显示图片时:
  

需要强调的地方可以加上title属性。

  

保留文字效果。

  如果需要兼顾用户体验和SEO效果,在必须用图片的地方,例如个性字体的标题,我们可以利用样式控制,让文本文字不会出现在浏览器上,但在网页代码中是有该标题的。
  例如这里的“电视剧分类”,为了完美还原设计图,前端工程师可以把文字做成背景图,之后用样式让html中的文字的缩进设置成足够大的负数,偏离出浏览器之外,也可以利用设置行高的方法让文字隐藏。注意:不可使用display:none;的方法让文字隐藏,因为搜索引擎会过滤掉display:none;里边的内容,就不会被蜘蛛检索了。
  

HTML代码:
  

CSS代码:
  

  

利用CSS截取字符。

  如果文字长度过长,可以用样式截取,设置高度,超出的部分隐藏即可。这样做的好处是让文字完整呈现给搜索引擎,同时在表现上也保证了美观。
  

提升网站速度

尽量外链CSS和JS,保证网页代码的整洁,也有利于日后维护。

  
  
  这样的好处是可以把内容、表现和行为分离开,保证代码整洁的同时也方便维护。

CSS放在文件头部,JS放在文件尾部,可使用工具对CSS和JS文件进行压缩。

CSS Sprites。

  减少HTTP请求。利用CSS Sprites技术可以把网页用到的切片合成到一张图上,这样做既减少了HTTP请求数,又使得样式图片一次加载,避免网页“白”的尴尬。
360官网首页(http://www.360.cn)主要前端图片2张:

图片1:
  

图片2:
  

为图片设置高度和宽度,可提高页面的加载速度。

为静态资源文件增加过期时间,让用户通过本地缓存来更快的访问网站。

减少大改版的频率。

压缩、格式化代码。

  可以在上线前,使用一些工具,把HTML、CSS和JS都压缩、格式化一下,可以减少页面大小。

不使用CSS表达式,会影响效率。

使用CDN网络,可加快用户访问速度。

启用GZIP压缩,浏览速度变快,搜索引擎的蜘蛛抓取信息量也会增大。

善于利用浏览器插件。

  例如火狐的YSlow就很有用,可以查看该页面代码、样式、JS、图片等加载情况,为进一步优化页面起到了指导作用。

伪静态设置。

  如果是动态网页,可以开启伪静态功能,让蜘蛛“误以为”这是静态网页,因为静态网页比较合蜘蛛的胃口,如果url中带有关键词效果更好。
  动态地址:
  http://www.360.cn/index.php

  伪静态地址:
  http://www.360.cn/index.html

篇后语

  不要耍小聪明,利用已掌握的技术想方设法欺骗搜索引擎,可能会在短时间内有明显的效果,排名提升等,但搜索引擎发现后会果断降权你的网页或直接封杀,得不偿失。

  希望本文能让大家正确认识SEO,SEO要适度,网站还是要以“内容为王”,有好的内容网站才会有发展。

  转载原本地址:http://uxc.360.cn/archives/984.html

  大家多多互相学习

说说前端开发中的SEO的更多相关文章

  1. WEB前端开发中的SEO注意点

    近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写 ...

  2. 前端开发中的SEO

    什么是SEO SEO由英文Search Engine Optimization缩写而来,中文意译为"搜索引擎优化".SEO是指从自然搜索结果获得网站流量的技术和过程,是在了解搜索引 ...

  3. 初学者Web介绍一些前端开发中的基本概念用到的技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

  4. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  5. px em rem在WEB前端开发中的区别

    我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...

  6. 一探前端开发中的JS调试技巧

    前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  7. WEB前端开发中的图片压缩

    web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...

  8. 前端开发中的JS调试技巧

    前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  9. 前端开发中使用mac自带apache服务

    场景 前端开发中,总是会有这样的需求,就是快速的写一个脚本,或者一个简单的demo页面.这时,我们需要马上可以启动一个web服务,来支持开发. 我们可以安装一个全局的cli工具,通过node服务来满足 ...

随机推荐

  1. Unknown/unsupported SVM type in function 'cv::ml::SVMImpl::checkParams'

    1.在使用PYTHON[Python 3.6.8]训练样本时报错如下: Traceback (most recent call last): File "I:\Eclipse\Python\ ...

  2. hadoop Datanode多目录配置

    1. DataNode也可以配置成多个目录,每个目录存储的数据不一样.即:数据不是副本2.具体配置如下 hdfs-site.xml <property> <name>dfs.d ...

  3. 尚学linux课程---7、linux系统管理命令

    尚学linux课程---7.linux系统管理命令 一.总结 一句话总结: 查网络:netstat -ntpl 查进程:ps 1.需要下载163yum源(从外部源同步仓库)里面的所有rpm文件? re ...

  4. hexo next中遇到的bug,引发出的关于jquery中click()函数和on("click",function())的区别

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...

  5. NYOJ 119 士兵杀敌(三)【ST算法】 分类: Brush Mode 2014-11-13 20:56 101人阅读 评论(0) 收藏

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=119 解题思路: RMQ算法. 不会的可以去看看我总结的RMQ算法. http://blo ...

  6. 2019-7-1-Roslyn-让编译时候-Message-内容默认输出

    title author date CreateTime categories Roslyn 让编译时候 Message 内容默认输出 lindexi 2019-07-01 14:16:59 +080 ...

  7. mongodb 3.2 yaml 配置详解及范例

    mongodb3.x版本后就是要yaml语法格式的配置文件,下面是yaml配置文件格式如下:官方yaml配置文件选项参考:https://docs.mongodb.org/manual/ ... #c ...

  8. unordered_map

    #include <iostream> #include <cstdio> #include <queue> #include <algorithm> ...

  9. It's a Mod, Mod, Mod, Mod World (类欧几里得模板题

    https://vjudge.net/contest/317000#problem/F #include <iostream> #include <cstdio> #inclu ...

  10. poj 3682 King Arthur's Birthday Celebration (期望dp)

    传送门 解题思路 第一问比较简单,设$f[i]​$表示扔了$i​$次正面向上的硬币的期望,那么有转移方程 : $f[i]=f[i]*(1-p)+f[i-1]*p+1​$,意思就是$i​$次正面向上可以 ...