Reactヘルメットでタイトルとメタデータを変更する方法

提供：Dev Guides
移動先:案内、検索

序章

React Helmet は、ドキュメントのheadセクションを動的に管理するためのコンポーネントです。 一般的な使用例には、ドキュメントのtitle、description、およびmetaタグの設定が含まれます。

サーバーサイドレンダリングと組み合わせると、検索エンジンやソーシャルメディアクローラーによって読み取られるmetaタグを設定できます。 これにより、サーバーサイドレンダリングとReact Helmetは、SEO（検索エンジン最適化）とoEmbed、Facebook Open Graph、Twitterカードなどのソーシャルメディアデータの恩恵を受けることができるアプリを作成するための強力な組み合わせになります。

この記事では、ReactアプリケーションでのReactヘルメットの機能について説明します。

前提条件

この記事をフォローするには、次のものが必要です。

  • npmやyarnなどのパッケージマネージャーを使用したパッケージのインストールに精通していること。
  • Reactプロジェクトでのコンポーネントのインポートと使用に精通していること。

注：このチュートリアルでは、Reactプロジェクトを作成する手順やサーバー側のレンダリングを設定する手順については説明しません。 Reactアプリのサーバー側レンダリングを有効にする方法を参照してください。


このチュートリアルは、ノードv15.3.0、npm v6.14.9、react v17.0.1、およびreact-helmetv6.1.0で検証されました。

ステップ1—プロジェクトにReactヘルメットを追加する

まず、コンポーネントをプロジェクトにインストールします。 

npm install [email protected]

これで、ドキュメントの先頭に子として配置する必要のある要素をHelmetコンポーネントに追加することで、アプリでReactHelmetを使用できます。

src / App.js 

import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
      </Helmet>
    </div>
  );
}

export default App;

次に、ブラウザの開発者ツールを開き、head要素を調べます。 

Inspect Element<head>
  <!-- ... --->
  <title>App Title</title>
  <!-- ... -->
  <meta name="description" content="App Description" data-react-helmet="true">
  <meta name="theme-color" content="#008f68" data-react-helmet="true">
  <!-- ... --->
</head>

ReactHelmetによって追加されたtitleおよびmeta要素を観察します。

ステップ2—値を上書きする

ツリーのさらに下のコンポーネントは、上位レベルのHelmetコンポーネントに提供される値をオーバーライドできます。

たとえば、titleを変更するHelmetコンポーネントを含むChildComponentについて考えてみます。

src / ChildComponent.js 

import React from 'react';
import { Helmet } from 'react-helmet';

export default function ChildComponent() {
  return (
    <div>
      <Helmet>
        <title>Modified Title</title>
      </Helmet>
      <h1>Child Component</h1>
    </div>
  )
}

次に、Appコンポーネントに再度アクセスし、新しいChildComponentを含めます。

src / App.js 

import { Helmet } from 'react-helmet';

import ChildComponent from './ChildComponent';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
      </Helmet>
      <ChildComponent />
    </div>
  );
}

次に、ブラウザの開発者ツールを開き、head要素を調べます。 

Inspect Element<head>
  <!-- ... --->
  <title>Modified Title</title>
  <!-- ... -->
  <meta name="description" content="App Description" data-react-helmet="true">
  <meta name="theme-color" content="#008f68" data-react-helmet="true">
  <!-- ... --->
</head>

titleはApp TitleからModified Titleに変更されます。 descriptionおよびtheme-color値のmetaタグは、上書きされていないため、同じままです。

ステップ3—htmlおよびbodyの属性の処理

htmlおよびbody要素の属性を指定する必要がある場合は、それらを含めることもできます。

たとえば、darkテーマが適用されているbody要素について考えてみます。

src / App.js 

import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
        <body class="dark" />
      </Helmet>
    </div>
  );
}

次に、ブラウザの開発者ツールを開き、body要素を調べます。 

[seconday_label Inspect Element]
<body class="dark" data-react-helmet="class">
  <!-- ... -->
</body>

classはdarkに設定されます。

ステップ4—サーバーでのレンダリング

React Helmetの完全な利点は、アプリがサーバー上でレンダリングされ、ドキュメントの先頭にある正しい要素がアプリに提供されるときに明らかになります。

Reactサーバー側でレンダリングされたアプリのセットアップが整っていると仮定すると、ReactDOMServerのrenderToStringまたはrenderToStaticMarkupを呼び出した直後に、ReactHelmetのrenderStaticメソッドを呼び出してプロパティを持つインスタンスを取得できます。 Helmetデータの場合：

server / index.js 

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { Helmet } from 'react-helmet';

import App from '../src/App';

const PORT = process.env.PORT || 3006;
const app = express();

app.get('/*', (req, res) => {
  const appString = ReactDOMServer.renderToString(<App />);
  const helmet = Helmet.renderStatic();

  const html = `<!DOCTYPE html>
    <html lang="en">
      <head>
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
      </head>
      <body>
        <div id="root">
          ${ appString }
        </div>
      </body>
    </html>
  `

  res.send(html);
});

app.listen(PORT);

ヘルメットのrenderStaticを呼び出すと、titleやmetaなどのプロパティを持つインスタンスが返されます。 link、script、noscript、style、htmlAttributes、bodyAttributesなどの他のプロパティにもアクセスできます。 ]。

ステップ5—react-helmet-asyncと非同期でレンダリングする

ここでSpectrumから@mxstbrによってが提起されたように、React Helmetは同期的に動作するため、特にストリーミングでサーバーに問題が発生する可能性があります。

Reactヘルメットのフォークが助けになります：react-helmet-async。 

npm install [email protected]

APIは同じですが、HelmetProviderがクライアントとサーバーの両方でコンポーネントツリーをラップする必要がある点が異なります。 

import Helmet, { HelmetProvider } from 'react-helmet-async';

function App() {
  return (
    <HelmetProvider>
      <div className="App">
        <Helmet>
          <title>App Title</title>
          <meta name="description" content="App Description" />
          <meta name="theme-color" content="#008f68" />
        </Helmet>
      </div>
    /HelmetProvider>
  );
}

React Helmet Asyncの目的と使用法の詳細については、New YorkTimesOpenブログの発表の投稿を参照してください。

結論

この記事では、ReactアプリケーションでのReactヘルメットの機能について説明しました。 特に、SEOとソーシャルメディアの統合を促進するためのサーバー側のレンダリングとどのようにうまく機能するか。

Reactの詳細については、 React.js シリーズのコーディング方法をご覧になるか、Reactトピックページで演習やプログラミングプロジェクトを確認してください。

「https://www.finddevguides.com/index.php?title=Reactヘルメットでタイトルとメタデータを変更する方法&oldid=100448」から取得
Powered by MediaWiki