ファビコン / OGP / Twitter Card は SERP と SNS で第一印象を決める

なぜこれを学ぶか

ファビコン / OGP は SERP と SNS で第一印象を決める要素で、設定不備だと検索結果に「？」アイコンが出たり、SNS 共有時に画像なしのリンクになり CTR が大幅に下がる。

メディア・コーポレートのリプレイス、新規サイト立ち上げ時に必須の設定。

学ばないと起きること

学ぶメリット

• SERP でブランドアイコンを表示して認知を上げられる
• SNS 共有時のプレビューを意図通りに制御できる
• A/B テストで OGP 画像最適化して CTR を上げられる
• 商談で「ファビコン 48x48 必須 / OGP 1200x630 推奨」を即答できる

仕組み

ファビコンの SERP 表示要件

公式に明記された必須条件:

ファビコンの実装

<!-- HTML head 内 -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

複数サイズ提供:

<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">

OGP（Open Graph Protocol）

Facebook が策定し、Twitter / LinkedIn / Slack など主要 SNS で共通利用される meta タグ規格。

必須プロパティ

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文（160 字程度）">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">
<meta property="og:site_name" content="spotyou">

画像の推奨仕様

Twitter Card

X（旧 Twitter）専用のメタタグ:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@spotyou_ai">
<meta name="twitter:creator" content="@author_handle">

summary_large_image が大画像で表示される推奨形式。

キー概念

ファビコンが SERP に表示される条件

公式に明記:

1. ファビコンが クロール可能であること
2. サイズが 48x48 以上 で その倍数（48, 96, 144, 192...）
3. 内容がブランドを表す
4. 安定的な URL で配信
5. 同じホスト名で配信

満たさない場合、Google はデフォルトアイコン（地球儀）を表示する。

OGP の og:type 値

記事ページは article、サイトトップは website が一般的。

Twitter Card の 4 種類

summary_large_image が記事系で最も視覚的に強い。

OGP の検証ツール

リプレイス後はこれらのツールで意図通りに表示されるか確認する。

キャッシュ問題

OGP / Twitter Card は SNS 側でキャッシュされる:

• Facebook: Sharing Debugger で「Scrape Again」
• Twitter / X: Card Validator で再取得
• LinkedIn: Post Inspector で再取得

OGP を変更しても SNS で古いプレビューが出る場合は、これらで明示的に更新する。

よくある誤解

実務での適用

新規サイト立ち上げ時の設定

ファビコン（最低限）

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

OGP（最低限）

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="サイト名">

Twitter Card

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

Next.js での実装

// app/layout.tsx または app/page.tsx
export const metadata: Metadata = {
  title: "ページタイトル",
  description: "ページの説明",
  openGraph: {
    title: "ページタイトル",
    description: "ページの説明",
    images: ["https://example.com/og.jpg"],
    url: "https://example.com/page",
    type: "article",
    siteName: "spotyou",
  },
  twitter: {
    card: "summary_large_image",
    site: "@spotyou_ai",
  },
};

OGP 画像の動的生成

ブログ記事ごとに動的 OGP 画像を生成する場合:

• Next.js: app/opengraph-image.tsx で動的生成
• Vercel OG / @vercel/og: テンプレート + 動的データ
• Satori: HTML/CSS から SVG / PNG 生成

タイトル + 著者名 + サイトロゴを組み合わせた OGP 画像が CTR で強い。

トラブル別の対処

公式ソース

• ファビコンのガイドライン
• Open Graph Protocol 仕様
• Twitter Card 仕様
• Facebook Sharing Debugger
• Twitter Card Validator

自己テスト

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。