Minimal Social Markup

Published on July 14, 2022 (↻ November 20, 2022), filed under Web Development (RSS feed for all categories).

Every website and app these days needs so-called “social markup,” metadata for a richer and prettier display in social media and messaging tools. This markup is usually based on the Open Graph protocol, but Twitter, most notably, has their own metadata (some of which falls back to Open Graph).

For a frontend developer, and especially a frontend minimalist, it may be interesting to know what the most minimal markup is so as to get a meaningful result. I’ve lately been focusing on this question, reviewing and optimizing my past setup.

If you don’t want to read any further, here’s the absolute minimum you need:

<!-- <head> (and <body>) needed for LinkedIn -->
<head>
  <!-- “twitter:card” and title needed for Twitter -->
  <meta name=twitter:card content=summary_large_image>
  <meta property=og:title content="This is a test title">
  <!-- Quotes needed for WhatsApp and Signal -->
  <meta property="og:description" name="description" content="This is a test description.">
  <meta property="og:image" content="https://hell.meiert.org/core/png/test.png">

If you do want to read further, here’s how I’ve arrived at this code.

Requirements

First, it’s relevant to know that in my work, I focus on minimal HTML. I prefer to use the least HTML possible, usually omit optional markup for that reason, and I love the idea of ID- and class-less web development. (Not removing all spaces on every page is one exception to this rule—“view-source” is cool.)

But what are we trying to identify the least amount of markup for? In my mind, whatever is needed to:

show the title for the page in question;
display an image;
provide a description (optional).

Where should this all work? For me—your mileage may vary—this social markup should be displayed properly on the following platforms and apps:

Twitter (tester [currently unreliable])
LinkedIn (tester)
Facebook (tester)
Signal
WhatsApp

I do care about some other networks, too (like XING), and I would care more about other messengers, if I used them (like Telegram), but I’ve been working with kind of a bet here that other networks and apps show a similar behavior as the ones listed. So far, this seems to work. Please let me know about major platforms that show a different behavior (as well as any issues)!

Social Markup

The markup for these requirements is fairly easy to identify.

For the title, the title element suffices everywhere but on Twitter (why!). To produce “valid” Twitter card markup, you must use og:title:

<meta property=og:title content="This is a test title">

To display an image, Twitter also needs twitter:card markup, which also controls the size of the image (cf. summary and summary_large_image):

<meta name=twitter:card content=summary_large_image>
<meta property=og:image content=https://hell.meiert.org/core/png/test.png>

To show the description, slap property=og:description on an existing description element (but, thanks Amier Saleh, mind the order):

<meta property=og:description name=description content="This is a test description.">

That leads to the following most minimal markup (following my preferred source order):

<meta name=twitter:card content=summary_large_image>
<meta property=og:title content="This is a test title">
<meta property=og:description name=description content="This is a test description.">
<meta property=og:image content=https://hell.meiert.org/core/png/test.png>

Problems

But, this alone doesn’t do it, even though it’s valid (validate the gist) and matches the big players’ specs.

One problem relates to the inability of messenger apps (!) to retrieve description and image, if the respective attributes aren’t put in quotes. (When I still used WhatsApp, I contacted them three times about the image issue, providing test pages and all, but they just dropped it.)

Another problem is social markup not being identified properly, for example by LinkedIn, if it’s not following a <head> start tag.

Both, to spell it out, are pretty massive, pretty embarrassing bugs, because both is valid HTML. That is, this code is proper, in conformance with the HTML specifications. (You’re professionals—fix this.)

Both, then, leads to the markup shared in the beginning:

<head>
  <meta name=twitter:card content=summary_large_image>
  <meta property=og:title content="This is a test title">
  <meta property="og:description" name="description" content="This is a test description.">
  <meta property="og:image" content="https://hell.meiert.org/core/png/test.png">

❧ And this, to the best of my knowledge, isn’t just minimal, it’s the most minimal social markup.

What I think about this? I already mentioned how upset (but not surprised) I am that HTML is treated like XHTML and that valid HTML—with no <head> tag, no quotes—isn’t fully supported. But I also believe this markup is still too much—in short, Twitter should make use of page titles (title element) and follow Open Graph (including dumping twitter:card), and social markup consumers should generally consider meta descriptions. Then the most minimal markup was to add an og:image—because that wouldn’t otherwise be on a page.

Update (November 20, 2022)

The identified markup seems to work well with Mastodon, too. I’m monitoring and will update this post, if need be. (If you want to connect on Mastodon, you find me at @j9t@mas.to.)

Under that pitiless sun the rocks glow like fire. Down [Val] goes, ever downward. At three thousand feet he reaches sea level and in the distance sees the Dead Sea, shimmering in the awful heat, a thousand feet lower yet!

Figure: Minimal society. (Copyright King Features Syndicate, Inc., distr. Bulls.)

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.

With my current move to Spain, I’m open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedIn profile.

I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

Comments (Closed)

On July 15, 2022, 2:12 CEST, Kyle Simpson said:
I have certainly way more social markup on my page than you, but I checked that the stuff you show is included correctly in my markup.

Sadly, it seems that Twitter still won’t render a card properly for my site (according to their checker). Linked-In does just fine with it, though, so it’s not all wrong.

Shame that this social markup is so voodoo’y. It should be very straightforward, but it isn’t.
On July 15, 2022, 8:28 CEST, Jens Oliver Meiert said:
Kyle 🙏

There seems to be an issue with the Twitter card validator… live, the markup works as expected (cf. the tweet for this post). I added a note pointing out that it’s currently unreliable.

Social markup should indeed be more straightforward. We can share our appetite for more compact code—maybe that will create appetite for companies to consolidate this markup.
On July 16, 2022, 1:25 CEST, GooDuh said:
i get it now 😊
On July 20, 2022, 23:48 CEST, Brendan Smith said:
One aspect you have overlooked is the relevance of some of this markup to SMS apps. I’m not sure of the current state of iOS however Android (Samsung/Pixel) default apps will also show an og:image, title, description and domain when available. If an SMS contains only one link and the message char count is below the single message limit, this preview will be shown.

It really does help lower the phishiness of things like pURLs delivered via SMS when you supply a company logo as your og:image - a branded SMS so to speak.
On July 21, 2022, 8:48 CEST, Jens Oliver Meiert said:
Thanks Brendan. Not sure this was overlooked? (I didn’t test in SMS apps though, that’s correct.) This markup is useful, and it makes sense for various apps to use it.