はじめに

Gatsbyのチュートリアルやサンプルコードでたびたび目にするreact-helmetについて調べました。

react-helmetとは

headタグの管理をするコンポーネントです。

It’s dead simple

とあるように、死ぬほど簡単なようです。

基本的な書き方

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

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

propsで渡すこともできる

<Helmet title={`${post.title} | ${siteTitle}`} />

渡せるprops

base
bodyAttributes
htmlAttributes
link
meta
noscript
script
style
title

ここまで細かく設定するならchildrenで定義していくほうが楽でしょう。

導入を見送ったパターン

調べてみると、react-helmetの導入を見送るべきパターンもあるようです。
導入を見送った理由は以下のように書かれていました。

meta titleしか更新されない（description, keywordsは更新ではなく、追加されてしまう＜2つになってしまう＞）

Reactコンポーネントのため、更新タイミングを制御できない（Google Analyticsなどの計測ツールへ値を送るタイミングでタイトルが変わっていなかった）

おわりに

要件次第では対応できないこともありますが、Gatsbyのような静的サイトを作成する場合は必須のコンポーネントです。
metaタグを動的に変更したいケースは注意が必要です。

2019/03/06

react-helmetについて