header source
my icon
esplo.net
ぷるぷるした直方体
Cover Image for Open Graphから静的なHTMLカードを生成するアプリを作りました

Open Graphから静的なHTMLカードを生成するアプリを作りました

だいたい1分で読めます

主にこのサイトで必要だったので、Open Graphとして記載されているmetaデータを引っこ抜き、カード状のリンクを作るツールを作りました……と書くと分かりにくいですが、要は↓です。

https://youtu.be/k6avQD1RerY

https://github.com/esplo/og-card-generator

使い方

ここにアクセスします。

https://og-card.netlify.com/

URLを入れてSUBMITボタンを押します。以上です。

descriptionの文字数をいじると、その文字数を超過した分は「…」で表されます。

previewウィンドウの高さと幅は、ご利用先のサイトに併せて変更してください。

背景

はてなブログやMediumなどでは、外部ページのリンクを挿入するとカード形式で表示され、なかなかカッコいいです。自分のサイトでも使いたいと思ったのですが、テンプレートとしては用意されていないので作りました。

注意点

CORSの回避は外部サーバーに頼っています。
先方の状況により突然死を迎えることがありますが、ご容赦ください。

Share