Mastodon cards, or PreviewCards.

jekyll mastodon social-media websites

I’m a new migrant to Mastodon, and my existing Twitter card tags were working for the title and description, but not for the image.

I’ve spent a little time on this; the Mastodon documentation wasn’t clear to me. Now, I see

Represents a rich preview card that is generated using OpenGraph tags from a URL.

Not knowing what OpenGraph tags were at the time, copy-pasting the examples from that website will not get you cards that generate. You need meta tags that are formatted correctly. What I did: I examined the source section of a WIRED article where I was seeing a card on Mastodon, and reverse engineered my way to Open Graph. Note: I’m still trying to figure out some details, especially concerning large image cards.

So: Open Graph tags result in cards that work on Mastodon. Here’s how I set up the meta tags, with some links. My site uses Jekyll as a generator.

The Open Graph tags

In my _includes folder, is head.html. It is here that I placed the Open Graph tags. Note: you might see Open Graph tags as equivalent to Facebook tags. Open Graph tags are the tags needed for previews on Facebook (I don’t use Facebook).

 
<!-- Open Graph ---->
<meta property="og:type" content="article">
<meta property="og:site_name" content="Amy Tabb">
<meta property="og:locale" content="en_US">
<meta property="og:title"   content="{{ page.title }}">
<meta property="og:url"   content="{{ site.url }}{{ page.url }}">


{% if page.summary %}
<meta property="og:description" content="{{ page.summary }}">
{% else %}
<meta property="og:description" content="{{ site.description }}">
{% endif %}
 

{% if page.largeimage %}
<meta property="og:image" content="{{ site.url }}{{ page.largeimage }}">
{% else %}
{% if page.image %}
<meta property="og:image" content="{{ site.url }}{{ page.image }}">
{% else %}
<meta property="og:image" content="{{ site.title_image }}">
{% endif %}
{% endif %}
<!-- end open graph -->
 

I use some liquid variables in the page to customize the displayed preview image for that post. For more information on getting everything working see my posts on Creating Twitter cards on Jekyll websites, or Creating Twitter card templates for WordPress.

Validate!

Here’s an Open Graph validator. This site also allows you to copy and paste meta tag templates for individual pages, if that’s what is desired.

Alt text tag.

Something I want to add in the future is an alt text tag. My images are not that relevant to the content, necessarily – they are mostly Lego creations from my kids. I do want to figure out the alt text, though, and automate alt text generation as I use a small set of images for preview cards.

 
<meta property="og:image:alt" content="Alt test for this image">

© Amy Tabb 2018 - 2023. All rights reserved. The contents of this site reflect my personal perspectives and not those of any other entity.