🧜‍♀️

[React] metaタグを理解する

2023/12/14に公開

HTML

はじめに

metaタグとは

meta（メタ）タグとは、検索エンジンやブラウザなどに対してWebページの情報を伝えるHTMLタグです。
文字コードの指定や、検索エンジンへのインデックス（検索結果に表示される）の可否など、メタデータと呼ばれる情報を伝えるのがメインの役割となります。
ページタイトル（title）やページの説明文（description）など以外は、ユーザーの目入ることはほとんどありませんが、間接的にSEO効果に影響してくるのでとても重要な要素です。

1. 設定するmetaタグを確認する

1. 文字コード（charset属性）

<meta charset="utf-8">

HTML文書の文字エンコーディングを指定するための記述です。
文字コードの設定をしていないと、
英語版のブラウザから日本語サイトにアクセスすると文字化けが起きる可能性があります。
基本的にはUTF-8で設定する

2. robotsタグ

<meta name="robots" content="noindex, nofollow">

検索エンジンへのインデックスを避けるための記述です。
上記の記述をすることにより、検索結果として表示されなくなります。
低品質なページなどをインデックスさせないことで、SEOのマイナス評価を避けることにも繋がるので必要に応じて設定しましょう。

3. format-detectionタグ

<meta name="format-detection" content="telephone=no, email=no, address=no">

主にスマートフォンなどが電話番号を勝手にリンク設定することを避けるための記述です。
スマートフォンのブラウザなどでは、ページ内に電話番号のような記述を見つけると勝手にリンクにしてしまう場合があります。誤ってユーザーが架電してしまわないよう設定しておきましょう。

4. viewportタグ

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">

ページの表示領域を指定するための記述です。
ブラウザがページを表示するときにどの大きさで表示するかを指定することができます。
この設定をしていないと、PCとスマートフォン、タブレットなど各デバイスごとに画面幅が違うブラウザで見た時に、ページが小さく表示されてしまったり、はみ出してしまったりする場合があります。
レスポンシブ対応が当たり前になってきている中では必須の設定です。

width=device-width:
ページの表示幅をデバイスの幅に合わせるという意味です。これにより、ページがデバイスの幅に応じて自動的に適切なサイズに調整されます。
initial-scale=1:
ページの初期表示時の拡大率を1倍に設定します。つまり、ページをデフォルトのサイズで開いた際に、拡大や縮小が行われないようにします。
minimum-scale=1.0:
ページの最小拡大率を1.0倍に設定します。これにより、ユーザーがページを縮小することを制限し、コンテンツが読みやすい状態を維持します。

5. titleタグ

<title>ページタイトル</title>

ページのタイトルを指定する記述です。

6. favicon（ファビコン）

<link rel="icon" type="image/png" href="./assets/favicon.png">

ファビコンを設定するための記述です。
ファビコンとは、ブラウザのタブやブックマークバーなどに表示されるアイコンのことです。
サイトのシンボルマーク・イメージ付けとして大事なアイコンでもあるので、できるだけ設定しておくことをおすすめします。

7. apple-touch-icon

<link rel="apple-touch-icon" href="./assets/apple-touch-icon.png" sizes="180x180">

スマートフォンでホーム画面に追加したときや、ショートカットを作成した場合に表示されるアイコンを設定するための記述です。

2. 実際にmetaタグを設定する

src/frontend/public/index.htmlを編集します。
先ほどの解説した必要な設定を<head>に追加します

追加した結果が下記ファイルになります。

index.html

<!-- 省略 -->
  <head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex, nofollow">
    <meta name="format-detection" content="telephone=no, email=no, address=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">
    <title>Sandbooks</title>
    <link rel="icon" type="image/png" href="./assets/favicon.png">
    <link rel="apple-touch-icon" href="./assets/apple-touch-icon.png" sizes="180x180">
  </head>
<!-- 省略 -->

3. 他の設定すべき要素も設定する

<head>以外にも設定する箇所があります。

lang="en"をlang="ja"に変更する
チュートリアルのコメントを削除する