headタグ内の記述を考えてみたメモ
こんにちは、マスダです。
LPを一人で作る経験もそこそこ積んできたので、そろそろインプットしたことを吐き出すタイミングかと思い書いています。
突然ですが、webページを作るときにheadタグの中に何を書こうかと迷ったことはないでしょうか？
私の場合はその瞬間が突然訪れました。
いつもは先輩の書いたコードをコピペして必要な箇所を書き換えるだけだったのですが、「呪文のようなこのコードは何を書いているんだ？」と気になったわけですね。
そこで、調べてみました。
headタグとは何者か
headタグは、HTMLで作成された文章に関するメタ情報を記述するためのタグです。主に検索エンジンやブラウザなどのシステムに対して情報を提供する役割があります。
Webページを訪れる人には見えませんが、SEO対策に有効なものもあるので何を書くのかは重要です。
個人的おすすめの記述内容テンプレ
2020年3月31日執筆時点での個人的おすすめです。
想定Webサイト：B to BのサービスLPなどシンプルなwebページ
想定ブラウザ：Chrome、Firefox、Safari、IE11以降
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{ページタイトル}</title>
<meta name="description" content="{ページの説明文}">
<!--OGPの設定-->
<meta property="og:title" content="{ページタイトル}">
<meta property="og:type" content="website">
<meta property="og:url" content="{サイトURL}">
<meta property="og:image" content="{OGP画像のURL}">
<meta property="og:site_name" content="{サイト名}">
<meta property="og:description" content="{サイトの説明文}">
<!--アイコンの設定-->
<link rel="icon" href="{アイコンのパス}">
<link rel="apple-touch-icon" href="{アイコンのパス}">
<!--その他設定-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<!--外部ファイルの読み込み-->
<link rel="stylesheet" href="{CSSファイルのパス}">
<script src="{JavaScriptファイルのパス}"></script>
</head>私は簡単なLPのコーディングしかしないので、いつもこんな感じでシンプルに書いています。
ブラウザとかアプリ側が優秀なので、無駄な設定は書かない方が無難とどこかの誰かも言っていたと思います。
それぞれ簡単に解説するよ！
🤖文字コードの指定
<meta charset="utf-8">Webページが文字化けしないように設定する必要があります。
ーーーーーーーー
🤖ビューポートの設定
<meta name="viewport" content="width=device-width, initial-scale=1">ビューポートとはコンテンツの表示領域のことです。
レスポンシブなwebサイトを作るためには必須の記述です。
「width=device-width」と指定することで表示領域がデバイスの横幅と同じになりデバイスの種類に対応したレスポンシブなデザインが可能になります。
これを書いていない場合はスマホで見た時にPCのレイアウトが表示されてしまいます。
ーーーーーーーー
🤖ページタイトルの指定
<title>{ページタイトル}</title>webページタイトルの設定。
サイト名ではなく、ページのタイトルを書くようにしましょう。
タイトルはブラウザのタブや検索結果の表示などに使われます。
例）サイト名：株式会社ゴーリストHP
ページタイトル：株式会社ゴーリスト | エラーページ
ーーーーーーーー
🤖ページ説明文の指定
<meta name="description" content="{ページの説明文}">webページの説明文の設定。
ここに書いた内容は検索結果でタイトルの下に表示されます。長すぎると途中で省略されてしまうので、120文字程度がいいでしょう。
クリックしてもらえるように、検索ユーザーに向けて書きましょう。
（説明文を書いていない場合はブラウザが勝手に判断してサイトに含まれるテキストを表示してくれるみたいです。）
ーーーーーーーー
🤖OGPの設定
OGPとは「Open Graph Protocol」の略。
SNSなどでwebページがシェアされた時にサイトの内容を表示させる仕組みのこと。（ちなみにFacebook社がこの仕組みを開発して、他のSNSに広がっていったらしい）
詳しく知りたい人はfacebook for developersやOGPの公式サイトを見るといいです。
<meta property="og:title" content="{ページタイトル}">ページのタイトル。サイト名ではない。
<meta property="og:type" content="website">コンテンツのタイプ指定。
Facebookのニュースフィードでコンテンツがどのように表示されるかが決まります。デフォルトはwebsite。他にもvideoとかmusicとかいろいろ指定できるみたいですが、表示がどのように変わるのかは詳しく知りません、すみません。
サービスLPとかサイトのTOPページであれば、websiteでいいのではないでしょうか。
<meta property="og:url" content="{サイトURL}">ページのURL
<meta property="og:image" content="{OGP画像のURL}">アイキャッチとなる画像のURL。
例）https://goalist.co.jp/img/ogimage.png
<meta property="og:site_name" content="{サイト名}">サイト名。
例）株式会社ゴーリストHP
<meta property="og:description" content="{サイトの説明文}">ページ内容の説明文。
長すぎると省略されるので100文字程度がいいでしょう。
ーーーーーーーー
🤖アイコンなどの設定
<link rel="icon" href="{アイコンのパス}">タブなどに表示されるファビコンの設定。
ファビコンは複数サイズの画像を入れられるico形式で作成するのがコードの記述量が少なくなり、おすすめです。
png形式を用いる場合は「type="image/png"」という記述も必要です。
ファビコンのサイズについてはここでは割愛させていただきます。
<link rel="apple-touch-icon" href="{アイコンのパス}">スマホのホーム画面に表示されるアイコンの設定。
サイズは152px × 152pxの正方形。png形式のファイルを指定します。
ーーーーーーーー
🤖IE対策
<meta http-equiv="X-UA-Compatible" content="IE=edge">IEを互換モードで使用していても、最新のバージョンで表示させるためのコード。
この時代でもIEは日本のブラウザシェア率で5〜10%くらいを占めているので、念のために書いておいても損はしないと思います。いずれ書く必要のなくなる記述です。
🤖電話番号の自動リンク化設定
<meta name="format-detection" content="telephone=no">Safariで電話番号を自動でリンクに変換しない設定。
Safariは電話番号と思われる数字を自動でリンクに変換するようになっています。
しかし、PCで見たときもリンクになるのはユーザビリティにあまりよろしくないと思うので、「telephone=no」という記述で自動リンク化を無効にしています。
ーーーーーーーー
おわり
以上が自分で調べてみてこれが一番シンプルで適切な書き方かなと思った内容です。もちろんもっとこだわろうと思ったらさらにいろんな要素を追加できると思います。
まだまだweb初心者なので、間違っていたら教えていただけると嬉しいです🙏
ここから下はテンプレには書いていないけれど、ページ内容によっては設定してもいいかなと思うタグです。
テンプレにはないけど他にも軽く紹介
🤖インデックス、クロールの設定
<meta name="robots" content="noindex, nofollow">検索エンジンにインデックスして欲しくない（検索結果に表示して欲しくない）ときは「noindex」を指定。
クローラーにページ内のリンクを辿って欲しくない場合は「nofollow」を指定。
ーーーーーーーー
🤖FacebookIDの設定
<meta property="fb:app_id" content="{appID}" />Facebookインサイトと紐づけるためのID（OGP設定の一部）。
これを設定することでいいねの数やどれくらいの人がどの時間帯に見てくれたのかなどFacebookからサイトへのトラフィック分析ができるみたいです。
弊社のWebページには設定されていませんでした（小声）。
（これを書いていなくても画像などはきちんと表示されるみたいなのでテンプレには記述していません。）
ーーーーーーーー
🤖TwitterのOGP設定
<meta name="twitter:card" content="summary_large_image" />Twitterでのカードの種類を指定することができます。詳しくはこちら
参考URL
head内に書くべきタグを総まとめ：SEO対策に有効なものは？