metaタグ設定とXシェアボタン(OGP)の配置を行いました

Next.jsかつApp router形式でmetaタグを設定したい

『Next.jsかつApp router形式で、さらにブログ記事のようなページ毎にもmetaタグを設定する方法』を解説している良い記事を見つけるのに少し時間がかかりましたが、下記のサイトが参考になりました。

https://delt.co.jp/article/448

今までmetaデータについての学習は後回しにしており、よく分からないままとりあえずHeadタグで囲んで、そこにmetaタグを放り込んでいたのですが、Next.jsでは意味が無かったようです...

ただ上記のサイト通りにコードを書いてURLからfetchする方法がうまくいかず、getDetailを使用する方法に変更しました。

//[blogId]/page.tsx

//メタデータを生成する関数
export async function generateMetadata({ params }: { params: { blogId: string };}): Promise<Metadata> {
  const blog = await getDetail(params.blogId);
  const idPhoto: number = Math.floor(Math.random()*1000);

  return {
    title: blog.title,
    description: "",
    openGraph: {
      title: blog.title,
      description: "",
      type: 'article',
      images: `https://picsum.photos/seed/${idPhoto}/1200/800.jpg`,
    },
    twitter: {
      card: 'summary_large_image',
      title: blog.title,
      description: "",
      images: `https://picsum.photos/seed/${idPhoto}/1200/800.jpg`,
    },
  };
};

画像(images)に関しては記事毎のアイキャッチ画像が無い場合はランダム画像が表示されるようにしているので、今回はそのまま流用しています。

｜Localhost環境で画像設定が問題なくできているか確認したい

Localhost上では上記の画像を設定してからシェアボタンを押しても、画像がうまく表示されるか確認することができません。
（なぜかは理解できていませんが）

そこで下記のサイトがめちゃ便利でした。

https://zenn.dev/tomo_redx/articles/b2d1c13d3ff361

Localhost Open Graph CheckerというChromeの拡張機能を入れて、生成されたURLを下記のサイトで実行するだけです。

https://rakko.tools/tools/9/

↓このような感じで確認できます。