一般的なウェブサイトに必要なhead要素内のタグ構成について考えます。
はじめに結論
以下の構成で、まずは大きな問題とはならないと思います。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<meta name="description" content="ページの説明をここに記入します。">
<meta name="format-detection" content="telephone=no">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="ページのタイプ">
<meta property="og:image" content="画像のURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="記事の抜粋や要約">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイト名">
<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="@Twitter(X)ユーザー名">
<link rel="icon" href="画像のURL">
<link rel="apple-touch-icon" href="画像のURL">
<!-- <meta name="robots" content="noindex, nofollow"> -->
</head>続いて、必要／まれに必要／不要に分けて見ていきます。
必要
まずは、最低限これは必要！というタグから見ていきましょう。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>意味は上から、
- 文字コードを定義
- スマホに最適化されたビューポートを定義
- ページタイトル
となっています。VS Code では上記タグは自動で挿入されます。そのくらい必須ということでしょう。あえて削除することはまず無いタグ達です。
以下のタグ達も多くの場合で必要です。必須といっても過言ではありません。
ページの説明
<meta name="description" content="ページの説明をここに記入します。">ページの説明を定義するタグです。Googleなどの検索ランキングには影響がないとされていますが、クリック率には大いに関係します。
電話番号の自動リンク
<meta name="format-detection" content="telephone=no">ブラウザによっては、電話番号っぽい数列が自動でリンクに変換されることがありますが、その設定を無効にするタグです。
OGP関連
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="ページのタイプ">
<meta property="og:image" content="画像のURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="記事の抜粋や要約">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイト名">
<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="@Twitter(X)ユーザー名">SNSなどでページがシェアされたときに表示される情報を定義します。詳しい解説は別の記事に譲りますが、SNSからの流入を促すためには必須のタグ達です。
ファビコン指定
<link rel="icon" href="画像のURL">ブラウザのタブに表示されるファビコンを指定します。
- どの種類の画像ファイル（ico/png/svg）を使用するか
- 異なるサイズの画像を用意するか
で記述が変わったり増えたりしますが、この記事では割愛します。
ホーム画面アイコン
<link rel="apple-touch-icon" href="画像のURL">スマホのホーム画面で表示されるアイコンを指定します。
まれに必要
検索エンジンのインデックス
<meta name="robots" content="noindex, nofollow">Googleなどの検索結果に表示（=インデックス）させたくないときに記述します。
不要
ここからは、かつてはよく見られたタグですが、2025年現在では不要になったものを紹介します。
IE閲覧モード
<meta http-equiv="X-UA-Compatible" content="IE=edge">Internet Explorer 閲覧時に、「互換モード」ではなく「標準モード」で表示させるためにタグですが、2025年現在 Internet Explorer は正式にサポートが終了しています。不要です。
著者名／キーワード
<meta name="author" content="著者名">
<meta name="keywords" content="キーワード1, キーワード2...">これらは技術的には有効ですが、2025年現在、定義された内容は主要な検索エンジンからは無視されていると言われています。SEOの観点では不要です。
おわりに
かなり大まかに書いてきました。OGP関連やアイコン設定などについては、もう少し詳細を知る必要があると思いますので、今後、個別に記事を書こうと思います。
この記事が参考になれば幸いです。
SNSでシェアする
-
Xでシェアする
-
このページのURLをコピーする
