Reactヘルメット：Reactサイトの頭を習得

あなたのウェブサイトの セクションは、しばしば見落とされがちですが、SEO、ソーシャルメディア統合、およびStyleSheetsやAnalyticsライブラリなどの重要な資産をロードするために重要です。 これを反応アプリケーションで動的に管理することは困難な場合があります。このチュートリアルでは、Reactヘルメットを使用して コンテンツを効率的に処理する方法を示しています。

document.title およびメタタグ内の componentdidmount 内のメタタグを直接操作することは、面倒でエラーが発生しやすいです。 Reactヘルメットは合理化されたソリューションを提供します。 ただし、特にSEOの場合、その力を完全に活用するには（検索エンジンはクライアント側の コンテンツに苦労しています）、SSRは不可欠です。 したがって、組み込みのSSRを提供する反応ベースの静的サイトジェネレーターであるGatsbyを使用します。

ギャツビーと反応ヘルメットをセットアップ

1. インストールgatsby cli：

   npm i -g gatsby -cli

   npm i -g gatsby-cli

2. 新しいギャツビープロジェクトを作成：

   gatsby new my-gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

   npm i -g gatsby-cli

3. インストール反応ヘルメットとギャツビープラグイン：

   npm i -Save React-HelmetGatsby-Plugin-React-Helmet

   npm i -g gatsby-cli

4. configure gatsby：プラグインを gatsby-config.js ：に追加します

   module.exports = { プラグイン：[`gatsby-plugin-reac helmet`]、 };

   npm i -g gatsby-cli

動的レイアウトコンポーネントの構築

components/layout.js file：を作成する

インポート「React」からのImport React; 「React-Helmet」からヘルメットをインポートします。 "gatsby"から{link}をインポートします。 インポート "../css/main.css"; エクスポートデフォルト（{pagemeta、children}）=>（

import React from "react";
import Helmet from "react-helmet";
import { Link } from "gatsby";
import "../css/main.css";

export default ({ pageMeta, children }) => (
  
    
      
      
      
      
      
      
       {/* Add language support */}
      

{/* Add custom class */} {/* Example structured data (JSON-LD) */} > ); create

src/css/main.css ：

。スリック{ 背景色：黄色。 色：ライムグリーン; Font-Family：「Comic Sans MS」、筆記体、sans-serif; }

npm i -g gatsby-cli

ページを作成

update

src/pages/index.js ：

インポート「React」からのImport React; "../components/layout"からレイアウトをインポートします。 export default（）=>（

import React from "react";
import Layout from "../components/layout";

export default () => (
  
    
Welcome to Cars4All!
  
);

create

src/pages/cars.js ：

インポート「React」からのImport React; "../components/layout"からレイアウトをインポートします。 export default（）=>（

import React from "react";
import Layout from "../components/layout";

export default () => (
  
    
Our Cars
    {/* ... car listings ... */}
  
);

ビルディングアンドサービング

run

gatsby build and gatsbyはにssrで結果を確認するために奉仕します。ソースコードを検査して、Reactヘルメットのコンテンツが正しくレンダリングされていることを確認します。 lang 属性とカスタムCSSクラスは、予想どおりに適用されます。 プレースホルダー構造データを実際のデータに置き換えることを忘れないでください。 このアプローチにより、Reactアプリケーションのメタデータが検索エンジンとソーシャルメディアクローラーによって適切にインデックス化されます。