使用Google抓取方式，測試React驅動的網站SEO

玄學醬發表於2017-10-18

原文網址 : https://flycode.co/archives/183953

GoReact網站

本文講的是使用 Google 抓取方式，測試 React 驅動的網站 SEO，

我最近進行了一項測試，它有關客戶端渲染的網站是否能避免被搜尋引擎的機器人爬取內容。就如我此文所述，React 並不會破壞搜尋引擎的索引。

現在，我開始實施我的下一個步驟。為了瞭解 Google 到底能爬取和索引哪些內容，我建立了一個 React 的沙盒專案。

建立一個小型的網頁應用程式

我的目標只是建立一個單純的 React 應用程式，用最少的時間配置 Babel, webpack 和其他一些工具。之後，我會盡可能快地把這個應用程式部署到公網環境。

我也想能在幾秒內就把更新部署到生產環境中。

考慮到要實現這些目標，理想的工具是 create-react-app 和 GitHub Pages。

有了 create-react-app，我能在 30 分鐘內建立一個小型的 React 應用程式。只需要輸入這些指令:

create-react-app seo-sandbox
cd seo-sandbox/
npm start

我更改了預設的文字和 logo，修改了一些格式，然後瞧瞧看 —— 一個 100% 由客戶端程式渲染的網頁完成了，讓Googlebot 好好琢磨一下。

你可以訪問我 Github 上的專案工程瞭解更多。

部署到 `GitHub Pages`

create-react-app 非常有用。簡直和我心有靈犀。在我執行了 npm run build 指令後，它就識別出我準備計劃在 GitHub Pages上釋出我的專案，並且告訴我應該這麼做:

這是我託管在 GitHub Pages 上的 SEO 沙盒

我把這個網站的名字設定為 "Argelpargel"，因為這個詞從未被 Google 收錄過。

配置 `Google` 搜尋終端

Google 為網站所有者提供了一份免費的套件工具叫做 Google 搜尋終端，它可以被用於測試他們的網站。

為了建立這個服務，我為這個網站增加一個稱為 property 的東西:

為了證明我就是這個網站的所有者，我不得不向 Google 上傳一個特別的檔案來找到這個網站。多虧了這個有用的方法 npm rum deploy，讓我在很快的時間內就完成了。

`Google` 眼中我們網站長什麼樣

環境配置完畢以後，我現在能使用 "Fetch as Google" 工具，用 Googlebot 的方式看看我們的 SEO 沙盒頁面:

當我點選 "Fetch and Render" 按鈕，就能檢查到由 React 驅動的頁面上哪一部分能真正被 Googlebot 檢索到:

目前我所發現的

發現 #1: `Googlebot` 以非同步載入的形式來閱讀內容

我想最先測試的是 Googlebot 會不會對非同步渲染的內容進行檢索或者爬取。

在頁面被載入完畢後，我的 React 應用程式為資料傳送了一個 Ajax 請求，並用這些資料更新了部分頁面上的內容。

為了模擬這個過程，我為應用程式的元件增加了一個構造器，它通過使用一個 window.setTimeout 方法為元件設定狀態。

constructor(props) {
    super(props);
    this.state = {
        choMessage: null,
        faq1: null,
        faq2: null,
        faq3: null
    };
    window.setTimeout(() => this.setState(Object.assign(this.state, {
        choMessage: `yada yada`
    })), 10);
    window.setTimeout(() => this.setState(Object.assign(this.state, {
        faq1: `bla bla`
    })), 100);
    window.setTimeout(() => this.setState(Object.assign(this.state, {
        faq2: `shoo be doo`
    })), 1000);
    window.setTimeout(() => this.setState(Object.assign(this.state, {
        faq3: `yacketiyack`
    })), 10000);
}

→ 原始碼已提交到 GitHub

我使用了 4 種超時時間，10 毫秒， 100 毫秒， 1 秒和 10 秒。

結果表明，Googlebot 只會在 10 秒的超時時間上失敗。但是其他 3 個超時時間都成功了，並且對應的文字塊都會顯示在"Fetch as Google" 窗體內。