Open Graph Protocol対応

2025-04-07
3 min read
Tags:
Tech,
Web

Open Graph Protocolとは

Open Graph Protocol(OGPとも呼ばれます)は、Webページの内容をSNSなどで共有する際に、正確な情報を表示するための仕組みです。 2010年にFacebookが開発し、現在は多くのWebサイトで採用されています。

OGPでは、HTMLのhead内にmeta要素を配置し、「og:」というプレフィックスを持つプロパティを使用して、ページの様々な情報を定義します。主な要素としては、ページのタイトル、ページの説明、サムネイル画像のURL、正規URLなどがあります。

これらの情報を適切に設定することで、FacebookやTwitter、LINEなどのSNSでリンクがシェアされた際に、単なるURLではなく、タイトル、説明文、画像を含む魅力的なプレビューカードが表示されます。

このブログの対応

記事ページのメタ情報を管理しているlib/metadata.tsを修正してOGPに対応するヘッダを追加するロジックを入れました。

export function generateArticleMetadata(
  article: Article & { path?: string },
): Metadata {
  // pathがある場合はURLを生成
  const url = article.path
    ? generateArticleUrl(article.date, article.path)
    : undefined;
  // OGP画像のURL
  const ogImageUrl = generateOgImageUrl();

  return {
    title: article.title,
    description: article.description,
    authors: [{ name: article.author || siteConfig.author }],
    // OGP設定
    openGraph: {
      siteName: siteConfig.sitename,
      title: article.title,
      description: article.description,
      type: "article",
      ...(url && { url }),
      images: [
        {
          url: ogImageUrl,
          width: 1200,
          height: 630,
          alt: siteConfig.sitename,
        },
      ],
    },
    // 他にも必要なメタデータがあれば追加可能
  };
}