I tested every link preview meta tag on every social media and messaging app — so you don't have to! It was super boring!
Tags: webdev, performance, html, webperf
Published: 2022-08-14 19:16:00

*The first part of a series on redundant `<head>` tags — you can read here: [get out of my `<head>`](https://getoutofmyhead.dev)*

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:


```html
<!-- 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">
```
The purpose of these tags is to tell messaging and social&nbsp;media&nbsp;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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1in60n9gaozu2wzvjor.png)

## How to create link previews

There are four popular systems for creating link previews:

- [Facebook's `open graph`](https://ogp.me/)
- [Twitter `cards`](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards) 
- [`oEmbed`](https://oembed.com/)
- [`schema.org`](https://schema.org/docs/documents.html)

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&nbsp;preview&nbsp;tester.](https://getoutofmyhead.dev/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](https://getoutofmyhead.dev/link-preview-meta-tags/#which-meta-tags-work-on-which-apps) of using the [link&nbsp;preview&nbsp;tester](/link-preview-tester) on some of the most popular social media and messaging&nbsp;apps. It shows which `<meta>` tags display `link previews` on which apps.

## Open graph tags are the clear&nbsp;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.

```html
<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">
```

### 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…

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

…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&nbsp;tags.

```html
<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>
```

## Why have I done this?

I've been building a website — [missingdice.com](https://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](https://getoutofmyhead.dev).

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