When you post a link on mastodon (the generic name for a federated form of interoperable social media) it will often display a little box containing an image and formatted description of the url.
Like this:
But that looks a bit plain and boring, right?
Well today I decided to jazz up the links that I post from this blog.
To begin, I searched “mastodon url card link”, and found this blog post with a guide.
I chose to use html <meta description> tags, which I put in the <head> part of my website source:
<meta property="og:url" content="https://syntelang.github.io/">
<meta property="og:image" content="https://syntelang.github.io/logo.png">
<meta property="og:site_name" content="Syntə Blog">
You’ll need to change the links (urls after content=") to ones relevant to your site of course :)
I then added the image named logo.png to the root directory of my website by adding it to the static/ directory with my hugo tree.
hugo is the static site generator I use to combine a set of templates with posts written in markdown format to create the website before uploading it all. To add the meta tags above I placed them in the layouts/_default/baseof.html template (yours might be different).
To make the image, I simply took a cropped (and zoomed in) screenshot of part of the website and them renamed it to logo.png. >
Now when I post links to this website it looks like this:
Success!
update:
the url in the ‘og:url’ should be the one for the blog post. I realised this later on when I clicked on the mastodon card and it took me to the blog front page.
To correct this with hugo I replaced the url with {{ .Permalink }} in the template 😊