ReactでのSEO処理

1.序曲

ほとんどの開発者にとって
SPAの欠点を聞くとSEOがいっぱい
SEOどうしたの?
🤔🤔🤔

2. SEO

検索エンジンの最適化
これは、ウェブサイトが検索結果によりよく露出できるようにするためです.
GoogleやNAVERのような検索エンジンは、独自に作成した検索エンジンを利用して
多くのページでは、検索結果に近いページが一番上に一致します.

3. Rendering

これは黒いロボットで収集されたツールです.
Webブラウザベースの分析(レンダリング)があります.

典型的なWebブラウザの表示方法 Client-side rendering(CSR) Server side rendering(SSR)

コアは、検索エンジンがレンダリングされたWebページを解析するときに
JavaScriptを使用してHTMLを動的に処理しない場合は、
まず静的HTMLのコンテンツを収集してインデックス化する

3-1. CSR

多くのSPAフレームワーク(reactやVueなど)はCSRに対応している.
サーバが起動すると、インデックスは1つしかありません.htmlで
app.サーバにjsを要求し、必要な情報を提供します.jsにインストールし、クライアントに再送信します.
以降の変更が必要になるたびに、アプリケーション.jsを再要求して受信する方法です
ラッキーなことに?
Googleの検索ロボットはJavaScriptを解釈できます.
SEOは問題なく実行できます

Pre-rendering 海外での事前注文、前払いなど。 貼り付け前のレンダリングでよく使用されます。 プリレンダリングと解釈すれば簡単です。

CSRベースの
ライブラリは既に存在します

🌱 設定 npm install react-snap --dev or yarn add react-snap --dev

インストールが完了したらindex.jsの既存のレンダリングコードを少量必要とします
修正すれば適用可能

📁 index.js import React from 'react'; import App from './App'; import { hydrate, render } from "react-dom"; const rootElement = document.getElementById("root"); if (rootElement.hasChildNodes()) { hydrate(<App />, rootElement); } else { render(<App />, rootElement); }

設定が完了したらパッケージ化します.jsonを使用してpostbuildオプションを指定します.
buildになったらreact-snapを実行できます

📁 package.json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "postbuild": "react-snap" }, "reactSnap": { "include": ["/", "/about"] },

構築が完了すると、includeで指定したパスに従ってスクロールします.htmlファイルの生成

3-2. SSR

サーバ側レンダリング(SSR)とCSRのレンダリング方法は異なります
反応自体が難しいので、Nextを使ってSSRを行います

4.整理

✔SPAはなぜSEOに脆弱なのか
✔Webブラウザのレンダリング方法を理解する
✔react-snapの使い方を知りました