Sharing cards

TL;DR If you already know the ins and outs of this: the yaml property you need is called socialImg. You can check the netlify preview at https://metatags.io/ to make everything is working as intended.

Intro

To add some 🔥pizzazz🔥 to sharing URLs on social media (Twitter, Facebook, Slack, Discord, etc) some metadata is embedded in the webpage to be consumed by those miserable cesspits +social platforms+. So when you share a url there, your link gets expanded into a snazzy card, that's more likely to capture someone's attention.

Content author, what to do?

Most likely, you'd like to supply an image. If there is an appropriate image in the post, you can supply it in the front-matter.

socialImg: /assets/img/marylin-and-the-goats/game-show.jpg

If you are using the image in the post, you can reference the Yaml with Nunjucks, so you do not duplicate the url.

![alt attibute text.]({{ socialImg }})

Another possibility is that you’re taking the image from the front-matter, such as the hero image:

---
hero:
  url: /assets/img/of-sailing-ships-velociraptors-and-walking-on-the-moon/hero-image.jpg
  alt: Illustration of a velociraptor walking on the moon with a sailing ship in the background.
---

In this case, you avoid duplication, as you can interpolate hero.url as another property under a different key. YAML provides YAML anchors, that allow you to do that, but instead I’ll rely on Eleventy. Here we go:

---
…
eleventyComputed:
  socialImg: “{{ hero.url }}”
---

There it is! Single source of truth. And breathe out…

⚠️ I’ve noticed Slack doesn’t like it when the image is an svg. Or at least, a bitmap embedded in an SVG. Probably best to use .jpg or .png.

If no socialImg has been supplied in the front-matter, the velociraptor drawing will be sent along. That’s also the image that will get sent along when sharing the homepage, or any other page that doesn’t have a socialImg property.

Other data that gets sent along, and the fallback cascade

The title gets sent along too, as the title, in case you’re wondering. The url, obviously, but that’s already known. For the description, it depends. Again, it comes from the front-matter:

1. a metaDesc property trumps all. You probably won’t need it though, because…
2. the subtitle property seems like a sensible default.
3. lede will be passed in, if subtitle is missing
4. site.tagline, specified in src/_data/site.json is the last line of defense, and will be used by any page that makes use of src/_includes/meta.html (which is where you’ll find a lot of the templating for everything mentioned here). That should be every page.