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.
Requirements
First, it’s important 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 still 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;
- show the 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:
Personally, I 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 can 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, 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 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.
Top comments (0)