TL;DR
ユーザーがウェブサイトを共有したときに、その見た目と意味を制御するために、OGP はウェブサイトに欠かせない要素となっています。この記事では、OGP の設定方法を、Next.js と TypeScript を使用して詳しく見ていきましょう。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.3 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
OGP の説明
OGP（Open Graph Protocol）は、ウェブページがソーシャルメディアプラットフォーム上でどのように表現されるかを定義するためのプロトコルです。これにより、ページのタイトル、説明、イメージ等を適切に設定し、ユーザーがウェブサイトを共有したときの見た目を制御することができます。
OGP は、Facebook がソーシャルメディア上でのコンテンツの表示を制御するために開発したものです。そして今では、Facebook だけでなく、多くのソーシャルメディアプラットフォームや検索エンジンがこれを利用しています。
OGP の設定に関して最新の情報を得るためには、公式 OGP ウェブサイト https://ogp.me/ をチェックすることをおすすめします。また、Google の構造化データテストツール https://search.google.com/structured-data/testing-tool を使うと、ウェブページの OGP タグが適切に設定されているかを確認することができます。
OGP の設定方法
では、実際に TypeScript を使って OGP を設定してみましょう。次は簡単な例です。components/Meta.tsx を作成し、次のように記述します。Pages Router を使うバージョンです。
// components/Meta.tsx
import React from 'react'
import Head from 'next/head'
interface MetaProps {
title?: string
description?: string
ogImage?: string
ogUrl?: string
siteName?: string
favicon?: string
twitterCard?: string
twitterSite?: string
appleTouchIcons?: { size: string; href: string }[]
canonicalUrl?: string
lang?: string
isHomePage?: boolean
}
const Meta = ({
title = 'タイトル',
description = '説明',
ogImage = '/images/default-og-image.png',
ogUrl = 'https://xxxx',
siteName = 'サイトの名前',
favicon = '/favicon.ico',
twitterCard = 'summary',
twitterSite = '@your-default-twitter-handle',
appleTouchIcons = [
{ size: '32x32', href: '/images/default-apple-touch-icon-32x32.png' },
{ size: '64x64', href: '/images/default-apple-touch-icon-64x64.png' },
{ size: '180x180', href: '/images/default-apple-touch-icon-180x180.png' },
],
canonicalUrl = 'https://xxxx',
lang = 'ja_JP',
isHomePage = false,
}: MetaProps) => {
const pageTitle = isHomePage ? siteName : `${title} - ${siteName}` // 修正
return (
<Head>
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta property="og:type" content="article" />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />
<meta property="og:url" content={ogUrl} />
<meta property="og:image" content={ogImage} />
<meta property="og:site_name" content={siteName} />
<meta property="og:locale" content={lang} />
<meta name="twitter:card" content={twitterCard} />
<meta name="twitter:site" content={twitterSite} />
<meta name="twitter:image" content={ogImage} />
<link rel="shortcut icon" href={favicon} />
{appleTouchIcons.map(({ size, href }) => (
<link key={size} rel="apple-touch-icon" sizes={size} href={href} />
))}
<link rel="canonical" href={canonicalUrl} />
<link rel="icon" href={favicon} />
</Head>
)
}
export default Meta
トップページ以外では次のように設定します。
import Meta from '../components/Meta'
export default function Home() {
return (
<>
<Meta title="BLOG" description="BLOG ページです。" ogImage="" ogUrl="" canonicalUrl="https://xxxx" />
{/* 他のページコンテンツ */}
</>
)
}
トップページのコンポーネントで Meta コンポーネントを呼び出す場合は、isHomePage を true に設定しているかどうかを確認してください。
import Meta from '../components/Meta'
export default function Home() {
return (
<>
<Meta isHomePage={true} />
{/* 他のページコンテンツ */}
</>
)
}
このように、Meta コンポーネントを使用する各ページで、isHomePage prop を適切に設定することが重要です。それにより、Meta コンポーネント内の条件分岐が適切に機能し、ページタイトルが期待通りに設定されます。