metaタグ実装チェックリスト：SEO・OGP・Twitter Card・canonicalを1つのhead内で整える

<head> に入れるmetaタグは種類が多く、SEO・OGP・Twitter Card・canonical・robots が混在しているため、抜けや設定ミスが発生しやすい領域です。コピペテンプレだけで済ませていると、og:image のサイズ不足や canonical のプロトコル違い、noindex の本番残しといった細かい罠に引っかかります。

この記事では、1ページ分の <head> に必要なmetaタグを 目的別に整理したチェックリスト形式 でまとめます。それぞれのタグの推奨仕様と、実装時によくあるミスを合わせて確認できる構成にしています。

基本SEO系

<title> — 検索結果とタブの文字列

HTML
<title>ページタイトル | サイト名</title>

推奨仕様:

  • 28〜35文字程度（日本語）/ 50〜60文字（英語）
  • 左側に重要語、右側にサイト名
  • 同じサイト内で完全一致するタイトルを作らない（検索結果で重複判定される）

<title> はmetaタグではありませんが、<head> 内で最も影響が大きい要素なのでセットで整理します。

<meta name="description"> — 検索結果の説明文

HTML
<meta name="description" content="ページの内容を2〜3文で要約します。">

推奨仕様:

  • 120文字前後（日本語）/ 155文字前後（英語）
  • ページごとに書き分ける（使い回すと検索結果でスニペットが本文から生成される）
  • 空にするとGoogleが本文から自動生成するので、書けない時は無理に書かないという選択肢もある

<link rel="canonical"> — 正規URL

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

よくあるミス:

  • プロトコル違い: HTTPSサイトでHTTPのcanonicalを書く → 自己参照が弱くなる
  • 末尾スラッシュ違い: 実URLとcanonicalの末尾 / が不一致 → 重複コンテンツ扱いの原因
  • パラメータ付きURLに対してパラメータなしcanonical: 意図しない正規化が起きる

canonicalは「自己参照でもいいから入れる」が原則です。何も書かないとGoogleが勝手にcanonicalを推測するため、意図しないページを正規と判定されることがあります。

robots系 — noindex / nofollow

HTML
<meta name="robots" content="noindex,nofollow">
用途設定
通常の公開ページ記述不要（デフォルトで index, follow）
検索結果に出したくない（タグページ・検索結果ページなど）noindex
下書き・社内向けnoindex,nofollow
信頼できない外部リンクを含むページ個別の <a rel="nofollow"> を使う方が良い

注意: noindex を書いたページは検索結果に出ません。ステージング環境に書いたまま本番反映すると致命的 なので、環境変数で切り替えるのが安全です。

OGP系（Facebook / LinkedIn / LINE）

Facebook・LinkedIn・LINEはシェア時にOGPタグを読み取ってカードを生成します。

必須5項目

HTML
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="説明文">
<meta property="og:url" content="https://example.com/articles/foo">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">

この5項目が揃っていないとカードが崩れます。

og:type

値用途
websiteトップページ・一般的なLP
article記事ページ（公開日・著者などが意味を持つページ）

website と article の2択で十分です。book profile video.movie などもOGP仕様には存在しますが、大半のサイトでは不要です。

og:image のサイズと配置

  • Facebook / LinkedIn: 1200×630 推奨
  • LINE: 1200×630 で問題なし
  • 最小値: 600×315（これ未満だと表示されないか小さくなる）
  • 容量: 8MB以下

og:image のURLは 絶対URL（https:// から始まる完全URL）である必要があります。相対パスだとSNS側が取得できません。

og:site_name

HTML
<meta property="og:site_name" content="Web Sourcecode">

サイト名をブランドとしてカード下部に表示します。サイト横断で統一するのが基本です。

Twitter Card系

X（旧Twitter）はOGPも読みますが、twitter:* が存在すればそちらを優先します。シンプルに運用するなら twitter:card と twitter:site だけ指定して、残りはOGPを流用するのが楽です。

twitter:card

値用途
summary_large_image大きな画像付きカード（ほぼすべての記事で推奨）
summary小さい画像付きカード（画像素材がない場合のフォールバック）
HTML
<meta name="twitter:card" content="summary_large_image">

twitter:site

HTML
<meta name="twitter:site" content="@websourcecode">

サイト運営アカウント。カード下部に表示されます。@ を含めて書きます。

画像サイズ

  • summary_large_image: 1200×628（OGPと同じ画像で問題ない）
  • summary: 144×144以上（正方形）

キャッシュ更新

Xもカードのキャッシュを持っています。OGP画像やタイトルを変更しても即座には反映されません。以前は Card Validator で強制更新できましたが現在は廃止されており、URLを一度投稿（またはDMに貼り付け）することでカードが再取得されます。

完成形テンプレ

1ページ分のmeta情報をまとめると、このような形になります。

HTML
<title>metaタグ実装チェックリスト | example</title>
<meta name="description" content="headに入れるmetaタグをSEO / OGP / Twitter Cardの観点で整理したチェックリスト記事です。">
<link rel="canonical" href="https://example.com/meta-tag-checklist/">

<meta property="og:title" content="metaタグ実装チェックリスト">
<meta property="og:description" content="headに入れるmetaタグをSEO / OGP / Twitter Cardの観点で整理したチェックリスト記事です。">
<meta property="og:url" content="https://example.com/meta-tag-checklist/">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og/meta-tag-checklist.png">
<meta property="og:site_name" content="example">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">

WordPressでも Next.js でも Vue でも、最終的に <head> に吐き出される文字列はこの形です。フレームワーク固有のmeta管理API（next/head や Helmet）を使う場合も、この構造に変換するだけです。

公開前チェックリスト

基本SEO

  • <title> を 28〜35文字程度で設定している
  • description はページごとに書き分けている
  • canonical のプロトコルと末尾スラッシュが実URLと一致している
  • noindex を本番に残していない（ステージング用の設定が残っていないか確認）

OGP

  • og:title og:description og:url og:type og:image が全て揃っている
  • og:image は絶対URLで、1200×630に近いサイズ
  • og:type は記事なら article、トップやLPなら website

Twitter Card

  • twitter:card は summary_large_image を基本とする
  • twitter:site にサイトアカウントが設定されている

シェア動作の確認

まとめ

<head> に入れるmetaタグは、役割ごとに整理すると抜けが減ります。

  • 基本SEO: title / description / canonical / robots
  • OGP: 必須5項目と og:site_name。画像は絶対URLで1200×630
  • Twitter Card: summary_large_image を基本にしてOGPを流用

手書きでタグを組み立てると入力ミスや抜けが発生しやすいので、フォームに入力して出力する形にしておくと運用が安定します。ブラウザで完結させたい場合は Meta Tag Generator のようなツールを使うとタイトル・説明・canonical URL・画像URLを入れるだけでhead一式を生成できます。SNSシェアボタンを合わせて実装する場合は Share URL Builder も参考にしてみてください。

read next