記事一覧に戻る
Web •

7つのWebサイトにSEO・favicon・GA4を一括導入した全手順｜2026年のベストプラクティス

favicon、OGP、Twitter Card、GA4を7サイトに一括導入した実践記録。2026年最新のSVG favicon・Core Web Vitals・構造化データのベストプラクティスも解説。

#SEO #GA4 #favicon #OGP #CoreWebVitals

最終更新:

7つのWebサイトにSEO・favicon・GA4を一括導入した全手順

7サイト × 4項目 = 28の設定を、半日で完了。 しかも、すべてのサイトのアクセスデータが1つのダッシュボードに集約されるようになりました。

「SEO対策はやらなきゃ…」と思いつつ放置していたWebサイト、あなたにもありませんか？

🎯 この記事で得られること

この記事を読むと、あなたのWebサイトにSEO基盤を正しく導入できるようになります。

  • ✅ SVG faviconの作り方と2026年の推奨ファイル構成
  • ✅ OGP・Twitter Cardの正しい設定方法（コピペで使えるコード付き）
  • ✅ GA4の導入とNext.js/Astro/Viteでの実装パターン
  • ✅ Core Web Vitals・構造化データなど2026年に押さえるべきSEOトレンド
  • ✅ 複数サイトのGA4データを1つのダッシュボードで可視化する方法

😰 あなたもこんな悩みを抱えていませんか？

  • 「faviconってまだ .ico でいいの？SVGに変えるべき？」
  • 「OGPとTwitter Cardの違いがよくわからない…」
  • 「GA4を入れたいけど、Next.jsとViteで書き方が違ってハマりそう」
  • 「サイトが増えるたびにSEO設定を忘れて、後から焦る」

半年前の私がまさにこの状態でした。

📖 私のストーリー：「あとでやる」が7サイト分溜まった話

Before：放置されたSEO設定

正直に告白します。私はポートフォリオサイト、ゲーム、SNS投稿ツール、分析ダッシュボードなど、合計7つのWebサイトを運営しています。

しかし、SEO対策はどれも中途半端でした。

  • faviconがデフォルトのViteアイコンのまま（3サイト）
  • OGP未設定でSNSシェア時に真っ白（4サイト）
  • GA4が入っておらず、アクセス数すら不明（5サイト）
  • <html lang="en"> のまま日本語サイトを公開していた（1サイト）

「いつかやろう」で半年が過ぎていました。

ある日、自分のサイトをXでシェアした時に気づきました。プレビューにタイトルも画像も出ない。まるで存在しないページのようでした。

転機：「全サイト一括でやろう」という決断

きっかけはB2Bポートフォリオサイトを新規構築した時でした。そのサイトではfavicon、OGP、構造化データ、GA4まできちんと設定していたので、「この設定をテンプレートにして、残り全部に適用すればいいのでは？」と気づいたのです。

やるなら一気にやる。 その方が、ノウハウが頭に残っている間に全部終わらせられます。

After：半日で7サイト完了

結果として、以下を達成しました：

項目BeforeAfter
favicon設定済みサイト2/77/7
OGP/Twitter Card設定済み3/77/7
GA4トラッキング導入済み2/77/7
アクセスデータ可視化部分的全サイト統合ダッシュボード

半日で、すべてのサイトがSEOの基本を押さえた状態になりました。

💭 なぜこのアプローチを選んだのか

最初に考えた方法とその限界

最初は「各サイトごとに、時間がある時に少しずつやろう」と考えていました。

しかし、この方法には問題がありました：

  • サイトごとにフレームワークが違う（Next.js、Astro、Vite + React）ので、毎回調べ直しが必要
  • 途中で別の作業が入ると、どこまでやったか忘れる
  • 設定の統一感がなくなる（GA4のIDを間違えるなど）

発想の転換：テンプレート化して一括適用

行き詰まった時、視点を変えました。

「そもそも、SEO設定のパターンは3つしかない」

  1. HTMLに直接書く（Vite、静的HTML）
  2. フレームワークのメタデータAPIを使う（Next.js App Router）
  3. レイアウトコンポーネントに書く（Astro）

この3パターンをテンプレート化すれば、7サイトでも迷わず適用できます。

決め手になった3つのポイント

  1. 統一GA4 ID: 全サイトで同じ測定ID（G-XXXXXXXXXX）を使えば、1つのGA4プロパティで全サイトのデータを確認できる
  2. SVG favicon: ベクター形式なら全サイトで高品質。さらにダークモード対応もCSSだけで可能
  3. OGPの最小セット: og:title、og:description、og:type、twitter:card の4つさえあれば、ほとんどのSNSでプレビューが表示される

「完璧を目指さず、最小限の設定で最大の効果を得る」 — これが今回のアプローチの核です。

🔧 具体的な実装方法

Step 1: SVG faviconを作成する

2026年現在、faviconの推奨構成は たった3ファイル です：

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

なぜSVGがベストなのか：

  • 無限にスケーラブル（どんな解像度でも鮮明）
  • ファイルサイズが小さい（PNGの1/10以下になることも）
  • CSSでダークモード対応が可能
  • テキストベースなのでGitで差分管理できる

実際に作成したSVG faviconの例（ポートフォリオサイト用）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
  <rect width="64" height="64" rx="14" fill="#0A0A0F"/>
  <text x="32" y="44" text-anchor="middle"
        font-family="serif" font-weight="700"
        font-size="32" fill="#C9A96E">S</text>
</svg>

ダークモード対応を追加する場合：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    rect { fill: #0A0A0F; }
    text { fill: #C9A96E; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #1e293b; }
      text { fill: #38bdf8; }
    }
  </style>
  <rect width="64" height="64" rx="14"/>
  <text x="32" y="44" text-anchor="middle"
        font-family="serif" font-weight="700"
        font-size="32">S</text>
</svg>

prefers-color-scheme: dark メディアクエリをSVG内に埋め込むだけで、OSのダークモード設定に連動してアイコンの色が自動で切り替わります。

Next.js App Routerの場合 は、app/icon.svg に配置するだけで自動認識されます。<link> タグの手動追加は不要です。

Step 2: OGP・Twitter Cardを設定する

SNSでシェアした時にリッチなプレビューを表示するために必要な設定です。

最小構成（HTMLに直接書く場合）：

<!-- Open Graph -->
<meta property="og:title" content="サイトタイトル" />
<meta property="og:description" content="サイトの説明文" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="ja_JP" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />

ポイント：

  • og:image がなくても og:title と og:description があれば、テキストベースのプレビューは表示される
  • twitter:card は summary（小さいカード）か summary_large_image（大きい画像付き）を選択
  • X（旧Twitter）は og:title や og:description にフォールバックするため、twitter:title は省略可能
  • 2026年現在、Bluesky・Mastodon・Slack・DiscordもOGPタグを読み取るので、設定すれば全プラットフォームで恩恵がある

Next.js App Routerの場合（推奨パターン）：

// app/layout.tsx
export const metadata: Metadata = {
  title: "カジノ・インタラクション・システム",
  description: "結婚式二次会向けNFC/QRコード連動カジノゲーミングシステム",
  openGraph: {
    title: "カジノ・インタラクション・システム",
    description: "結婚式二次会向けNFC/QRコード連動カジノゲーミングシステム",
    type: "website",
    locale: "ja_JP",
  },
  twitter: {
    card: "summary",
    title: "カジノ・インタラクション・システム",
    description: "結婚式二次会向けNFC/QRコード連動カジノゲーミングシステム",
  },
};

Next.jsの Metadata APIを使えば、型安全にメタタグを定義できます。<head> を直接操作する必要はありません。

非公開サイトの場合は robots も設定：

robots: {
  index: false,
  follow: false,
},

管理画面やテスト環境など、検索エンジンにインデックスされたくないサイトには robots: noindex, nofollow を設定しましょう。

Step 3: GA4を導入する

Google Analytics 4（GA4）は、2026年現在のWebアクセス解析のデファクトスタンダードです。

HTMLに直接書くパターン（Vite、静的HTML）：

<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Next.js App Routerのパターン：

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <head>
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
          strategy="afterInteractive"
        />
        <Script id="gtag-init" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXXXXX');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  );
}

Next.jsでの注意点：

  • 通常の <script> タグではなく next/script の Script コンポーネントを使う
  • strategy="afterInteractive" を指定することで、ページのインタラクティブ化後にスクリプトが読み込まれ、Core Web Vitalsへの悪影響を最小化できる
  • <head> 内に配置すること（<body> 内でも動作するが、<head> が推奨）

Astroのパターン：

---
// src/layouts/BaseLayout.astro
---
<html lang="ja">
  <head>
    <!-- 他のメタタグ -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Astroの場合はHTMLをそのまま書けるので、通常のGA4スニペットをそのままペーストできます。

Step 4: lang属性を正しく設定する

見落としがちですが、<html lang="ja"> は非常に重要です。

<!-- NG: デフォルトのまま -->
<html lang="en">

<!-- OK: 日本語サイトなら -->
<html lang="ja">

lang 属性が正しくないと：

  • スクリーンリーダーが英語の発音で日本語を読み上げてしまう
  • ブラウザの翻訳機能が誤動作する
  • Googleの言語判定に悪影響を与える可能性がある

ViteのテンプレートやCreate Next Appのデフォルトは lang="en" なので、日本語サイトを作ったら最初に変更すべき設定 です。

Step 5: 複数サイトのGA4データを統合する

全サイトで同じGA4測定IDを使うと、1つのプロパティに全サイトのデータが集まります。

しかし、そのままではサイトごとのアクセス数がわかりません。

解決策として、GA4 Data API（v1beta）を使い、hostnameFilter や pagePathFilter でサイト別にデータを取得する方法を採用しました。

const LP_SITES = [
  {
    key: "lp_b2b",
    name: "ポートフォリオ",
    hostnameFilter: "secure-auto-lab.com",
  },
  {
    key: "lp_game",
    name: "Synchro Number",
    hostnameFilter: "secure-auto-lab.github.io",
    pagePathFilter: "/synchro-number/",
  },
  {
    key: "lp_event",
    name: "カジノシステム",
    hostnameFilter: "wedding0406-kanami-jun.secure-auto-lab.com",
  },
];

各サイトの hostname でフィルタリングすれば、1つのGA4プロパティから個別のアクセスデータを取得できます。GitHub Pagesのようにサブディレクトリで分かれているサイトは、pagePathFilter を追加します。

🧱 壁にぶつかった瞬間と乗り越え方

「<html lang="en"> をずっと見逃していた…」

7サイトを一括で確認していた時、あるゲームサイトの <html lang="en"> に気づきました。Viteのテンプレートがデフォルトで lang="en" なのは知っていたはずなのに、変更を忘れていたのです。

1サイトずつ個別にやっていたら、おそらく永遠に気づかなかったでしょう。一括で見直すからこそ、抜け漏れに気づける — これは想定外の副次的効果でした。

Next.jsのfavicon配置場所に注意

Next.js App Routerでは public/favicon.ico ではなく、app/icon.svg に配置するのが推奨です。app/ ディレクトリに置くと、Next.jsが自動的に <link> タグを生成してくれます。

一方、Vite + ReactやAstroでは public/favicon.svg に配置して、HTMLから手動で参照する従来の方式です。

フレームワークごとの違いを把握しておかないと、「faviconが表示されない」で1時間ハマります。

この経験から学んだこと

SEO設定は「1サイトずつ」ではなく「全サイト一括」でやるのが圧倒的に効率的です。なぜなら：

  • ノウハウが頭に残っている間に全部終わる
  • サイト間で設定の一貫性が保てる
  • 抜け漏れに気づきやすい

🎓 この経験から得た3つの教訓

教訓1：「最小限のSEO」は4つだけ

完璧なSEO設定を目指すと永遠に終わりません。まずはこの4つだけ押さえれば十分です：

  1. favicon（SVG推奨）
  2. OGP + Twitter Card（最小5つのmetaタグ）
  3. GA4（測定コード2行）
  4. lang属性（<html lang="ja">）

この4つだけで、SNSシェア時のプレビュー表示、アクセス解析、アクセシビリティの基本がカバーできます。

教訓2：フレームワークが違っても「やること」は同じ

Next.js、Astro、Viteと3つの異なるフレームワークを使っていましたが、SEOで設定する内容は全く同じです。違うのは 「どこに書くか」だけ です。

フレームワークメタタグの書き方favicon配置先GA4の書き方
Next.js (App Router)Metadata APIapp/icon.svgnext/script
AstroHTMLそのままpublic/favicon.svg<script> そのまま
Vite + ReactHTMLそのままpublic/favicon.svg<script> そのまま

教訓3：GA4は「入れてから」考える

「どんなイベントをトラッキングしよう」「コンバージョンの定義は…」と考え始めると、導入自体が先延ばしになります。

まずはデフォルト設定でGA4を入れましょう。ページビュー、セッション数、ユーザー数は自動で計測されます。カスタムイベントやコンバージョン設定は、データが溜まってから考えても遅くありません。

🚀 2026年に押さえるべきSEOトレンド

基本設定ができたら、次はこれらのトレンドも意識しましょう。

Core Web Vitals：INPがFIDに代わった

2024年3月にFID（First Input Delay）がINP（Interaction to Next Paint）に正式置き換えされました。

指標測定対象良好の基準
LCP最大コンテンツの読み込み速度2.5秒以内
INPユーザー操作への応答速度200ms以内
CLSレイアウトのずれ0.1以下

FIDは最初のインタラクションだけを測定していましたが、INPはセッション全体の操作応答性を評価します。ボタンクリック、入力、スクロールなど、すべてのインタラクションが対象です。

GA4の strategy="afterInteractive" でスクリプトの読み込みタイミングを制御するのも、Core Web Vitals対策の一環です。

構造化データ（Schema.org）がAI検索で重要に

GoogleのAI Overviewsが検索結果の約15%に表示されるようになり、構造化データを実装しているサイトはAI検索での引用率が44%向上 したという調査結果があります（BrightEdge調べ）。

最低限実装したいスキーマ：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "サイト名",
  "url": "https://example.com",
  "description": "サイトの説明"
}
</script>

Article、FAQ、HowTo、Organization なども組み合わせると効果的です。

GEO（Generative Engine Optimization）の登場

従来のSEOに加え、AIによる検索エンジン（Google AI Overviews、ChatGPT検索、Perplexityなど）に最適化する「GEO」という概念が生まれています。

GEOのポイント：

  • 明確な事実の記述: 曖昧な表現を避け、具体的な数字やデータを含める
  • 構造化データ: AIがコンテンツを理解しやすくなる
  • E-E-A-T: 経験（Experience）・専門性・権威性・信頼性がさらに重視される

つまり、従来のSEOベストプラクティスを丁寧にやることが、そのままGEO対策にもなります。

💡 実践Tips・よくあるエラーと解決法

SVG faviconが表示されない場合

症状: favicon.svg を配置したのにブラウザのタブにアイコンが表示されない。

原因と対処法:

  1. MIMEタイプの指定漏れ: <link> タグに type="image/svg+xml" を追加する
<!-- NG -->
<link rel="icon" href="/favicon.svg" />

<!-- OK -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

  1. キャッシュが残っている: ブラウザはfaviconを強力にキャッシュします。Ctrl + Shift + R（ハードリロード）または favicon.svg?v=2 のようにクエリパラメータを追加してキャッシュバスト。

  2. Next.js App Routerの場合: public/ ではなく app/icon.svg に配置する。ファイル名は icon.svg 固定（favicon.svg ではない）。

Next.jsで <Script> がレンダリングされない

症状: next/script の Script コンポーネントを使っているのにGA4が動作しない。

// NG: strategy指定なし（デフォルトはafterInteractiveだが明示推奨）
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXX" />

// OK: next/scriptのScriptコンポーネントを使用
import Script from "next/script";

<Script
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
  strategy="afterInteractive"
/>

通常の <script> タグはNext.jsのApp Routerでは正しく動作しません。必ず next/script の Script コンポーネントを使いましょう。

OGPプレビューが更新されない

症状: OGPタグを修正したのに、SNSでシェアした時のプレビューが古いまま。

対処法:

  • X（旧Twitter）: Card Validator でURLを入力してキャッシュをクリア
  • Facebook: Sharing Debugger でURLをスクレイプし直す
  • Slack/Discord: URLを再投稿する（自動で再取得される）

OGPのキャッシュはプラットフォーム側で保持されているため、サーバー側の変更だけでは反映されません。

GA4が計測されているか確認する方法

デプロイ後、GA4が正しく動作しているか確認する手順：

  1. リアルタイムレポート: GA4管理画面 → レポート → リアルタイム で自分のアクセスが表示されるか確認
  2. ブラウザのDevTools: Network タブで google-analytics.com や googletagmanager.com へのリクエストが発生しているか確認
  3. Tag Assistant: Chrome拡張「Google Tag Assistant」でタグの動作状況を確認

全サイト共通のGA4チェックリスト

✅ <html lang="ja"> が設定されている
✅ GA4の測定IDが正しい（G-XXXXXXXXXX形式）
✅ scriptタグがhead内にある
✅ Next.jsの場合、next/scriptのScriptコンポーネントを使っている
✅ 非公開サイトにはrobots noindex,nofollowを設定
✅ OGPのog:titleとog:descriptionが設定されている
✅ twitter:cardが設定されている（summary or summary_large_image）
✅ faviconがSVGで、type="image/svg+xml"が指定されている

❓ よくある質問（FAQ）

Q1: GA4の測定IDは全サイト同じでいいの？

A: はい、全サイトで同じ測定IDを使えます。GA4はデフォルトで hostname を記録するので、レポート画面やData APIでサイト別にフィルタリングできます。ただし、サイト数が非常に多い場合（20以上）は、プロパティを分けた方が管理しやすいかもしれません。

Q2: .ico ファイルはもう不要？

A: 完全に不要ではありません。IE11やごく古いブラウザでは .ico しか認識されません。ただし、2026年現在のモダンブラウザはすべてSVG faviconをサポートしているので、ターゲットユーザーがモダンブラウザのみなら .svg だけで十分です。念のため .ico も置いておきたい場合は、32x32のフォールバックとして追加しましょう。

Q3: OGP画像は必須？

A: 必須ではありません。og:image がなくてもタイトルと説明文のテキストベースのプレビューは表示されます。ただし、画像付きの方がクリック率が大幅に上がるため、本格的に集客したいサイトでは設定を推奨します。推奨サイズは 1200x630px（16:9比率）です。

📝 まとめ：今日からできるアクションプラン

この記事で解説した内容をまとめます：

  1. SVG favicon: 64x64の viewBox でSVGを作成し、type="image/svg+xml" で読み込む
  2. OGP + Twitter Card: 最小5つの meta タグ（og:title、og:description、og:type、og:locale、twitter:card）を追加
  3. GA4: 測定コードを <head> に追加（Next.jsは next/script を使用）
  4. lang属性: <html lang="ja"> を確認
  5. robots: 非公開サイトには noindex, nofollow を設定

今日からできる具体的なアクション：

まずは自分のサイトを1つ選んで、上記5つの設定を確認してみてください。 1つのサイトで慣れたら、残りのサイトにも同じパターンで適用するだけです。 所要時間は1サイトあたり約10分です。

🙏 おわりに：小さな設定の積み重ねが信頼を作る

最後まで読んでいただき、ありがとうございました。

faviconやOGPは、ユーザーが直接「すごい」と感じる機能ではありません。でも、これらが正しく設定されていないサイトは、どこか「未完成」な印象を与えます。

SNSでシェアした時にタイトルと説明文がきれいに表示される。ブラウザのタブにオリジナルのアイコンが表示される。 — この小さな積み重ねが、サイトの信頼感を作ります。

そして何より、GA4を入れておけば「誰が見に来てくれているのか」がわかります。データがあれば、次に何を改善すべきかが見えてきます。

完璧を目指す必要はありません。まずは最小限の設定から始めましょう。

あなたのサイトが、もっと多くの人に届くことを願っています。

📚 参考リンク

この記事が役に立ったら、ぜひシェアをお願いします！

あなたのシェアが、同じ悩みを持つ誰かの助けになります。

AD — Secure Auto Lab
アイデアをプロダクトに

アプリ・サービス開発を依頼しませんか？

Webアプリ、モバイルアプリ、LP制作からマネタイズ設計まで一貫対応。PMとしてプロジェクトを完遂する力があります。

React / Next.js iOS / Android 課金実装 MVP開発
無料で相談する → サービス詳細を見る
情報処理安全確保支援士 (RISS) プロジェクトマネージャ (PM)

この記事をシェア

X Bluesky B! はてブ

著者を支援

OFUSE
投げ銭で応援
Note
有料記事を購入
Amazon
ほしい物リスト

tinou

情報処理安全確保支援士とPMの資格を使ってITコンサルタントとして働く傍ら、自宅で自動化とセキュリティを研究しているエンジニア