React metaタグの変更 - Elsaの技術日記(徒然なるままに)

github pageにて作成したアプリを公開しているのですが、、、
metaタグを変更しておりませんでした。。。
やってしまいました😜

アプリ作成にあたって基本は抑えておけという話です。
反省😢
基本から勉強しなおした方がいいんでしょうか？？

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

新品価格
￥2,237から
(2020/10/29 22:22時点)

っということでこちらのアプリのmetaデータを変更してみました！！
https://elsammit.github.io/wordbookApp/

変更にあたって、方法を調べてみましたのでまとめておきます！！
方法は2つです！！

■方法1
■方法2
■最後に

■方法1

react-document-metaを利用する方法です！！

まずreact-document-metaをインストールします。

npm install --save react-document-meta

もしくは

yarn add install react-document-meta

そして、react-document-metaを用いたmetaタグの作成ですが、このように利用すればOKです！！

import DocumentMeta from 'react-document-meta';

・・・

      render() {
        const meta = {
            title: 'Elsammitの英単語アプリ作成してみた',
            description: 'React初心者が英単語アプリを作ってみました。選択式でクイズを答えるだけ！！ゲーム感覚で単語が覚えられるよ',
            canonical: 'http://example.com/path/to/page',
            meta: {
              charset: 'utf-8',
              name: {
                keywords: 'react,meta,document,html,tags'
              }
            }
          };

        return (<div>
            <DocumentMeta {...meta}>
                <p>hello world</p>
            </DocumentMeta>
          </div>
        )}\

metaタグですがこちらにそれぞれ必要な項目を記載すればOKです。

        const meta = {
            title: 'Elsammitの英単語アプリ作成してみた',
            description: 'React初心者が英単語アプリを作ってみました。選択式でクイズを答えるだけ！！ゲーム感覚で単語が覚えられるよ',
            canonical: 'http://example.com/path/to/page',
            meta: {
              charset: 'utf-8',
              name: {
                keywords: 'react,meta,document,html,tags'
              }
            }
          };

titleも記載することができるのはいいですね。

■方法2

index.htmlを愚直に変更する方法です。
index.htmlはpublicフォルダ配下に格納されております。
index.htmlはこちらのようになっていますので、必要な項目に対して記載変更すればOKです👍

<html lang="jp">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="React初心者が英単語アプリを作ってみました。選択式でクイズを答えるだけ！！ゲーム感覚で単語が覚えられるよ"
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Elsammitの英単語アプリ作成してみた</title>
  </head>
 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

こちらはhtmlと同じ感覚で変更できますね。