⛑️

react-helmetでサイトにHeadタグをつける

2021/10/23に公開約3,400字1件のコメント

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をみてしまうとおもっています。

ログインするとコメントできます