⛑️
react-helmetでサイトにHeadタグをつける
React製のサイトにtitleやOGPをつけたい時に便利な、react-helmetをポートフォリオサイトに導入したので、その時のメモを残します。
react-helmetのインストール
他のライブラリと同じようにインストールします。
npm install --save react-helmet
<Helmet>タグで囲めば完成
一番シンプルですぐ使える方法は、importしてページコンポーネントにHelmetを記載する方法です。
GitHubに詳しい使い方が書いてあります。
import * as React from "react"
// ここでreact-helmetをimportします
import { Helmet } from "react-helmet"
import Layout from "../components/Layout"
import Content from "../components/Content"
const IndexPage = () => {
return (
<Layout>
//Helmetタグで囲み、通常のheadタグの中のように記載する
<Helmet>
<title>ページのタイトル</title>
<meta
name="description"
content="ポートフォリオサイトです。"
/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"></meta>
</Helmet>
<Content />
</Layout>
)
}
export default IndexPage
コンポーネント化
ページコンポーネントがいくつもある場合、いちいちHelmetをimportして同じ記述を書くのは非効率ですし、変更点があった場合のチェックの手間も生まれます。
そこで、Helmetの記述をコンポーネント化し、共通化します。また、ページのごとにtitleを切り分けたりするためにpropsも用います。
コンポーネントの作成
component配下の適当な場所（私はLayout.jsの兄弟にしました）に、コンポーネントを作成します。
最初はHelmet.jsという名前にしていたのですが、どうやら予約語だったようで使えませんでした。
// Head.js
import * as React from "react"
// react-helmetをimportするのはこのコンポーネントだけになります
import { Helmet } from "react-helmet"
import '../css/index.css'
// ページコンポーネントから、titleをpropしています
const Head = (props) => {
const {title} = props
return (
<Helmet>
<title>{title}</title>
<meta
name="description"
content="ポートフォリオサイトです。"
/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"></meta>
// OGPやフォントの記述も共通化するとGOOD!
{/* OGP ここから */}
<head prefix="og: http://ogp.me/ns#" />
<meta property="og:url" content="OGPに掲載するページのURL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="OGPに掲載するページタイトル" />
<meta property="og:description" content="OGPに掲載する説明文" />
<meta property="og:site_name" content="OGPに掲載するサイト名" />
<meta property="og:image" content="OGPに掲載する画像" />
{/* OGP ここまで */}
{/* Google Font ここから */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Montserrat:wght@700&display=swap" rel="stylesheet" />
{/* Google Font ここまで */}
</Helmet>
)
}
export default Head
ページコンポーネントから呼び出し
ページコンポーネントからHeadコンポーネントを呼び出します。
各ページコンポーネントはLayout.jsも呼び出しているので、HeadコンポーネントもLayoutに書けばいいのでは？と思われるかもしれませんが、このコンポーネント化の旨味はページタイトルなどページごとに変化する要素をpropできることなので、Layoutでは呼び出しません。
import * as React from "react"
import { graphql } from "gatsby"
import Layout from "../components/Layout"
// 先程のコンポーネントをimportしています
import Head from "../components/Head"
import Content from "../components/Content"
const IndexPage = () => {
return (
<Layout>
// ここでコンポーネントの呼び出し＆titleのprop
<Head title="TOP" />
<Content />
</Layout>
)
}
export default IndexPage
react-helmetを使えば、とても簡単にheadタグ要素を追加することができます。
SEO対策にもなりますし、OGPも記述すればSNSなどにURLを貼った時の見栄えも良くなります。
みなさんもぜひ使ってみてください！
Discussion
react-helmetで確かにheadタグ書けるんですが、これでSEO対策なるんですかね？
Reactってクライアントサイドレンダリングなので、クライアント側でHTMLを生成するので、googleのロボットがそもそもクロールするタイミングでば空っぽのHTMLをみてしまうとおもっています。