DEV Community

Nathaniel
Nathaniel

Posted on • Originally published at getoutofmyhead.dev

I tested every link preview meta tag on every social media and messaging app — so you don't have to! It was super boring!

The first part of a series on redundant <head> tags — you can read here: get out of my <head>

Social media is a bad for your mental health, your privacy, your democracy — and for the performance of your website.

Peak at the source code of most websites, look between the <head> tags, and you're likely to see a bunch of meta tags like this:

<!-- Meta tags generated by metatags.io -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Meta Tags — Preview, Edit and Generate"><meta property="twitter:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
Enter fullscreen mode Exit fullscreen mode

The purpose of these tags is to tell messaging and social media apps how to display link previews.

Link previews let people know about a link before they click on it. They display a url's title, description, and sometimes an image.

Here's an example of a link preview being displayed in iMessage:

CIA Realizes It's Been Using Black Highlighters All These Years

How to create link previews

There are four popular systems for creating link previews:

These systems also have more than one way of being implemented. (See the table below)

All these systems involve placing code snippets between the <head> tags of your page.

Adding these code snippets helps bots run by facebook, twitter, and other apps, build link previews of your site.

But, this code also weighs down your website for all your human visitors — and many websites implement three or four of these methods.

You could just not have any of these tags — that's fine.

But assuming you want link previews of your website to be displayed — what is the most effective combination of these tags?

That's something the world needed to know — so I built link preview tester. It's probably the most boring tool anyone has ever made —  and I really hope someone finds it helpful!

Which meta tags work on which apps?

This table shows the results of using the link preview tester on some of the most popular social media and messaging apps. It shows which <meta> tags display link previews on which apps.

Open graph tags are the clear winner

I was hoping to discover that one of the open source methods — schema.org or oEmbed worked well on enough of these apps that I could recommened them.

But it seems the clear winner is Facebook's Open Graph tags.

Here's the same example from metatags.io without redundant tags. It goes from 1.335 kB to 729 bytes in size.

<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
Enter fullscreen mode Exit fullscreen mode

What if i don't want Facebook or Twitter proprietary meta tags polluting my lovely website?

Facebook and Twitter are basically evil — so it's understandable if you don't want to use their tags.

You could just use a meta description tag, and learn to live with there being no images in your website's link previews…

<title>Get out of my &lt;head&gt;</title>
<meta name="description" content="An incredible website for testing meta tags">
Enter fullscreen mode Exit fullscreen mode

…or, you could use a combination of meta description, Schema.org microdata and oEmbed JSON — the combo which will work on the most number of apps, without using proprietary tags.

<head lang="en" itemscope itemtype="https://schema.org/WebPage">
    <title>Link Preview Test | Title Tag</title>

    <meta name="description" content="Test Description | Meta Description — This description came from the meta description tag"/>

    <meta itemprop="name" content="Test Title | Schema.org Microdata Title"/>
    <meta itemprop="description" content="Test Description | Schema.org Microdata — This description came from Microdata using Schema.org Schema"/>
    <meta itemprop="image" content="/previews/microdata.png"/>

    <link rel="alternate" type="application/json+oembed" href="https://getoutofmyhead.dev/oembed_link.json" title="Test Title | oEmbed JSON Title Attribute"/>
</head>
Enter fullscreen mode Exit fullscreen mode

Why have I done this?

I've been building a website — missingdice.com — with a strict page size limit of 12kB — saving data has become a bit of an obsession — and so has finding out what <meta> tags are actually useful.

I've collected my research into a series of articles which will be published on getoutofmyhead.dev.

Let me know if you're interested in learning more, or if you find this at all useful!

Top comments (12)

Collapse
 
cicirello profile image
Vincent A. Cicirello

Although not for link previews, Google uses certain schema.org microdata for some search results enhancements. So it's possibly useful for some sites to use that too depending on nature of site.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Yup, Google Structure Data for rich results.
But this is a feature on Google Search that you can implement on your web app and Google will decide when, where and how to show it 😁

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Nice post! Thank you for sharing 😀

Collapse
 
shshank profile image
Shshank

Thanks for sharing.

Collapse
 
perssondennis profile image
Dennis Persson

You had my like at "It was super boring!" 😄

Collapse
 
cicirello profile image
Vincent A. Cicirello

The link in this post to your link preview tester gives a 404 error.

Collapse
 
shadowfaxrodeo profile image
Nathaniel

Thanks for pointing that out, fixed!

Collapse
 
chasm profile image
Charles F. Munat

Brilliant.

Collapse
 
citronbrick profile image
CitronBrick • Edited

I often wondered how the visual preview for links in Outlook email appeared.
I had thought it was something done in the server side.

So <meta> tags are responsible for this ?

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

It depends on the implementation on (outlook or whatever) side.
What's behind that is usually a crawler of the company that read those meta tags to build a preview or simply take some excerpt from the content (i.e. first image available plus first 200 characters of text).

Usually yes, those meta are the better way to proceed. Otherwise the preview will show some introduction words instead a good description written explicitly for that.
The same way it would show a random image, not necessarily optimized for the format and not necessarily the one intended to be in the preview.

That's why OpenGraph or other meta tag formats appear 😁

Collapse
 
rudrasen2 profile image
Rudra Sen

microlink.io/sdk is also a link previewer...

Collapse
 
ccoveille profile image
Christophe Colombier

Interesting approach, what did you learn by doing it, you didn't know when you started ?