header source
my icon
esplo.net
ぷるぷるした直方体
Cover Image for I Created an App to Generate Static HTML Cards from Open Graph

I Created an App to Generate Static HTML Cards from Open Graph

about2mins to read

Mainly because I needed it for this site, I created a tool that extracts meta data from Open Graph and creates a card-like link... well, it's hard to explain, but basically, it's this:

https://youtu.be/k6avQD1RerY

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

How to Use

Access this site:

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

Enter a URL and press the SUBMIT button. That's it.

If you adjust the number of characters in the description, any excess will be represented by "…".

Please adjust the height and width of the preview window according to the site you are using.

Background

On sites like Hatena Blog and Medium, when you insert a link to an external page, it's displayed in a card format, which is quite cool. I wanted to use it on my own site, but since it wasn't available as a template, I created it.

Notes

I'm relying on an external server (https://cors-anywhere.herokuapp.com/) to avoid CORS issues. Please be aware that it may suddenly stop working depending on the circumstances.

Share