Mastodon cards, or PreviewCards.
03 Dec 2022Disclosure: I’m having trouble getting preview cards to work. I’ll update this post when I figure it out. Hints? Let me know on Mastodon.
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.
Links list all in one place.
- Open Graph Protocol,
- Creating Twitter cards on Jekyll websites,
- Creating Twitter card templates for WordPress,
- Mastodon: Preview Cards,
- Open Graph validator.
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">