TIL: Using Open Graph for Previews

Published June 02, 2025

I've been sharing the links for the content I've been creating and I was kinda sad that the links in Mastodon and Bluesky were looking kinda meh. So I did some searching and found out that I just needed to add some <meta> tags to get them too look cool. It was really easy and I was able to implement something in a very short period of time to get it actually working on the site pretty much across the board.

The article I found that showed me what to do is something you should read if you're interested in it. The tl;dr is you need to add 4 <meta> tags to the header of the page:

<meta property="og:title" content="<title>" />
<meta property="og:type" content="<content type>" />
<meta property="og:url" content="<URL>" />
<meta property="og:image" content="<Image URL>" />

That's it. (You can find more on the definitions and additional tags you may or may not want to implement at https://ogp.me.) For my site I just updated the base template that all pages render from with this:

<meta property="og:title" content="{{ title }}"/>
{% if og_type %}
<meta property="og:type" content="{{ og_type }}"/>
{% else %}
<meta property="og:type" content="website"/>
{% endif %}
{% if og_image %}
<meta property="og:image" content="{{ SITE_URL }}{{ og_image }}"/>
{% else %}
<meta property="og:image" content="{{ SITE_URL }}/static/img/favicon.png"/>
{% endif %}
<meta property="og:url" content="{{ SITE_URL }}/{{ routes[0] }}/{{ slug }}.html"/>

and voilà every page in my site now gets a pretty preview when it's shared in social media.

As a little bonus, the formatted code blocks come courtesy of https://prismjs.com which I also learned about today.