一:什么是SEO?

  搜索引擎优化(Search Engine Optimization),简称SEO。是按照搜索引擎给出的优化建议,以增强网站核心价值为目标,从网站结构、内容建设方案、用户互动传播等角度进行合理规划,以改善网站在搜索引擎中的表现,吸引更多搜索引擎用户访问网站。SEO与搜索引擎,互相促进,互利互助。 要想更好理解以上一段废话,首先需要理解关于搜索引擎的两个概念。

二:前端


提高页面加载速度。 能用css解决的不用背景图片,背景图片也尽量压缩大小,可以几个icons放在一个图片上,使用background-position找到需要的图片位置。可以减少HTTP请求数,提高网页加载速度。

结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上,每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的,css文件可以放在head里,JS文件可以放置在body的最下方,在不影响阅读的情况下再去加载JS文件。

优化网站分级结构。在每个内页加面包屑导航是很有必要的,可以让蜘蛛进入页面之后不至于迷路,有条件的话,最好能单独加个Sitemap页面,将网站结构一目了然地展示在蜘蛛面前,更有利于蜘蛛抓取信息。

集中网站权重。由于蜘蛛分配到每个页面的权重是一定的,这些权重也将平均分配到每个a链接上,那么为了集中网站权重,可以使用”rel=nofollow”属性,它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。

文本强调标签的使用。当着重强调某个关键词需要加粗表示,选用strong标签比使用b标签要更有强调作用。

a标签的title属性的使用。在不影响页面功能的情况下,可以尽量给a标签加上title属性,可以更有利于蜘蛛抓取信息。

图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息,作用同上。

H标签的使用。主要是H1标签的使用需要特别注意,因为它自带权重,一个页面有且最多只能有一个H1标签,放在该页面最重要的标题上面,如首页的logo上可以加H1标签。

 

  精减代码 
       清除网页中一些冗余的代码,网上有这样的工具,可以辅助完成,如果需要的话,我们可以把代码中的注释去掉,甚至空行之类的也去掉,尽量的减少代码量,从而减小页面体积。
       CSS Sprites 
       通俗点讲,就是图片合并,可以把网站中一些比较通用的小图片,合并到一张图片上,然后利用CSS技术来分别调用图片不同的部分。这样可以大大的减少HTTP的请求量,在网页加载的时候,速度就快很多,现在很多大中型网站都在用这个前端加速技术,效果也是很不错的。
       为图片指定宽度与高度 
       这也是很多人比较容易忽略的,在页面中,请你为每一个图片,都指定一个width属性与height属性,这样在页面加载的时候,浏览器会预先留出既定的位置,图片下边的代码可以继续下载而不用等待,提高并行下载的速度,提高了页面加载的速度。
       启用Keep-Alive属性 
       Keep-Alive你可以理解为长连接,在没有启用keep-alive属性之前,浏览器向服务器请求的connection是即连即断的,执行一次HTTP请求完成后,马上断开这个连接的,而启用Conncetion的Keep-Alive属性之后,这个连接可以保持一段时间,从而可以提高页面加载的速度。
       使用浏览器缓存 
       可以使用缓存技术来提高页面的加载速度,为一些不经常变化的文件,设置一个相对较长的过期时间,这样当用户访问网站后,就会在它的浏览器中留下缓 存,当它在下次请求的时候,留在缓存中的组件就不用再向服务器发出HTTP请求了,这样减少了浏览器向网站服务器发出的HTTP请求数,从而提高了页面加 载速度,这在一些图片比较多的网站,效果是非常明显的,我们要善于使用缓存技术。
       启用GZIP压缩 
       大中型网站,基本都启用了GZIP压缩,如果你使用的是虚拟主机,你可以让服务商为你启用,如果自己有服务器,自己启用也很简单的,为什么启用GZIP压缩就会加快速度呢,因为当启用了GZIP后,网站服务器向你传输数据之前,是经过压缩了的,当传输到你的浏览器后,会再被解压缩的,从而可以在 你的浏览器上正常显示,而且压缩率可以达到很多高,效果非常好。一般你启用了压缩后,搜索引擎对你网站的抓取量也是上升了的。 
       前端速度优化方面还有很多工作可以去做,例如大公司都启用了CDN加速,你的图片也可以进行无损压缩,CSS、JS文件都可以用一些专业的工具去压缩,在你网页的head标头要声明字符集,尽量少用重定向,指定Last-Modified 或 ETag标头等,当然这些都多少涉及了一些技术方面的问题,做页面前端优化是一个系统的工程,是需要技术、SEO、运维等去配合完成的,不过这个投入是绝对值得的。    

前端如何做好seo的更多相关文章

  1. 为什么做前端要做好SEO

    我就挑干货说啦SEO可能听起来很高大上,其实翻译成中文就是"搜索引擎优化",它只是通过一定的方法在网站内外发布文章.交换连接等,最终达到某个关键词在搜索引擎上获得好的排名. 我有幸 ...

  2. 前端如何做好SEO优化

    https://www.cnblogs.com/weiyf/p/9511021.html 一:什么是SEO? 搜索引擎优化(Search Engine Optimization),简称SEO.是按照搜 ...

  3. src和href 如何做好seo 前端页面有那三层 AMD和CMD 规范的区别 渐进增强

    1==>简述一下src与href的区别 src用于替换当前元素: href用于在当前文档和引用资源之间确立联系 2==>.谈谈以前端角度出发做好SEO需要考虑什么? a. 了解搜索引擎如何 ...

  4. 小型工厂企业网站究竟该怎么做好SEO优化,从而带来更多订单?

    中 小企业以及小型工厂做好SEO工作,每年从SEO带来的订单量还是很可观的,随着互联网的蓬勃发展,越来越多的小型工厂型企业网站开始逐渐走向互联网营 销,开始逐渐利用互联网开展销售工作!但是大部分的工厂 ...

  5. 教你如何利用xml格式的sitemap文件做好SEO

    教你如何利用xml格式的sitemap文件做好SEO 浏览: | 更新:-- : 一般的网站中都有网站地图文件,它有HTML格式与XML格式,网站地图可以帮助搜索引擎抓取.帮助用户找到自己所需要的内容 ...

  6. 前端中的SEO

    前端中的SEO: mate.title META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). <Meta name="Keywords" ...

  7. 前端开发如何做好SEO优化的工作

    前端开发工程师不仅需要要跟视觉设计师.交互式设计师配合,完美还原设计图稿,编写兼容各大浏览器.加载速度快.用户体验好的页面.现在还需要跟SEO人员配合,调整页面的代码结构和标签. 一些成熟的平台,在开 ...

  8. 教你如何做好SEO优化中的前端优化

    网站的速度是很多人都面临的问题,其实许多网站,都没有特意的去优化加载速度,对于一个网站来说,加速不但提高了用户体验(如果一个网站在几秒内没 有打开,大多数用户选择的是关闭而非等待),而且对于SEO的流 ...

  9. [html] 前端角度出发做好SEO需要考虑什么

    Meta标签优化 主要包括主题(Title),网站描述(Description),和关键词(Keywords).还有一些其它的隐藏文字比如Author(作者),Category(目录),Languag ...

随机推荐

  1. python13 1.函数的嵌套定义 2.global、nonlocal关键字 3.闭包及闭包的运用场景 4.装饰器

    ## 复习   '''1.函数对象:函数名 => 存放的是函数的内存地址1)函数名 - 找到的是函数的内存地址2)函数名() - 调用函数 => 函数的返回值  eg:fn()() =&g ...

  2. Java中interrupt的使用

    通常我们会有这样的需求,即停止一个线程.在java的api中有stop.suspend等方法可以达到目的,但由于这些方法在使用上存在不安全性,会带来不好的副作用,不建议被使用.具体原因可以参考Why ...

  3. MySQL实战45讲学习笔记:索引(第四讲)

    一.索引模型 1.索引的作用: 索引的出现其实是为了提高数据查询的效率,就像书的目录一样 提高数据查询效率 2.索引模型的优缺点比较 二.InnoDB索引模型 1.二叉树是搜索效率最高的,但是实际上大 ...

  4. Tomcat系列(2)——Tomcat文件目录7个

    核心部分 bin (运行脚本) conf (配置文件) lib (核心库文件) logs (日志目录) temp (临时目录) webapps (自动装载的应用程序的目录) work (JVM临时文件 ...

  5. Mongodb复杂查询,总结

    内嵌文档复杂查询 数据结构 { "_id":"1412243", "info":{ "data":[ { "b ...

  6. mui框架中dialog框的实现

    <script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeB ...

  7. spring kafka生产、消费消息

    参考网址: https://blog.csdn.net/lansetiankong12/article/details/54946641 1.新建Maven项目-KafkaMaven ->点击n ...

  8. Convolutional Pose Machines(理解)

    0 - 背景 人体姿态识别存在遮挡以及关键点不清晰等主要挑战,然而,人体的关键点之间由于人体结构而具有相互关系,利用容易识别的关键点来指导难以识别关键点的检测,是提高关键点检测的一个思路.本文通过提出 ...

  9. 2018-2019-2 20165234 《网络对抗技术》 Exp5 MSF基础应用

    实验五 MSF基础应用 实验内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践,ms08_067(成功) 2. 一个针对浏览器 ...

  10. kibana转码显示

    $('.truncate-by-height').each((i, dom) => { $(dom).html(decodeURIComponent($(dom).html())) })