見出し画像

Notion Blogでカバー画像を表示してOGP対応する

この記事はこちらのクロスポストです

Notionは記事にアイコンやカバー画像を設定できます。

このうちカバー画像を記事トップと記事一覧に表示できればと思いました。

Notionのブログ用ページににサムネイル 用カラム を用意して、これを実現するパターンを実装されている方がいましたが、そちらの方が一覧性もよく同じカバー画像を使うような記事の場合はコピペも簡単だなぁと思います😅

修正内容

ページデータの取得時にカバー情報がついてくるのでそこから取得して表示に使うだけですね。

べっとOGPイメージにも設定していますので、Twitterなどでリンクを貼るとデフォルトのイメージではなくカバー画像が使用されていい感じかもしれません。

例によってコードはコミットを晒しておきます。

こちらは記事一覧にも表示するコミットです

Notionデータ

あとがき

とりあえずやりたい事はできてきたかな?

ページネーションやタグ付けなども考えないといけないかもしれない🤔

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
1
残念なプログラマ🤪 エラートラップ?なにそれ😇

こちらでもピックアップされています

コーディングやWeb
コーディングやWeb
  • 11本

プログラミングの話やらHeroku等のサービスやらいろいろ

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。