• #SEO
  • #OGP
  • #SNS
  • #メタタグ
  • #ソーシャルメディア
未分類

完全なOGP設定の必要性と実装方法

本プロジェクトでの実装方針

このプロジェクト（log.eurekapu.com）では、以下の方針で完全なOGP設定を実装しています：

実装内容

  1. 全ページで完全なOGP設定を実装
    • [...slug].vue: 動的記事ページ（Markdown）
    • index.vue: トップページ
    • その他の個別Vueページ
  2. 設定しているOGPフィールド
    • 基本OGP: ogTitle, ogDescription, ogType, ogUrl, ogImage, ogSiteName, ogLocale
    • 記事固有: articlePublishedTime, articleModifiedTime, articleAuthor, articleTag
    • Twitter Card: twitterCard, twitterTitle, twitterDescription, twitterImage
  3. 実装済み
    • すべてのOGPフィールドが設定済み
    • フロントマターから動的に生成（Markdown記事）
    • 絶対URLで画像とURLを指定

実装理由

  • SNSシェア時の見栄え最適化：クリック率（CTR）向上
  • ブランディング：プロフェッショナルな印象
  • AI検索対応：ChatGPT SearchやPerplexityでの認識向上
  • メッセージアプリ対応：Slack、Discord、LINEでのカード表示

なぜ完全なOGP設定が必要なのか

1. SNSでのシェア時の見栄えを最適化

TwitterやFacebook、LinkedIn、Slackなどでリンクをシェアした際、リンクプレビューカード が表示されます。OGP（Open Graph Protocol）を設定することで、このカードの表示内容を制御できます。

OGP未設定の場合：

  • タイトルが不適切（ページタイトルそのまま）
  • 説明文が自動抽出された意味不明な文章
  • 画像が表示されない、または意図しない画像
  • サイト名が表示されない

OGP設定済みの場合：

  • 魅力的なタイトル
  • 簡潔でわかりやすい説明文
  • 視覚的に訴求する画像
  • ブランド名（サイト名）が明示

→ クリック率（CTR）が大幅に向上します。

2. ブランディングとトラフィック増加

適切なOGP設定により：

  • SNSでシェアされやすくなる
  • プロフェッショナルな印象を与える
  • サイトへの流入が増加
  • ブランド認知度が向上

3. AI検索エンジンへの対応

ChatGPT Search、Perplexity、Google SGEなどのAI検索エンジンも、OGPメタデータを参照してコンテンツを理解します。

4. メッセージアプリでの表示最適化

Slack、Discord、LINE、iMessageなどでも、OGPが正しく設定されていると、リンクが魅力的なカードとして展開されます。

どのように実装するか

OGPの基本メタタグ

以下のメタタグを<head>内に記述します：

<!-- 基本的なOGPタグ -->
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://log.eurekapu.com/page-path" />
<meta property="og:image" content="https://log.eurekapu.com/images/og-image.jpg" />
<meta property="og:site_name" content="log.eurekapu.com" />
<meta property="og:locale" content="ja_JP" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの説明文" />
<meta name="twitter:image" content="https://log.eurekapu.com/images/og-image.jpg" />

必須フィールド

プロパティ説明例
og:titleページのタイトル（55文字以内推奨）Nvidiaの堀：競合他社が直面する「無理ゲー」な9つの壁
og:descriptionページの説明（155文字以内推奨）Nvidiaには何重もの「防御壁」があり、正面から戦って勝つのは実質不可能である理由を解説
og:typeコンテンツタイプwebsite（トップページ）、article（記事）
og:url絶対URL（必須）https://log.eurekapu.com/blog/nvidia-moat
og:image絶対URLの画像https://log.eurekapu.com/images/og-image.jpg
og:site_nameサイト名log.eurekapu.com

推奨フィールド（記事の場合）

<!-- 記事固有のメタデータ -->
<meta property="article:published_time" content="2025-11-27T00:00:00+09:00" />
<meta property="article:modified_time" content="2025-11-27T00:00:00+09:00" />
<meta property="article:author" content="log.eurekapu.com" />
<meta property="article:tag" content="Nvidia" />
<meta property="article:tag" content="AI" />

OGP画像の推奨仕様

  • 推奨サイズ: 1200×630px（アスペクト比 1.91:1）
  • 最小サイズ: 600×315px
  • 最大ファイルサイズ: 8MB以内
  • フォーマット: JPG、PNG（PNGは透過非対応）
  • 絶対URLで指定（相対パスは不可）

実装コード

トップページ（index.vue）の実装（実装済み）

<script setup>
useSeoMeta({
  title: 'log.eurekapu.com - 日々の学びを記録する',
  description: '日々の学びや発見を記録していく個人ログサイト。技術メモ、学習記録、気づきなどを綴っています。',
  ogTitle: 'log.eurekapu.com - 日々の学びを記録する',
  ogDescription: '日々の学びや発見を記録していく個人ログサイト。技術メモ、学習記録、気づきなどを綴っています。',
  ogType: 'website',
  ogUrl: 'https://log.eurekapu.com/',
  ogImage: 'https://log.eurekapu.com/favicon.svg',
  ogSiteName: 'log.eurekapu.com',
  ogLocale: 'ja_JP',
  twitterCard: 'summary',
  twitterTitle: 'log.eurekapu.com - 日々の学びを記録する',
  twitterDescription: '日々の学びや発見を記録していく個人ログサイト。技術メモ、学習記録、気づきなどを綴っています。',
  twitterImage: 'https://log.eurekapu.com/favicon.svg',
})
</script>

動的記事ページ（...slug.vue）の実装（実装済み）

<script setup lang="ts">
import { computed } from "vue"
import { queryCollection } from "#imports"

const route = useRoute()
const docPath = computed(() => {
  const normalized = route.path.replace(/\/$/, "")
  return normalized === "" ? "/" : normalized
})

const { data: doc } = await useAsyncData(
  `content-${docPath.value}`,
  () => queryCollection("pages").path(docPath.value).first(),
  { watch: [docPath] }
)

useSeoMeta({
  title: () => doc.value?.title || 'ページが見つかりません',
  description: () => doc.value?.description || '',
  ogTitle: () => doc.value?.title || 'ページが見つかりません',
  ogDescription: () => doc.value?.description || '',
  ogType: 'article',
  ogUrl: () => `https://log.eurekapu.com${docPath.value}`,
  ogImage: 'https://log.eurekapu.com/favicon.svg',
  ogSiteName: 'log.eurekapu.com',
  ogLocale: 'ja_JP',
  twitterCard: 'summary',
  twitterTitle: () => doc.value?.title || 'ページが見つかりません',
  twitterDescription: () => doc.value?.description || '',
  twitterImage: 'https://log.eurekapu.com/favicon.svg',
  articleAuthor: 'log.eurekapu.com',
  articlePublishedTime: () => doc.value?.publishedAt || '',
  articleModifiedTime: () => doc.value?.publishedAt || '',
  articleTag: () => doc.value?.tags || [],
})
</script>

個別ブログページ（Vue）での実装例

<script setup lang="ts">
useSeoMeta({
  title: '記事タイトル',
  description: '記事の説明...',
  ogTitle: '記事タイトル',
  ogDescription: '記事の説明...',
  ogType: 'article',
  ogUrl: 'https://log.eurekapu.com/blog/example',
  ogImage: 'https://log.eurekapu.com/favicon.svg',
  ogSiteName: 'log.eurekapu.com',
  ogLocale: 'ja_JP',
  twitterCard: 'summary_large_image',
  twitterTitle: '記事タイトル',
  twitterDescription: '記事の説明...',
  twitterImage: 'https://log.eurekapu.com/favicon.svg',
  articlePublishedTime: '2025-11-27',
  articleModifiedTime: '2025-11-27',
  articleAuthor: 'log.eurekapu.com',
  articleTag: ['タグ1', 'タグ2'],
})
</script>

検証方法

1. Facebook Sharing Debugger

2. Twitter Card Validator

3. LinkedIn Post Inspector

4. OGP確認ツール

5. ブラウザDevTools

// ページのOGPタグを確認
document.querySelectorAll('meta[property^="og:"]')

よくある間違い

❌ 相対URLを使用

// NG
ogImage: '/images/og-image.jpg'
ogUrl: '/blog/article'

✅ 絶対URLを使用

// OK
ogImage: 'https://log.eurekapu.com/images/og-image.jpg'
ogUrl: 'https://log.eurekapu.com/blog/article'

❌ og:imageが欠落

// NG - 画像がないとカードが貧弱
useSeoMeta({
  ogTitle: 'タイトル',
  ogDescription: '説明',
})

✅ og:imageを必ず設定

// OK
useSeoMeta({
  ogTitle: 'タイトル',
  ogDescription: '説明',
  ogImage: 'https://log.eurekapu.com/favicon.svg',
})

まとめ

完全なOGP設定は：

  • SNSでのシェア時の見栄えを劇的に改善
  • クリック率（CTR）を向上させる
  • ブランディングとトラフィック増加に貢献
  • 絶対URLで画像とURLを指定することが必須

本プロジェクトでは：

  • すべてのページに完全なOGP設定が実装済み
  • フロントマターから動的に生成（Markdown記事）
  • OGP、Twitter Card、記事固有メタデータをすべて設定
  • 絶対URLで画像とURLを指定