SEO頁面優化以及如何對單頁面應用進行SEO優化

1、簡介

　　一、何爲SEO？

　　SEO（search engine optimization），翻譯爲搜索引擎優化，是利用搜索引擎的搜索規則來提升在相關搜索引擎的排名以及訪問量的方式。

　　二、目的

　　爲了獲取更多的流量、排名以及點擊率從而實現品牌的推廣以及營銷，提升影響力。

2、如何在HTML進行代碼優化

　　一、爲何要進行HTML優化？

　　咱們作SEO，最直接的目的就是想經過搜索引擎得到好的關鍵詞排名和流量，而搜索引擎工做又是依賴它們的「蜘蛛」程序進行的。所謂搜索引擎蜘蛛只是搜索引擎開發的「機器人」程序，簡單來講，它的工做原理就是經過對網站的爬行，抓取網站的相關連接、關鍵詞、內容，而後分配網站的權重和相應的搜索引擎排名。而這個過程，大部分工做都是在網站的HTML代碼上進行的。因此，經過HTML優化，能夠告訴蜘蛛哪些內容是重要的，哪些內容又是能夠忽略的，以達到最佳的SEO效果。下邊就開始實際分析。

　　二、哪方面能夠有效的達到歐優化效果？

　　1）title 以及meta的使用。

　　這裏我把title跟meta放在第一位，說明這是很是重要的部分。

　　<title>網站標題</title>

　　<meta name="description" content="網站描述" />

　　<meta name="keywords" content="網站關鍵詞" />

　　在網站的標題以及meta屬性上寫到須要增強的關鍵詞，這樣會加大搜索概率，雖然近些年來不少搜索引擎對網站關鍵字等沒有那麼重視，可是寫上總比不寫的好。

　　2）H標籤的使用。

　　關於H標籤的使用也有講究。對於一個頁面來講，H1標籤應該是很是重要的，只能出現一次，裏邊放主要的標題信息，權重最高，對蜘蛛的吸引力也是最強的。其餘的H2到H6這些副標題強調的做用也就相應減小，用的次數沒有要求。

　　3）a標籤的使用

　　<a href="連接地址" title="連接說明">連接關鍵詞</a>

　　站內豐富的超連接會方便蜘蛛爬行，體現網站的深度和廣度，這點在SEO中相當重要。「連接地址」特別是欄目的連接地址，最佳的出現形式應該是http://你的域名/固定連接/。如今，連接的理想結構是以「/」結尾。「連接說明」，通常都是連接的關鍵詞或是關鍵詞相關說明文字，這點可能不少人容易忽視，建議仍是寫好連接說明，尤爲是作外部連接的時候，這麼作效果仍是很不錯的，對網站關鍵詞的搜索引擎排名頗有幫助。

　　注意：如何是一些單頁面網站用的是路由跳轉，能夠在a標籤裏href放全路徑，而後padding-left:-99999px;或者absolute 把這標籤扔到頁面的外邊不被看到就能夠，可是能夠被搜索到。

　　4）圖片img標籤的使用

　　<img src="圖片連接地址" alt="圖片說明" />

　　圖片說明比較重要，確定得加上，這樣就能夠方便搜索引擎知道這張的圖片的內容，方便搜索跟排名。

　　5）strong標籤的使用

　　不少人多這個標籤不感冒，以爲沒有什麼用，其實這標籤是很是重要的，標籤顧名思義是強調的意思，在裏邊放一些關鍵字將會起到很重要的效果。

　　6）文章底部版權信息的添加。

　　<div id="copyright">版權部分已經網站名稱等信息</div>

　　網站底部版權部分的權重愈來愈高了，在版權部分加上網站名稱和連接或是強調一些關鍵詞是頗有必要的。

3、對單頁面進行SEO優化

　　單頁面應用目前在市場如火如荼，三大框架angular，react，vue的使用愈來愈受歡迎，雖然使得開發效率提升了，可是也存在某些不足的地方，好比SEO問題，這個問題就須要去解決。

　　一、使用服務器端渲染（SSR）

　　vue針對SEO的問題已經出了官方SSR文檔來專門解決這個問題。https://ssr.vuejs.org/zh/。固然用服務器渲染對於前端後端來講都是個挑戰，不管從技術仍是寫法上都有很大的難度，對於先後端分離的項目而言，實現起來更加困難。有興趣能夠看下官方文檔，這裏將不作介紹，由於我也沒研究過SSR哈哈。下面將介紹另一種方式。

　　二、預渲染

　　如何你對少數的幾個重要的頁面進行SEO優化，預渲染將是個很是重要的操做。預渲染能夠在build時對指定的路由生產靜態HTML文件。使用 prerender-spa-plugin配置就能夠實現預渲染。

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // 編譯後的html須要存放的路徑
      path.join(__dirname, '../dist'),
      // 列出哪些路由須要預渲染
      [ '/', '/about', '/contact' ]
    )
  ]
}

渲染出來的目錄像這樣子：

　　三、動態添加meta信息

　　有時候咱們須要在應用添加一些meta信息來寫一些關鍵字已經描述等，這時候須要到插件vue-meta-info了，這個插件能夠動態設置meta的信息。

　　1.安裝

　　npm install vue-meta-info --save

　　2.全局使用vue-meta-info

　　在main.js裏

　　import Vue from 'vue'

　　import MetaInfo from 'vue-meta-info'

　　Vue.use(MetaInfo);

　　三、在組件內靜態使用

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

　　四、若是你的title或者meta是異步加載的，那麼你可能須要這樣使用：

<template>
  ...
</template>

<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

4、就給你們介紹到這裏，謝謝。