SEOの最適化プロセスの事前レンダリングを用いた分離プロジェクトの終了前と後

I.概要

　　近年では、開発パターンの変化は、新しいWebサイトは、独立したフロントと展開の後端部を使用して一般的な傾向です。しかし、検索エンジンのクローラがバックエンドからJSスクリプト負荷データを実行していない、サイトに含まれてエンジンを検索するために助長されていません。したがって、SEOの最適化を行うためには、主要な検索エンジンより良いインデックスWebサイトを可能にします。
　　これは、事前レンダリングは、プロジェクトの前の分離および後端のための操作手順のSEOの最適化についての話を行う使用して例えば（CentOS7.6 nginxの環境）私の個人的なブログになります。

個人のブログサイト展開アーキテクチャ図

　　上記のグラフからは、展開アーキテクチャサイトを見ることができるの下に示すように、データ・ページへの従来の検索エンジンはできませんクロール、ブラウザフロントエンドのレンダリングです。

SEOの最適化を行う前にホームクロール

二つは、事前レンダリングは、インストールと環境について説明します

　　問題にプリレンダリングされたSEOソリューションを使用して事前レンダリングは、大幅にWebアクセス速度を向上させることができます。

　　事前レンダリングは、Node.jsのに基づいてプログラムなので、事前レンダリングをインストールする前に、Node.jsの環境が必要です。また、ので、事前レンダリング自体はJSを実行しませんが、Googleのブラウザのページレンダリングの使用が行われているので、あなたはグーグルクロームをインストールする必要があります。

1、Googleのクロムを搭載

　　設定yumのソース、/電気ショック療法/ yum.repos.d /ディレクトリ上昇グーグル-chrome.repoファイルと次のように記述します。

[グーグル・クローム] 
名=グーグル・クロム
BASEURL =のhttp：//dl.google.com/linux/chrome/rpm/stable/$basearchは
= 1有効
gpgcheck = 1 
gpgkey = HTTPSを：//dl-ssl.google。 COM / linuxの/ linux_signing_key.pub

　　グーグル・クロム安定をインストール-yのyum installコマンドを実行します-nogpgcheck

　　インストール時のデフォルトのパスの後の/ opt / googleの/クロームです

　　変更は/ usr / binに/最後の行のexec -a "$ 0" "HERE $ /クローム" に変更し、ファイル・クロームグーグル "$ @" --user-データ-dirの--no-サンドボックス

　　（注：通常の状況下では、ルートユーザーをグーグル開始することができない、ここでルートユーザが起動を変更した後）

　　ファイルのチェックグーグル・クロームの/ usr / binディレクトリがあり、そうでない場合、あなたはリンクを作成する必要があり、コマンドを実行しLNは/ opt / googleの/クローム/グーグル・クロムは/ usr / binに/グーグル・クロム

　　（注：事前レンダリングのLinux環境のデフォルトのブラウザ、Googleの場所は/ usr / binに/グーグル・クロームで）

2、Node.jsの環境をインストールします

　　ダウンロードnodejsアドレスhttps://nodejs.org/en/download/

　　ダウンロードノードv12.16.1-linuxの-x64.tar.xz Linuxサーバアップロードファイルを/ usr / localディレクトリ

　　ノードv12.16.1-linuxの-x64.tar.xz -xvf解凍コマンドタール

　　編集フォルダ名MV /usr/local/node-v12.16.1-linux-x64は/ usr / local /

Nodejsは、インストールが成功したノードであったかどうかを確認します-v

　　インストール淘宝網の画像cnpm NPMインストール-G cnpm --registry = HTTPS：//registry.npm.taobao.org

　　/ usr / local / nodejs / binディレクトリの下の3つのファイルはは/ usr / local /ビン/ディレクトリへの接続を作成するために、作成などCNPMはLN -sは/ usr / local / nodejs / binに/ cnpmは/ usr / local /ビン接続しました/

3、インストール事前レンダリングサービス

　　ダウンロード事前レンダリングgitのクローンhttps://github.com/prerender/prerender.git

　　gitのサービスがインストールされていない場合は、手動のGithubからダウンロードして、/ mntにフォルダにアップロードして、現在のディレクトリに抽出することができます

　　依存関係をインストールcnpmインストール

　　サービスノードserver.jsを開始

　　（注：デーモンモードでサービスnohupをnodeserver.js> ../logs/prerender.log 2>＆1＆を開始するには、回避sshのダイアログウィンドウが閉じ、サービスの停止につながります）

三、SEOの最適化

1、nginxの設定

サーバー{ 
    80聞きます。
    サーバー名のblog.ccyws.cn。
    $ prerender_url 'http://127.0.0.1:3000'を設定します。
    位置/ { 
        セットの$のPreRender 0。
        もし（$ HTTP_USER_AGENT〜* "baiduspider | Googlebotの| 360Spider | Bingbot |そごうスパイダー|！ヤフーSlurpChina |！ヤフー読ま|のtwitterBOT | facebookexternalhit | rogerbot | embedly | Quoraのlinkpreview | showyoubot | outbrain | Pinterestの| slackbot | vkShare | W3C_Validator"） { 
               セット$の事前レンダリング1。
        } 
        （$事前レンダリング= 1）であれば{ 
               proxy_pass $ prerender_url。
               書き換え^ $ /のhttp：// $ホスト$ 1break;（*。）
        } 
         ルートを/ mnt /ブログ/ブログ。
       インデックスindex.htmlを。
       try_files $ URI $ uriの/ /index.htmlが。
    }
}

　再起動してnginxのnginxの-sリロード

2、SEOの最適化を検証します

カール--header「ユーザーエージェント：Bingbot」http://blog.ccyws.cn

SEO最適化されたクロールを家に行った後

事前レンダリング出力ログ

nginxの出力ログ

SEOの最適化プロセスの事前レンダリングを用いた分離プロジェクトの終了前と後

おすすめ