SPA 網站 SEO 初級優化指南（MVVM）
百度 Baidu
百度搜索資源平臺 https://ziyuan.baidu.com/?cas...
鏈接提交地址 https://ziyuan.baidu.com/link...
百度爬蟲 UA
- Mozilla/5.0 (Linux;u;Android 4.2.2;zh-cn;) AppleWebKit/534.46 (KHTML,like Gecko) Version/5.1 Mobile Safari/10600.6.3 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s...
- Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s...）
谷歌 Google
Google Search Console https://search.google.com/sea...
谷歌爬蟲 UA
- Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
SEO 優化重點
（一）三個基本注意點
- 信息架構
信息架構要明晰，這個對 SEO 也非常重要，包括網站扁平化設計，友好的 URL 設計，標題書寫，頁面相關度信息聚合和融合，這也是影響用戶體驗的一大部分。
- 網站主題
爲網站確定一個主題（核心關鍵詞），一旦確定，那麼全站都圍繞這個關鍵詞進行擴展和相關性來做
- 外鏈和友鏈權重
網站外鏈就是在別的網站導入自己網站的鏈接，高質量高 PR 的外鏈能迅速提高自身網站的權重。友鏈則是自己的網站包含了其他網站的鏈接，效果與外鏈類似。
（二）利用好 Meta 信息標籤
Meta 標籤用於給搜索引擎提供關於網頁的信息，這些信息對於訪問者而言是不可見的。
參考淘寶網的做法
<header>
<title>淘寶網 - 淘！我喜歡</title>
<meta
name="description"
content="淘寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨後付款)等安全交易保障服務，並由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！"
/>
<meta
name="keyword"
content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪"
/>
...
</header>- Title
title 網站標題 - Meta - Description
description 給搜索引擎提供了關於這個網頁的簡短的描述 - Meta - Keywords
keywords 關於網頁內容的幾個關鍵詞 -
Meta - Robots
robots 管理着搜索引擎是否可以進入網頁如下面一段代碼，禁止搜索引擎獲取網頁，並且阻止其進入鏈接。
<meta name="”robots”" content="”noindex," nofollow” />
SPA 網站 SEO 優化指南
（一） 三種解決方案：
- 服務器端渲染，較爲複雜
- 頁面緩存服務，prerender.io，涉及收費第三方服務，或者中間層啓用渲染
- 靜態頁替換，phantom.js、puppeteer 或者瀏覽器 Copy outerHTML 就能完成，需要 nginx 配合
（二）如何判斷是爬蟲訪問還是瀏覽器訪問
爬蟲訪問時，會使用特殊的 user agent，以百度蜘蛛的 UA 爲例，它會使用“Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s...）”這樣的UA，所以我們可以判斷 UA 中含有“Baiduspider”字樣則意味着是百度蜘蛛來訪問了
（三）如何在百度爬蟲來訪問時返回靜態頁
先把靜態頁放置到網站的 /assets/static/ 下，配置 nginx 的配置文件 nginx.conf:
location / {
root C:\projects\bzbclub-dist;
index index.html index.htm;
if ( $http_user_agent ~* "Baiduspider"){
rewrite ^/index.html$ /assets/static/index.html last;
}
}
保存配置文件後要使用 nginx -s reload 重新加載網站，然後使用 curl 命令的“-A”參數模擬百度蜘蛛訪問首頁：
curl -A "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s...）" http://localhost:17082 > z:tempbzbclub.html
打開 z:tempbzbclub.html 確認是否已經返回了靜態頁的內容。
（四）如何生成靜態頁並優化
-
Phantom.js
var fs = require("fs"); var page = require("webpage").create(); phantom.outputEncoding = "utf-8"; //指定編碼方式 page.open("http://localhost:17082", function(status) { if (status === "success") { fs.write("z:\\temp\\index.html", page.content, "w"); } else { console.log("網頁加載失敗"); } phantom.exit(0); //退出系統 });將此腳本保存爲“phantom-static-page.js”，在命令行執行此腳本：
phantomjs phantom-static-page.js -
Puppeteer
const fs = require("fs"); const puppeteer = require("puppeteer"); (async () => { const browser = await puppeteer.launch({ headless: false // executablePath: "C:/Program Files (x86)/Google/Chrome" }); const page = await browser.newPage(); page.setViewport({ width: 1920, height: 1800 }); await page.goto("http://localhost:3333"); await page.screenshot({ path: "example.png" }); const content = await page.content(); fs.writeFileSync("./index.html", content); // await page.close(); // await browser.close(); })();將此腳本保存爲“pupp-static-page.js”，在命令行執行此腳本：
node pupp-static-page.js -
從瀏覽器獲取靜態頁內容（推薦）
與前兩者相比，看上去沒那麼極客，但是非常的簡單好用。- 首先需要新建一個
static.html - 然後在瀏覽器打開需要生成靜態頁的頁面
- 按
F12打開 DevTool - 鼠標選中
<html>標籤，右鍵 Copy > Copy OuterHTML - 將內容粘貼至
static.html保存即可
- 首先需要新建一個
-
靜態頁壓縮優化
- 用編輯器打開
static.html，刪除掉所有的<script></script>以及其中的內容 - 瀏覽器打開靜態頁，按
F12打開 DevTool 確保沒有報錯 - 體積大小優化的程序視頁面的複雜度而定，一般能壓縮到原有大小的十分之一
- 用編輯器打開
參考文章鏈接
《Meta 標籤與搜索引擎優化》
《SEO 網站優化的步驟和技巧有哪些？》
《Angular2 網站 SEO 攻略》