ヒーローイメージの作成

ヒーローイメージを作成した。以下がその画像である。

さらに、metaタグに以下を追加してOGPに対応させた。

const heroImage = "https://pub-e6ff8f38dbb24bb0bef4e304eb94a5de.r2.dev/heroImage.png";

<meta property="og:image" content={heroImage} />

これで、SNS等で記事のURLを張った際にこの画像が表示されるようになった。

追記:AVIF形式の画像だとヒーローイメージが反映されなかったので、PNG形式に変更したらうまくいった。OGPクローラーがAVIF形式に対応していないようだ。