【書き方】SEO対策に必要なheadタグの中身を大紹介【2024年版】

サムネイル
2024年6月1日2025年2月13日
記事内に広告が含まれています。
吹き出しのイメージ

headタグ内のmetaタグを書きたいけど、何を書けばいいのかな、重要な記述はなんだろう？

WordPressや技術ブログを運営する方々の中には、このような疑問を抱く方もいると思います。

headタグ内に記述されるmetaタグはSEOの観点から非常に重要であり、正確かつ適切に記述することが必要です。

筆者は以前運営していたWordPressのブログを、Next.jsで開発したブログに移行しました。その際に、全てのタグを手動で記述しました。

そこで今回は、筆者が実際にブログを制作した経験をもとに

  • head, metaタグとは
  • 必要なタグ
  • 不必要なタグ

について紹介します。

ぜひ最後までご覧いただき、参考にしていただけると幸いです。

目次
  1. 1 head, metaタグとは
  2. 1.1 headタグとは
  3. 1.2 metaタグとは
  4. 2 必要なタグ
  5. 2.1 charset
  6. 2.2 viewport
  7. 2.3 format-detection
  8. 2.4 apple-touch-icon
  9. 2.5 favicon
  10. 2.6 msapplication-Tile
  11. 2.7 title
  12. 2.8 description
  13. 2.9 canonical
  14. 2.10 noindex
  15. 2.11 og
  16. 2.11.1 og:title
  17. 2.11.2 og:description
  18. 2.11.3 og:image
  19. 2.11.4 og:url
  20. 2.11.5 og:type
  21. 2.11.6 og:card
  22. 2.11.7 og:creator
  23. 2.11.8 og:site
  24. 2.11.9 og:site_name
  25. 2.11.10 og:locale
  26. 3 不必要なタグ
  27. 3.1 keywords
  28. 4 最後に

スポンサーリンク

head, metaタグとは

まずはheadタグとmetaタグについて簡単に解説します。

headタグとは

headタグは、HTMLファイル内で使われる要素の1つで、通常、次のように記述されます。

<head>
    <!-- ここにメタデータやCSS、Scriptの読み込みなどを記述する -->
</head>

このheadタグの中には、ウェブページのメタデータやCSS、Scriptの読み込みなどを記述します。

metaタグとは

metaタグは、headタグ内に記述される要素の1つで、通常、次のように記述されます。

<meta />

このmetaタグには、ページのタイトルや説明文、著者情報など、ページの内容に関するメタ情報を記述します。主にSEO（検索エンジン最適化）の観点から重要であり、正確な情報を提供することで、検索結果の表示やウェブページの検索エンジン上でのランキング向上に役立ちます。

スポンサーリンク

必要なタグ

それでは早速、headタグ内に必要なタグについて解説していきます。

charset

charsetを設定するためには、以下のような記述をheadタグ内に追加します。

<meta charset="utf-8" />

このタグは、ウェブページを表示するHTMLファイルがUTF-8でエンコードされていることをブラウザに指示します。UTF-8は、テキストをコンピュータが理解しやすい形式で表現するための文字エンコーディング方式の一つです。UTF-8は多言語のテキストや特殊文字を扱うのに適しています。

このタグがない場合、ブラウザはデフォルトの文字エンコーディング方式を使用します。そのため、他の文字エンコーディング方式が適用され、文字化けや表示の不具合が生じる可能性があります。

viewport

viewportを設定するためには、以下のような記述をheadタグ内に追加します。

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

このタグは、ウェブページがモバイルデバイスやデスクトップブラウザなど、さまざまなデバイスで適切に表示されるようにするためのものです。

width=device-widthは、デバイスの幅をページの幅として設定するということを意味します。これにより、デバイスの幅に合わせてコンテンツが調整され、横スクロールが不要になります。

initial-scale=1は、ページを最初に表示したときのズームレベルを1倍に設定するということを意味です。これにより、ページが初めから拡大されずに表示されます。

format-detection

format-detectionを設定するためには、以下のような記述をheadタグ内に追加します。

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

このタグは、自動的な形式検出を制御するためのものです。この設定を使用することで、特定の形式のテキストを自動的にリンクに変換しないようにすることができます。

email=noは、ブラウザがメールアドレスを自動的にリンクに変換するのを無効化します。

telephone=noは、ブラウザが電話番号を自動的に電話リンクに変換するのを無効化します。

address=noは、ブラウザが住所を自動的に地図リンクに変換するのを無効化します。

apple-touch-icon

apple-touch-iconを設定するためには、以下のような記述をheadタグ内に追加します。

<link rel="apple-touch-icon" href="/icon.png" />

このタグは、Appleデバイスでのウェブページのアイコンを指定します。主に、ユーザーがウェブページをホーム画面に追加した際に表示されます。

href属性には、アイコン画像のパスを指定します。

favicon

faviconを設定するためには、以下のような記述をheadタグ内に追加します。

<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />

このタグは、主にPCなどで使用されるアイコンを指定します。例えば、Google ChromeやSafariのタブに表示されるアイコンなどに使用されます。

href属性には、favicon画像のパスを指定します。type属性には、画像の MIME タイプを指定します。通常は "image/x-icon"です。sizes属性には、アイコンのサイズを指定します。ここでは "16x16" を指定していますが、必要に応じてサイズを変更できます。

msapplication-Tile

msapplicationTileを設定するためには、以下のような記述をheadタグ内に追加します。

<meta name="msapplication-TileImage" content="/title.img" />
<meta name="msapplication-TileColor" content="#E0CBBA" />

msapplicationTileImageは、Windowsデバイスで使用されるアイコンを指定します。たとえば、Windowsのデスクトップに ウェブページのショートカットを設置した際に表示されます。

msapplicationTileColorは、タイルの背景色を指定します。タイルとは、Windowsデバイス上で ウェブページがピン留めされたときに表示される矩形の領域です。この背景色は、タイルの周囲に表示されるイメージの背景色を指定します。

title

titleを設定するためには、以下のような記述をheadタグ内に追加します。

<title>タイトル</title>

titleには、ウェブページのタイトルを記述します。

description

descriptionを設定するためには、以下のような記述をheadタグ内に追加します。

<meta name="description" content="説明" />

descriptionには、ウェブページの内容を簡潔に要約した紹介文を記述します。適切で魅力的な紹介文を記述することで、ユーザーがページをクリックしやすくなります。

canonical

canonicalを設定するためには、以下のような記述をheadタグ内に追加します。

<link rel="canonical" href="https://example.com" />

canonicalは、ウェブページの正規URL（canonical URL）を指定するためのタグです。canonicalを使用することで、同じコンテンツが複数のURLでアクセス可能な場合に、どのURLが検索エンジンによって正規のものと見なされるかを明確にすることができます。

正規URLをhref属性に指定します。

canonicalを使用することで、過去のドメインと現在のドメインに同じ内容のページが存在する場合や、異なるパスで同じコンテンツが表示される場合などに、SEOの評価が下がるリスクを軽減することができます。

noindex

noindexを設定するためには、以下のような記述をheadタグ内に追加します。

<meta name="robots" content="noindex" />

noindexは、特定のページを検索エンジンのインデックスから除外するためのタグです。

Googleや他の検索エンジンに対して「このページをインデックスしないでください」と指示します。ページに有用性がない場合や、重複コンテンツのページなど、検索エンジンにインデックスされる価値のないページにこのタグを使用することが推奨されます。

og

og（Open Graph Protocol）は、ウェブページがソーシャルメディアで共有された際に、リンク先の情報を明示的に指定するためのタグのセットです。

  • og:title
  • og:description
  • og:image
  • og:url
  • og:type
  • og:card
  • og:creator
  • og:site
  • og:site_name
  • og:locale

それぞれ解説します。

og:title

og:titleを設定するためには、以下のような記述をheadタグ内に追加します。

<meta property="og:title" content="タイトル" />

og:titleは、ソーシャルメディア上で表示される際のウェブページのタイトルを指定します。通常これは前述した、titleと同じものを記述します。

og:description

og:descriptionを設定するためには、以下のような記述をheadタグ内に追加します。

<meta property="og:description" content="説明文" />

og:descriptionは、ソーシャルメディア上でのリンク共有時に表示されるウェブサイトの説明文を指定します。基本的には前述したdescriptionと同じ内容を使用します。

og:image

og:imageを設定するためには、以下のような記述をheadタグ内に追加します。

<meta property="og:image" content="/image.png" />

このタグによって指定された画像は、ソーシャルメディアでのリンク共有時に、リンクのプレビューとして表示されます。

og:url

og:urlを設定するためには、以下のような記述をheadタグ内に追加します。

<meta property="og:url" content="https://example.com" />

og:urlは、ソーシャルメディアで共有されたときにリンク先のURLを指定します。これにより、ユーザーが共有されたリンクをクリックした際に遷移する先のページを明示します。

og:type

og:typeを設定するためには、以下のような記述をheadタグ内に追加します。

<meta property="og:type" content="blog" />

og:typeは、Webページの種類を指定します。"article"、"website"、"blog"などの値が一般的に使用されます。設定することで、共有されたリンクがウェブサイト、ブログ記事などのどの種類のコンテンツであるかが明示されます。

og:card

og:cardを設定するためには、以下のような記述をheadタグ内に追加します。

<meta name="twitter:card" content="summary_large_image" />

og:cardは、X（旧Twitter）でリンクが共有された際に表示されるカードの種類を指定します。"summary_large_image"は、大きな画像を含むカードの形式です。他にも、"summary"や"player"など、さまざまなカードタイプがあります。

og:creator

og:creatorを設定するためには、以下のような記述をheadタグ内に追加します。

<meta name="twitter:creator" content="@user" />

og:creatorは、X（旧Twitter）上でリンクが共有された際に、ウェブサイトの管理者や制作者を明示します。X（旧Twitter）のユーザーIDを指定することで、リンク共有時にそのユーザーが関連付けられ、ユーザーとの関係性が示されます。

og:site

og:siteを設定するためには、以下のような記述をheadタグ内に追加します。

<meta name="twitter:site" content="@user" />

og:siteは、X（旧Twitter）上でWebサイトが共有された際に、ウェブサイトの公式アカウントを明示します。これにより、ウェブサイトの公式アカウントがリンク共有時に関連付けられ、ユーザーとの関係性が示されます。

og:site_name

og:site_nameを設定するためには、以下のような記述をheadタグ内に追加します。

<meta property="og:site_name" content="タイトル" />

og:site_nameは、ソーシャルメディア上でウェブサイトが共有された際に、サイト名を明示します。

og:locale

og:localeを設定するためには、以下のような記述をheadタグ内に追加します。

<meta property="og:locale" content="ja_JP" />

og:localeは、ウェブサイトの地域設定を明示し、検索エンジンやソーシャルメディアプラットフォームが適切な言語や地域設定を適用できるようにします。

スポンサーリンク

不必要なタグ

ここまで必要なタグについて紹介しました。次に不必要なタグを紹介します。

keywords

keywordsを設定するためには、以下のような記述をheadタグ内に追加します。

<meta name="keywords" content="キーワード1, キーワード2, キーワード3" />

keywordsは、ウェブページのキーワードやフレーズを指定するためのメタタグです。かつては、検索エンジンのランキングに影響を与えると考えられていましたが、現在ではほとんどの主要な検索エンジンがこのタグを無視しています。そのため、メタキーワードを指定してもSEOには影響を与えません。

スポンサーリンク

最後に

ここまで、headタグ内に記述するべきタグと不必要なタグについて紹介しました。

WordPressであれば自動で記述してくれる場合が多いですが、これらの知識を習得することで、よりSEO対策が行いやすくなるかと思います。

1から記述する場合は大変ですが、頑張りましょう。

ここまでお読みいただきありがとうございました。

関連記事
  • サムネイル
    【Googleアドセンス】ログインの必要なページで広告を表示する方法
    この記事では、Googleアドセンスの広告を、ログインの必要なページで表示する方法について紹介しています。
    2025年1月20日2025年2月8日
  • サムネイル
    【Googleアドセンス】サブドメインを追加する方法を紹介【2024年版】
    この記事では、Googleアドセンスの広告をサブドメインで配信する方法について紹介しています。
    2024年12月26日2025年2月8日
  • サムネイル
    【ブログ】RSSフィードとは？必要性について解説
    皆さんはRSSフィードをご存知でしょうか？この記事では、RSSについてや必要性について解説しています。
    2024年9月4日

    • スポンサーリンク

    シェアする
    フォローする
    応援する
    にほんブログ村人気ブログランキングFC2ブログランキング
    BuyMeaCoffee
    もしこの記事が役に立ったなら、
    こちらから ☕ を一杯支援いただけると喜びます
    ブログ運営者
    筆者
    あらた
    • 21歳
    • 千葉県在住
    • 文系大学生｜26卒
    • 経営学部 マーケティング学科
    • Webエンジニアインターンに参加中
    • インターン：Vue.js, Laravel
    • 個人開発：Next.js

    スポンサーリンク

    カテゴリー
    プログラミング
    大学生活
    旅行
    ブログ
    タグ
    FlutterガジェットApple Developer料理AWS金融JavaScriptGoogle AdSenseMicroCMSSEO対策Git

    スポンサーリンク

    アーカイブ
    おすすめの投稿
    最新の投稿
    目次
    1. 1 head, metaタグとは
    2. 1.1 headタグとは
    3. 1.2 metaタグとは
    4. 2 必要なタグ
    5. 2.1 charset
    6. 2.2 viewport
    7. 2.3 format-detection
    8. 2.4 apple-touch-icon
    9. 2.5 favicon
    10. 2.6 msapplication-Tile
    11. 2.7 title
    12. 2.8 description
    13. 2.9 canonical
    14. 2.10 noindex
    15. 2.11 og
    16. 2.11.1 og:title
    17. 2.11.2 og:description
    18. 2.11.3 og:image
    19. 2.11.4 og:url
    20. 2.11.5 og:type
    21. 2.11.6 og:card
    22. 2.11.7 og:creator
    23. 2.11.8 og:site
    24. 2.11.9 og:site_name
    25. 2.11.10 og:locale
    26. 3 不必要なタグ
    27. 3.1 keywords
    28. 4 最後に
    BuyMeaCoffee
    もしこの記事が役に立ったなら、
    こちらから ☕ を一杯支援いただけると喜びます

    スポンサーリンク