🐦

Next.jsでTwitter cardの画像が表示されないあなたへ

2022/03/26に公開

Next.jsでTwitter cardの画像が表示されないあなたへ

TwitterのOGP(TweetにそのサイトのURLが埋め込まれたときに表示するサイトの画像)を設定するときに,head内にこんな感じに書くだろう.

<meta name="twitter:image" content="/site_image.png" />

Next.jsではpublicフォルダ配下に画像を保存し,そのpathを書くことになるのだ.

しかし,これではTweetしたときに画像が反映されない.

実はSiteのURLを含めたpathを書き,絶対パスにする必要がある.

<meta name="twitter:image" content="https://proglab.nbr41.com/site_image.png" />

こんな感じにできた!

https://twitter.com/Knob_nbr41to/status/1507375625161809920?s=20&t=NdBBPTmneED1j7lighkk4w

Discussion