OGP
リンクを貼ったときの見た目
SNS やチャットに URL を貼ると、タイトルと画像の付いたカードが出ることがあります。あれは相手のアプリが気を利かせているのではなく、こちらの HTML に書いてある情報を読んで組み立てています。この決まりを OGP と呼びます。Open Graph Protocol の略で、head に入れる meta タグの一種です。
何も書かないとカードは出ず、URL の文字列がそのまま残ります。fleama の商品を友達に送っても、何の商品か分かりません。
openGraph を metadata の中に書く
Next.js では、専用のタグを手書きするのではなく metadata の中に openGraph を書きます。
TypeScript (JSX)
export const metadata = {
title: "fleama",
description: "使わなくなったものを、次の人へ",
openGraph: {
title: "fleama",
description: "使わなくなったものを、次の人へ",
type: "website",
images: ["/og/default.png"],
},
};images は配列です。1枚しか使わないときでも配列で渡します。複数書けるのは、相手のアプリによって選ばれる枚が違うためです。type はページの種類で、サイトのトップなら website を入れておけば十分です。
商品ごとにカードを変える
generateMetadata の戻り値にも同じ openGraph を書けます。商品ごとに違う画像を返せば、商品カード風の見た目になります。
TypeScript (JSX)
return {
title: item.title + " | fleama",
openGraph: {
title: item.title,
images: ["/og/" + item.id + ".png"],
},
};ここで気を付けたいのは、レイアウトとページの openGraph は項目ごとに混ざるのではなく、まるごと入れ替わることです。ページ側に openGraph を書いたら、そのページで出したいものはページ側に全部書きます。半分だけ書いてレイアウトの残りが効く、とはなりません。
演習
fleama 全体の OGP と、商品ごとの OGP の両方を設定します。