Zenn
🤖

Next.jsのOGP画像設定

に公開
Next.js
tech

OGP 画像とは

OGP 画像（Open Graph Protocol 画像）とは、ウェブページを SNS やメッセージアプリでシェアした際に表示されるサムネイル画像のことです。OGP は、Facebook が提唱したプロトコルで、ウェブページが SNS でどのように表示されるかを制御するためのメタデータを定義します。

とのことです。OGP 画像を設定することで、クリック率が上がることが期待できます。

Next.js の Page Router と App Router の違い

OGP 画像は HTML 内の<meta>タグを使って指定されます。しかし、React コンポーネントでは、 HTML の <head> 要素を直接操作することはできません。

そこで使用されるのが、<Head>コンポーネントです。

ex）layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <Head>
        <link rel="icon" href="/assets/icon.ico" />
        <meta property="og:type" content="website" />
	...
      </Head>
      <body className="bg-[#333] m-0 font-['Hiragino_Kaku_Gothic_ProN']">
        {children}
      </body>
    </html>
  );
}

このようにすることで、html ファイルと同様に meta データを設定できます。

というか、できました。Page Router で使えた Head コンポーネントは 実は App Router では使うことができません。

App Router における OGP 画像の設定方法

じゃあどうすれば良いのかというと、meta 情報は以下のように layout.tsx 内で定義してやります。

ex）layout.tsx
export const metadata = {
  title: "コピっと！",
  description: "PC スマホ ログイン不要で自由にコピペができます",
  icons: {
    icon: "/assets/icon.ico",
  },
  openGraph: {
    type: "website",
    title: "コピっと！~デバイス間で文字列を簡単に移動できるサイト~",
    description:
      "PC←→スマホ ログイン不要で自由にコピペができます。もうSNSアカウントを一回経由する必要はありません",
    siteName: "コピっと！",
    url: "https://www.copitto.com/",
    images: {
      url: "/assets/ogp.png",
      type: "image/png",
      width: 1200,
      height: 630,
    },
  },
  twitter: {
    type: "website",
    title: "コピっと！~デバイス間で文字列を簡単に移動できるサイト~",
    description:
      "PC←→スマホ ログイン不要で自由にコピペができます。もうSNSアカウントを一回経由する必要はありません",
    siteName: "コピっと！",
    url: "https://www.copitto.com/",
    images: {
      url: "/assets/ogp.png",
      type: "image/png",
      width: 1200,
      height: 630,
    },
    card: "summary",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="bg-[#333] m-0 font-['Hiragino_Kaku_Gothic_ProN']">
        {children}
      </body>
    </html>
  );
}

これで全体に meta データが適用されるようになります。ちなみに、個々のページに適用したい場合は、page.tsx に定義してやると良いです。

見た目は以下の通り ↓
discordに貼った時の見た目

meta データの詳細

openGraph メタタグ

Open Graph（OGP）は、Facebook をはじめとするソーシャルメディアプラットフォームが Web ページの情報を正しく表示するための規格です。

  1. type: "website"
    Web ページの種類を示します。この場合、ページのタイプは「ウェブサイト」です。他にも article や video などのタイプがあります。

  2. title: "コピっと！~デバイス間で文字列を簡単に移動できるサイト~"
    ページがソーシャルメディアでシェアされた際に表示されるタイトルです。シェアリンクのプレビューに表示されます。

  3. description:"PC←→ スマホ ログイン不要で自由にコピペができます。もう SNS アカウントを一回経由する必要はありません"
    ページの概要説明です。ソーシャルメディアでのシェア時に表示される説明文です。簡潔で要点を押さえた内容にするのが理想です。

  4. siteName: "コピっと！"
    Web サイトの名前を指定します。サイトのブランド名やサービス名が入ります。これにより、他のページと区別されるブランドの認識を高めます。

  5. url: "https://www.copitto.com/"
    ページの URL を示します。通常、シェアされるページのフル URL を指定します。 6. images: url: "/assets/ogp.png"
    シェア時に表示されるサムネイル画像の URL です。Web ページのビジュアル要素を補強します。画像の URL は絶対パスで指定されている必要があります（https://www.copitto.com/assets/ogp.png）。

  6. type: "image/png"
    画像のファイル形式を指定します。image/png は PNG 形式の画像であることを示しています。JPEG や GIF もサポートされています。

  7. width: 1200
    画像の幅を指定します。ソーシャルメディアでの表示に適したサイズです（通常は 1200px が推奨）。

  8. height: 630
    画像の高さを指定します。ソーシャルメディアでの表示に適したアスペクト比（通常は 1.91:1、1200x630px）に合わせたものです。

twitter メタタグ

Twitter 専用のメタデータ設定で、Twitter でのシェア時にどのような情報が表示されるかを制御します。

  1. type: "website"
    Twitter カードのタイプを示します。この場合は「ウェブサイト」です。他のタイプには summary_large_image（大きな画像を表示）などもあります。

  2. title: "コピっと！~デバイス間で文字列を簡単に移動できるサイト~"
    Twitter カードに表示されるタイトルです。140 文字以内が推奨されています。

  3. description:
    "PC←→ スマホ ログイン不要で自由にコピペができます。もう SNS アカウントを一回経由する必要はありません"
    Twitter でシェアされたときに表示される説明文です。これも簡潔にページの内容を説明します。

  4. siteName: "コピっと！"
    サイト名を指定しますが、通常は twitter:site タグを使って Twitter のアカウント名を指定します。ここではブランド名として使われています。

  5. url: "https://www.copitto.com/"
    シェアされるページの URL です。

  6. images: url: "/assets/ogp.png"
    シェア時に表示される画像です。Twitter カードの画像として利用されます。

  7. type: "image/png"
    画像の形式を指定しています。ここでは PNG 形式の画像を使用しています。

  8. width: 1200
    Twitter で表示される画像の幅を指定しています。

  9. height: 630
    Twitter で表示される画像の高さを指定しています。

  10. card: "summary"
    Twitter カードのタイプを指定します。summary は小さな画像を表示する基本的なタイプです。大きな画像を表示するには、summary_large_image を指定することも可能です。

OGP 画像が設定できない時に見るべきところ

1. OGP 画像などの静的なリソースは引き続き public/assets/ に配置する必要がある

ファビコンである icon.ico は app/assets/に配置する。これは Next.js がファビコンのパスを処理する際に特別な対応を行っていて、link タグを使って直接 HTML に埋め込まれるから。
 
しかし、OGP 画像は別。ページが共有される際に外部サービス（Facebook や Twitter など）が OGP 画像を直接 URL を参照するため、OGP 画像は静的ファイルとして public ディレクトリに配置される必要があります。

2. public ディレクトリはプロジェクトのルート直下にある必要がある

例えば、以下のようなディレクトリ構成

ディレクトリ構成
client/
  ├ public/assets/
  │           └ ogp.png
  └ src/
　   └ app/
...

3. OGP 画像のパスは絶対パスで指定する

Next.js では public ディレクトリにあるファイルはルートパス (/) から参照される。../public/assets/ogp.pngのように相対パスで書くのではなく、/assets/ogp.pngのように絶対パスで書く。

4. <アプリの url>/assets/ogp.png でアクセスしてみる

上記 3 つをクリアしても何とかならない場合、一旦アクセスしてみてください。これで OGP 画像がアクセス画面に表示されるならば、上記 3 つの設定は問題ないはずです。
 
その場合、恐らくメタ情報が Discord など、サービス側でキャッシュされている可能性が考えられます。そこで、リンクの最後にランダムなクエリパラメータを追加してキャッシュバイパスを試してみてください。例えば、https://www.copitto.com/?v=123 など。

 
 
以上です。

Discussion