🌿 えふてぃブログ

【第2章】Meta タグとOGP設定でSNSシェアを最適化！Astroブログで実装してみた

技術

こんにちは、えふてぃです。

SEO対策シリーズの第2章として、今回は Meta タグとOGP設定 について実装してみた話をします。

前回の記事で「技術的SEO」の重要性について触れましたが、その中でも特に重要なのが、検索結果やSNSでのシェア時の見栄えを改善する Meta タグと OGP（Open Graph Protocol）の設定です。

この記事では、実際に私が Astro ブログに実装した内容を元に、コード例や試行錯誤のプロセスを交えながら解説していきます。

Meta タグと OGP って何？

まず最初に、「Meta タグ」と「OGP」について簡単に説明しておきます。

Meta タグとは

Meta タグは、HTMLの <head> 部分に記述する、ページの情報を示すタグのことです。

主に以下のような情報を記述します：

  • タイトル（title）: ページのタイトル
  • ディスクリプション（description）: ページの説明文
  • キーワード（keywords）: ページの関連キーワード（現在はあまり重要視されていない）
  • ビューポート（viewport）: レスポンシブデザイン用の設定

これらの情報は、Google などの検索エンジンがページを理解するために使われます。

OGP（Open Graph Protocol）とは

OGP は、Facebook が提唱した、SNS でシェアされた際のプレビュー表示を最適化するためのプロトコルです。

📝 OGP の役割

X（旧Twitter）や Facebook、LINE などでリンクをシェアした際に、タイトル・説明文・画像が適切に表示されるのは、この OGP のおかげです。

主な OGP タグ：

  • og:title: シェア時に表示されるタイトル
  • og:description: シェア時に表示される説明文
  • og:image: シェア時に表示される画像
  • og:url: ページのURL
  • og:type: ページの種類（website、article など）

参考リンク:

なぜ Meta タグと OGP が重要なのか

1. 検索結果のクリック率に影響する

Google で検索した際、タイトルと説明文が表示されます。

ここで 魅力的なタイトルと説明文 があると、クリック率が上がります。

逆に、Meta タグを設定していないと、Google が勝手に本文から抜粋した文章を表示してしまい、意図しない内容が表示されることもあります。

2. SNS でのシェア時の見栄えが良くなる

OGP を設定していないと、SNS でシェアされた際に以下のような問題が起こります：

  • タイトルがただの URL になる
  • 画像が表示されない
  • 説明文が表示されない

OGP を設定することで、タイトル・説明文・画像が適切に表示される ようになり、クリック率が大幅に向上します。

👤

OGP を設定していないと、どう見えるの？

タイトルがただの URL文字列になり、画像も表示されません。見た目が地味になるので、クリックされにくくなります。

🤖

3. Google が正しくページを理解できる

Meta タグを正しく設定することで、Google がページの内容を正確に理解できるようになります。

これにより、適切な検索キーワードで上位表示される可能性が高まります。

Astro ブログに実装してみた

それでは、実際に Astro ブログで Meta タグと OGP を実装した手順を紹介します。

環境

  • Astro: 4.x
  • Node.js: 20.x

本記事は上記の環境で検証しています。

実装の流れ

実装は以下の流れで進めました：

  1. 共通の Meta タグを BaseHead.astro に実装
  2. OGP タグを追加
  3. X（旧Twitter）Card の設定を追加
  4. 記事ごとに動的に Meta 情報を変更できるようにする

1. 共通の Meta タグを実装する

まず、すべてのページで共通して使う Meta タグを BaseHead.astro に実装しました。

---
// src/components/BaseHead.astro
import type { ImageMetadata } from 'astro';
import FallbackImage from '@/assets/common/default-ogp.png';
import { SITE_TITLE } from '@/consts';

interface Props {
  title: string;
  description: string;
  image?: ImageMetadata;
}

const canonicalURL = new URL(Astro.url.pathname, Astro.site);

const { title, description, image = FallbackImage } = Astro.props;
---

<!-- 基本的な Meta タグ -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />

<!-- Canonical URL -->
<link rel="canonical" href={canonicalURL} />

<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content={SITE_TITLE} />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image.src, Astro.site)} />

<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content={Astro.url} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(image.src, Astro.site)} />
💡 ポイント

image はオプショナルにして、デフォルト画像を設定しておくと便利です。記事ごとに個別の画像を指定しない場合は、デフォルト画像が使われます。

画像の型について:

この実装では、画像を文字列パスではなく ImageMetadata 型で扱っています。これは Astro の画像最適化機能を活用するためです。

ImageMetadata 型を使うことで：

  • 画像の最適化（自動リサイズ、フォーマット変換など）が適用される
  • 型安全性が向上する
  • image.src で画像のパスを取得できる

デフォルト画像は @/assets/common/default-ogp.png のように、プロジェクト内の画像ファイルをインポートして使用します。

2. レイアウトファイルで BaseHead を使う

次に、各ページのレイアウトファイルで BaseHead.astro を読み込みます。

---
// src/layouts/BlogPost.astro
import type { CollectionEntry } from 'astro:content';
import BaseHead from '@/components/BaseHead.astro';

type Props = CollectionEntry<'blog'>['data'];

const { title, description, pubDate, heroImage } = Astro.props;
---

<!doctype html>
<html lang="ja">
  <head>
    <BaseHead title={title} description={description} image={heroImage} />
  </head>
  <body>
    <!-- 記事の内容 -->
  </body>
</html>

3. 記事ごとに Meta 情報を指定する

各記事の Frontmatter で、Meta 情報を指定できるようにしました。

---
title: '【第2章】Meta タグとOGP設定でSNSシェアを最適化！Astroブログで実装してみた'
description: 'SEO対策の第2章として、Meta タグとOGP設定をAstroブログに実装してみました。'
pubDate: 2025-11-03T20:00:00+09:00
heroImage: '@/assets/blog/article-image.png'
categories: ['技術']
---

heroImage には、エイリアス（@/）を使ってプロジェクト内の画像ファイルを指定します。これにより、相対パスの煩雑さを避けて、型安全に画像を扱えます。

この情報が、BlogPost.astro を通じて BaseHead.astro に渡され、Meta タグに反映されます。

実装する際に気をつけたこと

実装する際に、特に注意したポイントを共有します。

1. OGP 画像は絶対URLに変換する

OGP 画像の URL は、Meta タグに出力する際に 絶対URL として指定する必要があります。SNSのクローラーは相対パスを正しく解決できないため、必ず絶対URLに変換してから出力します。

実装方法:

<meta property="og:image" content={new URL(image.src, Astro.site)} />

ImageMetadata 型の画像オブジェクトから .src でパスを取得し、new URL(image.src, Astro.site) を使って絶対URLに変換します。Astro.site はサイトのベースURLで、これと組み合わせることで完全なURLが生成されます。

画像の指定方法:

記事の Frontmatter では、エイリアス（@/）を使って画像を指定します：

heroImage: '@/assets/blog/example.png'

これにより、プロジェクトルートからの相対パスを気にせず、型安全に画像を扱えます。Astro の Content Collection がエイリアスを解決し、自動的に ImageMetadata 型のオブジェクトとして読み込んでくれます。

2. X Card（旧Twitter Card）の種類を選ぶ

X Card には、以下の種類があります：

  • summary: 小さい画像で表示
  • summary_large_image: 大きい画像で表示

画像を目立たせたい場合は、summary_large_image を使うのがおすすめです。

<meta property="twitter:card" content="summary_large_image" />
📝 Xの表示仕様について

X（旧Twitter）では、URLを投稿した際にタイトルまでしか表示されません（説明文は表示されない仕様です）。一方、LINEや Facebook などでは、タイトル・説明文・画像がすべて表示されます。これはXの表示上の仕様であり、OGP設定の問題ではありません。

3. デフォルト画像の準備

記事ごとに個別の OGP 画像を用意するのは手間がかかるので、デフォルト画像を用意しておくと便利です。

私は、サイトのロゴを元にした汎用的な OGP 画像（1200x630px）を作成して、src/assets/common/default-ogp.png に配置し、BaseHead.astro でインポートして使用しています。

Astro の画像最適化機能を活用するため、public フォルダではなく src/assets フォルダに配置するのがおすすめです。

📝 OGP 画像の推奨サイズ

推奨サイズ: 1200 x 630px
最小サイズ: 600 x 315px
ファイル形式: PNG または JPG

実装後の確認方法

実装後、正しく表示されるかを確認する方法を紹介します。

1. ブラウザの開発者ツール

ブラウザの開発者ツール（F12）で、<head> 内の Meta タグが正しく出力されているか確認します。

2. X Card Validator（旧Twitter Card Validator）

X Card の設定が正しいかを確認できるツールです。

X Card Validator

ここに URL を入力すると、Meta タグが正しく設定されているかを検証できます。

📝 注意

以前はプレビュー機能がありましたが、現在は廃止されています。Meta タグの検証のみ可能です。実際の表示を確認したい場合は、Xに投稿してテストするか、他のSNSの確認ツールを利用してください。

3. その他の確認ツール

Facebook シェアデバッガーなど、他のSNSでもOGP情報を確認できるツールが提供されています。必要に応じて活用してみてください。

実装してみて感じたこと

Meta タグと OGP を実装してみて、以下のことを感じました：

良かった点

  • SNS でのシェアが見栄えが良くなった: X（旧Twitter）や Facebook、LINE でシェアした際、タイトル・説明文・画像が適切に表示されるようになりました。
  • 検索結果のクリック率が向上した: Google の検索結果で、タイトルと説明文が意図した通りに表示されるようになりました。
  • 実装自体は簡単: 一度テンプレートを作ってしまえば、あとは記事ごとに情報を渡すだけなので、運用も楽です。

まとめ

Meta タグと OGP 設定は、SEO 対策の中でも すぐに効果が実感できる施策 です。

実装も比較的簡単なので、ブログを運営している方はぜひ試してみてください。

次回は「第3章：構造化データ（JSON-LD）の実装」として、検索結果に記事情報を表示させる方法を解説します！

💡 次回予告

次回は「第3章：構造化データ（JSON-LD）の実装」として、検索結果に記事情報や著者情報を表示させる方法を実装します。実際のコード例なども交えて解説する予定です。

このブログが面白いと思った方は、是非とも下のボタンをクリックして、記事シェアやフォローをしていただけると嬉しいです！

この記事をシェア: はてブ

📚 関連記事

Claude Code CLIのカスタムコマンドでブログ記事の品質チェックを効率化した話

Claude Code CLIのカスタムコマンドでブログ記事の品質チェックを効率化した話

Claude Codeのカスタムコマンド機能を使って、ブログ記事の事実確認を自動化する方法を紹介。技術記事や雑記記事の信頼性を高めるための実装例を解説します。

技術
【第1章】SEO対策とは？個人ブログ開発者が検索順位を上げるために調べた4つの施策

【第1章】SEO対策とは？個人ブログ開発者が検索順位を上げるために調べた4つの施策

SEO対策って何をすればいいの？と思って調べてみた話をまとめました。検索エンジンで上位表示されるために重要な4つの施策（コンテンツ最適化、技術的SEO、UX、外部対策）とGoogleの評価基準（E-E-A-T）を解説します。

技術 ショート
Claude Code CLIのカスタムコマンドでブログ運営を効率化する方法

Claude Code CLIのカスタムコマンドでブログ運営を効率化する方法

Claude Code CLIのカスタムコマンドで、記事作成からレビューまで自動化したら爆速になった！実際に作った「ブログ作成を支援」「ブログのレビュー」コマンドのコードと使い方を全部公開。ブログ運営を効率化したい人におすすめです。

技術
Astroブログでダークモード実装してみた話【FOUC対策からアクセシビリティまで】

Astroブログでダークモード実装してみた話【FOUC対策からアクセシビリティまで】

Astroブログにダークモード実装した時にぶつかったFOUC問題、LocalStorageとの連携、アクセシビリティ対応まで、実際に躓いたポイントと解決方法を全部コード付きで解説します。個人開発でダークモード入れたい人は必見です！

技術
← 記事一覧に戻る