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

一、簡介

　　1、何為SEO？

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

　　2、目的

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

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

　　1、為什么要進行HTML優化？

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

　　2、哪方面可以有效的達到歐優化效果？

　　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>

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

三、對單頁面進行SEO優化

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

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

　　vue針對SEO的問題已經出了官方SSR文檔來專門解決這個問題。https://ssr.vuejs.org/zh/。當然用服務器渲染對於前端后端來說都是個挑戰，無論從技術還是寫法上都有很大的難度，對於前后端分離的項目而言，實現起來更加困難。有興趣可以看下官方文檔，這里將不做介紹，因為我也沒研究過SSR哈哈。下面將介紹另外一種方式。

　　2、預渲染

　　如何你對少數的幾個重要的頁面進行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' ]
    )
  ]
}

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

　　3、動態添加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);

　　3、在組件內靜態使用

<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>

　　4、如果你的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>

四、就給大家介紹到這里，謝謝。