【前端芝士樹】SPA 網站 SEO 初級優化指南（MVVM）

時間 2019-11-10

標籤前端芝士樹 spa 網站 seo 初級優化指南 mvvm 欄目網站開發简体版

原文原文鏈接

SPA 網站 SEO 初級優化指南（MVVM）

百度 Baidu

百度搜索資源平臺 https://ziyuan.baidu.com/?cas...html

連接提交地址 https://ziyuan.baidu.com/link...html5

百度爬蟲 UAnode

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

谷歌爬蟲 UAweb

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 設計，標題書寫，頁面相關度信息聚合和融合，這也是影響用戶體驗的一大部分。segmentfault
網站主題
爲網站肯定一個主題（核心關鍵詞），一旦肯定，那麼全站都圍繞這個關鍵詞進行擴展和相關性來作瀏覽器
外鏈和友鏈權重
網站外鏈就是在別的網站導入本身網站的連接，高質量高 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 確保沒有報錯
- 體積大小優化的程序視頁面的複雜度而定，通常能壓縮到原有大小的十分之一