OGPを使ってMarkdownのリンクをカード型のリンクにマークアップする

ContentfulとNext.jsで作る技術ブログ Hello World ContentfulとNext.js、そしてVercelを使ってポートフォリオ兼技術ブログとなるサイトを作った。フロントエンドエンジニアとして、単に技術の知識を共有するだけで... 一般的なブログサービスやQiita、Zennといったサービスでは、Markdownに記述した外部リンクがカード的なUIで表示されることがある。これは OGP (Open Graph Protocol) という仕組みを使った表現で、単なるテキストリンクよりもずっと見栄えがいいのでこのブログでも実現したいと思っていた。先日試行錯誤してひとまず形になったので、この記事ではその実装の方法についてまとめておきたいと思う。上に貼り付けたこのブログ自身へのリンクがそれにあたる。 Next.js （ブログ記事のSSGに使用） marked （Mark

[riocampos]

Markdownで書かれたリンクをカード型に整形するためのスクリプト及びCSS。なるほどなあ。