前端如何作好seo

一：什么是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、运维等去配合完成的，不过这个投入是绝对值得的。