metaタグを変えるためにreact-helmetを導入してみたけれど結局ES2015で実装した話

フロントエンドエンジニアの岡田です。
先日、Reactでmetaタグを変える必要があったので、react-helmetを導入してみました。ですが、うまくいかないケースがあり、結局はES2015で書き換えました。

今回は、react-helmet導入と、最終的なES2015のコードをご紹介します。

react-helmetとは
react-helmetでのmetaタグ設定方法
導入を見送った理由
ES2015でのmetaタグ設定コード
終わりに

react-helmetとは

react-helmetとは、Reactでmetaタグを変更するときに便利なReactコンポーネントです。React metaタグで検索したら日本語の情報がこれだけだったので入れてみました。 github.com

react-helmetでのmetaタグ設定方法

npm installします。

npm install --save react-helmet

次に、以下のようにコンポーネントを定義することで、metaタグを設定・変更できます。

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

const PageHeader = props => {
  return (
    <div className="application">
      <Helmet>
        <title>
          ここでタイトルを設定します
        </title>
      </Helmet>
    </div>
  );
};

 export default PageHeader;

あとは親のコンポーネントで、↑のコンポーネントを読み込むだけで反映されました。

導入を見送った理由

react-helmetは、簡単に導入できましたが、この方法では今回の要件に対応できませんでした。

meta titleしか更新されない（description, keywordsは更新ではなく、追加されてしまう＜2つになってしまう＞）
Reactコンポーネントのため、更新タイミングを制御できない（Google Analyticsなどの計測ツールへ値を送るタイミングでタイトルが変わっていなかった）

今回のページは、完全なSPAではなく、ページの一部分のみReactで実装しています。特に理由1のmeta titleしか更新されない件については、ページの一部分のみReactで実装しているという特殊な環境のせいで起きた現象と思われます。

そのため、結局ES2015で実装しました。

ES2015でのmetaタグ設定コード

const title = 'metaのタイトル';
const description = 'metaの説明文;
const keywords = 'metaのキーワード';

// title
document.title = title;

// title以外のmeta
const headData = document.head.children;

for (let i = 0; i < headData.length; i++) {
    const nameVal = headData[i].getAttribute('name');
    if (nameVal !== null) {
    if (nameVal.indexOf('keywords') != -1) {
        headData[i].setAttribute('content', keywords);
    }
    if (nameVal.indexOf('description') != -1) {
        headData[i].setAttribute('content', description);
    }
    // OGP(twitter)の設定
    if (nameVal.indexOf('twitter:title') != -1) {
        headData[i].setAttribute('content', title);
    }
    if (nameVal.indexOf('twitter:description') != -1) {
        headData[i].setAttribute('content', description);
    }
    }
}

こちらのコードは以下のサイトを参考にさせていただきました。
JavaScriptでOGPを書き換える | cly7796.net