Zenn
🐼

Next.jsでのOGP設定

2024/06/24に公開
Next.js
React
Twitter
Open Graph protocol
X
tech

はじめに

Next.jsを使用してウェブサイトを開発する際、ソーシャルメディア上で共有されたときに魅力的に見えるよう、Open Graph Protocol（OGP）の設定は非常に大事かと思います。しかし、設定が正しく行われていても、期待通りに動作しないことがあります。この記事では、Next.jsでのOGP設定方法と、設定がうまくいかないときに確認するリストを紹介します。

Next.jsでのOGP設定方法

Next.jsでOGPを設定するには、<Head>コンポーネントを使用して、必要なメタタグをページの<head>セクションに追加します。以下は基本的な設定例です。

home.tsx
import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>あなたのサイトのタイトル</title>
        <meta property="og:title" content="あなたのサイトのタイトル" />
        <meta property="og:description" content="あなたのサイトの説明" />
        <meta property="og:image" content="あなたのサイトの画像URL" />
        <meta property="og:url" content="あなたのサイトのURL" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name='twitter:title' content='あなたのサイトのタイトル' />
        <meta name='twitter:description' content='あなたのサイトの説明' />
        <meta name='twitter:image' content='画像URL' />
      </Head>
      {/* ページの内容 */}
    </>
  );
}

各メタタグ説明

  • Open Graph メタタグ

    • Open Graph (OG) メタタグは、ソーシャルメディアプラットフォーム上でウェブページがどのように表示されるかを制御するために使用されます。Facebookを始めとする多くのソーシャルメディアがこれを採用しており、ウェブページがシェアされた際にリッチなオブジェクトとして表示されます。以下は、主要なOpen Graphメタタグの説明です：

  • og:title:

    • タグ: <meta property="og:title" content="タイトル" />
    • 説明: ソーシャルメディアに表示されるページのタイトル。検索結果のタイトルとは異なり、ソーシャルメディアユーザーに最適化されたものであるべきです。

  • og:type:

    • タグ: <meta property="og:type" content="website" />
    • 説明: ページの種類を指定します。他にも article、video.movie などがあります。通常、ブログやニュースサイトは article を使用します。

  • og:url:

    • タグ: <meta property="og:url" content="https://example.com/page" />
    • 説明: オブジェクトの永続的なIDとして機能し、実際のページのURLを指定します。

  • og:image:

    • タグ: <meta property="og:image" content="https://example.com/image.jpg" />
    • 説明: ソーシャルメディアで共有された際に表示される画像のURL。画像は魅力的で、内容を象徴しているものが好ましいです。

  • og:description:

    • タグ: <meta property="og:description" content="ページの説明文" />
    • 説明: ソーシャルメディアで共有される際に表示されるページの短い説明。SEOのメタディスクリプションと異なり、よりエンゲージメントを促す内容が求められます。

  • og:locale:

    • タグ: <meta property="og:locale" content="ja_JP" />
    • 説明: ページのローカライゼーション設定。日本語ページの場合は ja_JP を使用します。

  • Twitter Cards メタタグ

    • Twitter CardsはTwitterでリンクが共有される際に、メディアリッチな表示を可能にするためのメタタグです。以下は、主要なTwitter Cardsメタタグの説明です：

  • twitter:card:

    • タグ: <meta name="twitter:card" content="summary_large_image" />
    • 説明: カードのタイプを指定します。画像付きの大きなカードを表示するsummary_large_image、テキスト中心のsummaryなどがあります。

  • twitter:site:

    • タグ: <meta name="twitter:site" content="@example" />
    • 説明: ウェブサイトまたはアプリケーションのTwitterハンドル。

  • twitter:title:

  • タグ: <meta name="twitter:title" content="ページのタイトル" />

  • 説明: Twitterカードに表示されるタイトル。

  • twitter:description:

    • タグ: <meta name="twitter:description" content="ページの説明文" />
    • 説明: Twitterカードに表示される説明文。キャッチーでユーザーの興味を引く内容が望ましいです。

OGP設定がうまくいかないときに確認するリスト

  1. メタタグが正しく設定されているか: ソースコードを確認し、必要なメタタグが正しく設定されているかを確認してください。
  2. 画像のURLが正しいか: OGP画像のURLが正しく、外部からアクセス可能であることを確認してください。
  3. 画像のサイズ: 画像がソーシャルメディアプラットフォームの推奨するサイズに合っているかを確認してください、Xなどは1200x628ピクセルが推奨らしいです。
  4. キャッシュの問題: ソーシャルメディアプラットフォームやCDNによるキャッシュが原因で古い情報が表示されていないかを確認してください。
  5. セキュリティ設定: Cloudflareなどのセキュリティサービスで、ソーシャルメディアのクローラーがブロックされていないかを確認してください。

※(自分は、Cloudflareで海外からのアクセスをブロックしていたのですが、それが原因で表示されませんでした)

確認方法

先に下記のCard validatorを使って確認するのがおすすめです。
URLを入力するだけで確認できます。
問題なければ実際にX(Twitter)などで確認しましょう。

https://cards-dev.twitter.com/validator

Discussion