Minimal Social Markup
Post from July 14, 2022 (↻ September 27, 2022), filed under Web Development.
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).
If you’re a frontend developer, and maybe even a frontend minimalist, you may wonder 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.
First, it’s relevant to know that I’m an HTML purist and minimalist. I prefer to use the least HTML possible, and therefore omit optional markup and love selectors to the degree of ID- and class-less 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:
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)!
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 can use
<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.
<meta name=twitter:card content=summary_large_image> <meta property=og:image content=https://hell.meiert.org/core/png/test.png>
<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>
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 all social markup consumers should respect meta descriptions. Then the most minimal markup was to add an
og:image—because that wouldn’t otherwise be on a page.
I’m Jens, and I’m an engineering lead—currently manager for Developer Experience at LivePerson—and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!
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 16, 2022, 1:25 CEST, GooDuh said:
i get it now 😊
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.
Maybe this is interesting to you, too:
- Next: Website Optimization Measures, Part XIV
- Previous: Thoughts on an Accessibility “Get Well” Plan
- More under Web Development, or from 2022
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.