About me: My name is Solène Rapenne, pronouns she/her. I like learning and sharing knowledge. Hobbies: '(NixOS BSD OpenBSD Lisp cmdline gaming security QubesOS internet-stuff). I love percent and lambda characters. OpenBSD developer solene@.

Contact me: solene+www at dataswamp dot org or @solene@bsd.network (mastodon). If for some reason you want to support my work, this is my paypal address: donate@perso.pw.

Consider sponsoring me on Patreon to help me writing this blog and contributing to Free Software as my daily job.

How to use the Open Graph Protocol for your website

Written by Solène, on 21 June 2021.
Tags: #blog

Comments on Fediverse/Mastodon

1. Introduction §

Today I made a small change to my blog, I added some more HTML metadata for the Open Graph protocol.

Basically, when you share an url in most social networks or instant messaging, when some Open Graph headers are present the software will display you the website name, the page title, a logo and some other information. Without that, only the link will be displayed.

2. Implementation §

You need to add a few tags to your HTML pages in the "head" tag.

    <meta property="og:site_name" content="Solene's Percent %" />
    <meta property="og:title"     content="How to cook without burning your eyebrows" />
    <meta property="og:image"     content="static/my-super-pony-logo.png" />
    <meta property="og:url"       content="https://dataswamp.org/~solene/some-url.html" />
    <meta property="og:type"      content="website" />
    <meta property="og:locale"    content="en_EN" />

There are more metadata than this but it was enough for my blog.

Open Graph Protocol website