快速瞭解SEO，學會SEO優化和Nuxt.js框架

SEO概述

SEO（Search Engine Optimization，搜索引擎優化）是一種利用搜索引擎的排名規則，來提升目標網站在天然搜索結果中的收錄數量和排名的優化行爲，其目的是從搜索引擎中得到更多的免費流量，以及更好的展示形象。簡單的說，搜索引擎優化是提升天然搜索排名得到流量，且提供給用戶有價值的信息。SEO分爲站長可控制的網站內部優化，以及網站自己之外的外部優化兩個部分，這與SEM（搜索引擎營銷）有必定的區別。html

搜索引擎的工做原理

1) 信息採集模塊

信息採集是一個能夠瀏覽網頁的程序，被形容爲「網絡爬蟲」。它首先打開一個網頁，而後把該網頁的連接做爲瀏覽的起始地址，把被連接的網頁獲取過來，抽取網頁中出現的連接，並經過必定算法決定下一步要訪問哪些連接。同時，信息採集器將已經訪問過的URL存儲到本身的網頁列表並打上已搜索的標記。自動標引程序檢查該網頁併爲他建立一條索引記錄，而後將該記錄加入到整個查詢表中。信息收集器再以該網頁到超連接爲起點繼續重複這一訪問過程直至結束。前端

2）收錄建庫預處理

蜘蛛抓取的是網頁的內容，那麼要想讓用戶快速的經過關鍵詞搜索到這個網頁，就必須對網頁作關鍵詞的索引，從而提高查詢效率，簡單說就是，把網頁的每一個關鍵詞提取出來，並針對這些關鍵詞在網頁中的出現頻率，位置，特殊標記等諸多因素，給予不一樣的權值標定，而後，存儲到索引庫中。vue

3）分析搜索內容對結果排序

第一步，會檢查最近時間有沒有人搜索過一樣的關鍵詞，若是存在這樣的緩存，最快的處理是將這塊緩存提供給你，這樣查詢效率最高，對後端負載壓力最低。
第二步，發現這個輸入查詢最近沒有搜索，或者有其餘條件的緣由必須更新結果，那麼會將這個用戶輸入的詞進行分詞，若是不止一個關鍵詞，或者是一句話的狀況下，應答程序會又一次分詞，將搜索的查詢拆成幾個不一樣的關鍵詞。
第三步，將切分後的關鍵詞分發到查詢系統中，查詢系統會去索引庫查詢，索引庫是個龐大的分佈式系統，先分析這個關鍵詞屬於哪一塊哪一臺服務器。
第四步，不一樣關鍵詞的查詢結果(只是按權值排序的部分頂部結果，絕對不是所有結果)，基於權值倒序，會再彙總在一塊兒，而後把共同命中的部分反饋回來，並作最後的權值排序。java

搜索引擎收錄

查看有多少收錄的內容
在搜索網站的輸入框中收入 site:你要知道的網址
例如 site:www.buka.tvnode

搜索引擎的營銷策略

在概況中有提到SEM（搜索引擎營銷），什麼是SEMios

SEM就是根據用戶使用搜索引擎的方式利用用戶檢索信息的機會盡量將營銷信息傳遞給目標用戶。簡單來講，搜索引擎營銷就是基於搜索引擎平臺的網絡營銷，利用人們對搜索引擎的依賴和使用習慣，在人們檢索信息的時候將信息傳遞給目標用戶。它是一種新的網絡營銷形式。以下圖帶有廣告的搜索內容就是經過SEM來提高本身的排名算法

總結：短時間營銷-SEM競價推廣長期發展-SEO優化
若是企業要求再近期內取得效果，而且是季節性短時間營銷，建議使用競價推廣；
若是長期發展，SEO是比較合理的選擇，提升自身網站的競爭力纔是網絡營銷的根本
npm

SEO查詢工具

Chinaz站長工具：seo.chinaz.com 愛站網站長工具：www.aizhan.com/json

搜索引擎官方平臺工具

zhanzhang.XX.com/axios

前端SEO規範

1) 網站結構佈局優化：儘可能簡單，提倡扁平化結構

1.1) 控制首頁連接數量

網站首頁是權重最高的地方，若是首頁連接太少，沒有「橋」，「蜘蛛」不能繼續往下爬到內頁，直接影響網站收錄數量。可是首頁連接也不能太多，一旦太多，沒有實質性的連接，很容易影響用戶體驗，也會下降網站首頁的權重，收錄效果也很差

1.2) 扁平化的目錄層次

儘可能讓「蜘蛛」只要跳轉3次，就能到達網站內的任何一個內頁。

1.3) 導航優化

導航應該儘可能採用文字方式，也能夠搭配圖片導航，可是圖片代碼必定要進行優化，<img>標籤必須添加「alt」和「title」屬性，告訴搜索引擎導航的定位，作到即便圖片未能正常顯示時，用戶也能看到提示文字。

1.4) 網站的結構佈局

頁面頭部：logo及主導航，以及用戶的信息。頁面主體：左邊正文，包括麪包屑導航及正文；右邊放熱門文章及相關文章，好處：留住訪客，讓訪客多停留，對「蜘蛛」而言，這些文章屬於相關連接，加強了頁面相關性，也能加強頁面的權重。頁面底部：版權信息和友情連接。

2)網頁代碼優化

2.1) 合理的設計title、description和keywords

<title>標題：只強調重點便可，儘可能把重要的關鍵詞放在前面，關鍵詞不要重複出現，儘可能作到每一個頁面的<title>標題中不要設置相同的內容。 <meta keywords>標籤：關鍵詞，列舉出幾個頁面的重要關鍵字便可，切記過度堆砌。 <meta description>標籤：網頁描述，須要高度歸納網頁內容，切記不能太長，過度堆砌關鍵詞，每一個頁面也要有所不一樣。

2.2) 語義化書寫HTML代碼，合理使用語義化標籤

2.3) 關於標籤屬性等

圖片超連接等加‘title’‘alt’等屬性，訪問外部連接，連接到其餘網站的，則須要加上 el="nofollow" 屬性, 告訴「蜘蛛」不要爬。

2.4）正文標題相關

正文標題要用<h1>標籤：h1標籤自帶權重「蜘蛛」認爲它最重要，一個頁面有且最多隻能有一個H1標籤，放在該頁面最重要的標題上面，如首頁的logo上能夠加H1標籤。副標題用<h2>標籤, 而其它地方不該該隨便亂用 h 標題標籤

2.5）強調標籤

<strong>、<em>標籤：須要強調時使用。<strong>標籤在搜索引擎中可以獲得高度的重視，它能突出關鍵詞，表現重要的內容，<em>標籤強調效果僅次於<strong>標籤；<b>、<i>標籤：只是用於顯示效果時使用，在SEO中不會起任何效果。

快速學會 Nuxt.js

NUXT.js

官方介紹：從頭搭建一個服務端渲染的應用是至關複雜的。幸運的是，咱們有一個優秀的社區項目Nuxt.js這讓一切變得很是簡單。Nuxt是一個基於Vue生態的更高層的框架，爲開發服務端渲染的Vue應用提供了極其便利的開發體驗。更酷的是，你甚至能夠用它來作爲靜態站生成器。

簡單的理解：代替瀏覽器的工做,籠統理解就是在created時的請求數據和頁面渲染，第二點是看成靜態文件服務器，把渲染好的頁面返回給用戶。

優點：

純靜態文件，訪問速度快
對比SSR,不涉及服務器負載方面問題
靜態網頁不宜遭到黑客工具，安全性高

圖中說到服務器端渲染，什麼是服務端渲染和客戶端渲染

服務端渲染和客戶端渲染

瀏覽器（客戶端）經過AJAX向服務端（java servlet）發送http請求數據接口
服務端將獲取的接口數據封裝成JSON，響應給瀏覽器
瀏覽器拿到JSON就進行渲染html頁面，生成DOM元素，而後將頁面展現給用戶

瞭解什麼是服務端渲染和客戶端渲染以後，講一下NUXT.js的工做原理

Nuxt.js工做原理

1.瀏覽器(客戶端)發送http請求到Node.js服務端。
2.部署在Node.js的應用Nuxt.js接收到瀏覽器請求，它會去請求後臺服務端。
3.後臺接口服務端會響應JSON數據，Nuxt.js獲取數據後進行服務端渲染成html。
4.而後Nuxt.js將html頁面響應給瀏覽器
5.瀏覽器直接將接收到html頁面進行展現

看服務端渲染和Nuxt.js服務端渲染作對比以後應該很好理解

簡單介紹讓你們快速瞭解Nuxt.js 接下來：
小二！上菜！

1.首先就是安裝NUXT 這個簡單，你們按照官網的操做步驟就能夠了。

參考連接 www.nuxtjs.cn/guide/insta…

2.目錄結構

| .nuxt
| assets //資源目錄 組織爲編譯的靜態資源 你們都懂
     | image.png
| components // 組織 Vue.js 組件，NUXT不會擴展加強該目錄下的組件，這意味着組件不能使用 asyncData 方法
| layout // 佈局目錄 若是沒有額外配置，目錄不能重命名--不建議更名
| middleware // 用於存放應用的中間件
| node_modules // 懂吧~
| pages // 頁面目錄用於組織應用路由及視圖，NUXT會讀取該目錄下全部.vue文件並自動生成路由（路由文件在 .nuxt/router.js）
     | index.vue
| plugins // 插件目錄 用於組織那些須要在跟vue.js應用，實例化以前須要運行的Javascript插件
| static // 用於存放應用的靜態文件，此類文件不會被NUXT.js調用Webpack 進行構建編譯處理。服務器啓動的時候，該目錄下的文件會映射至應用的根路徑  `/`  下。例如 /static/root.txt 映射至 /root.txt

| store // Nuxt.js 框架集成了 [Vuex 狀態樹] 的相關功能配置，在  `store`  目錄下建立一個  `index.js`  文件可激活這些配置。 新建一個index.js 這事就算妥了
| nuxt.config.js // 文件用於組織 Nuxt.js 應用的個性化配置，以便覆蓋默認配置 不要gai'ming'zi
| package.json // 用於描述應用的依賴關係和對外暴露的腳本接口

複製代碼

3.接下來直接和你們說一下 NUXT開發中須要注意哪些。而後你們以後就能夠直接上手，梭哈！

靜態資源的引入和路由

//引入靜態資源 和 跳轉路由
<template>
  <!--咱們不須要去配置 @去指向根目錄  NUXT中能夠直接使用 -->
  <img src="~/assets/image.png" />
  <!--NUXT中咱們不須要去寫路由表  👇 '/'指的是 page/index.vue 其它語法和平常無恙  -->
  <nuxt-link :to="{name:'userPage',query:{id:'111'}}">我的中心</nuxt-link>
</template>
複製代碼

asyncData

Nuxt.js擴展了Vue.js 增長了asyncData的方法，這樣咱們能夠在渲染組件以前異步獲取數據，asyncData方法會在組件（只限於頁面組件）每次加載以前被調用，它能夠在服務端或路由更新以前被調用，在這個方法被調用的時候，第一個參數context被設定爲當前頁的上下文對象。

async asyncData({ params }){  // params 就是傳進來的值
//asyncData 函數去執行咱們的異步操做 當咱們獲取到接口返回的內容是 此時咱們Vue尚未實例化 因此this獲取不到  咱們經過返回 方法 去獲取  所以標籤內若是須要展現內容  {{info.XXX}}
	const data = await $axios.$get('/api/user')
	return {data}
}
複製代碼

@nuxtjs/axios

咱們在asyncData中調用接口，在Nuxt.js官方提供了@nuxtjs/axios模塊，此模塊還包含了axios、@nuxtjs/proxy（解決異步,進行代理轉發）模塊。

// 1.安裝@nuxtjs/axios：
npm install @nuxtjs/axios
// 2.在nuxt.config.js中配置axios
module.exports={
	modules:['@nuxtjs/axios']
}
複製代碼

中間件

中間件容許您定義一個自定義函數運行在一個頁面或一組頁面渲染以前。可用於權限判斷，有權限纔可訪問對應頁面

中間件應放置在middleware/ 目錄。文件名的名稱將成爲中間件名稱（middleware/auth.js將成爲auth中間件）

//建立權限中間件
//在 middleware/ 下建立 auth.js 文件，其中auth就是中間件的名稱。
//一箇中間件接收content做爲第一個參數
export default({ store, redirect }) => {
	if(/* 沒有token */){
		return redirect('/')
	}
}
複製代碼