react-helmetについて
はじめに
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タグを動的に変更したいケースは注意が必要です。