Link preview meta tags
I tested every link preview meta tag on every major social media site and messaging app — so you don't have to!
It was really boring.
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:
The purpose of these tags is to tell messaging and social media apps how to display
Link previews let people know about a link before they click on it. They display a url's
description, and sometimes an
Here's an example of a link preview being displayed in
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?
The following 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.
|Schema.org||oEmbed XML||oEmbed JSON|
|meta description||Open Graph||Open Graph Pointer||Twitter Card||microdata||JSON-ld||Rich||Photo||Video||Link||Rich||Photo||Video||Link|
- Only works with a
- Doesn't show thumbnail, photo, or video
- Requires a non-spec
- Only uses the
Open graph tags are the clear winner
I was hoping to discover that one of the open source methods —
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.
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 do what this website does, and just use a
meta description tag, and learn to live with there being no images in your website's link previews…
…or, you could use a combination of
Schema.org microdata and
oEmbed JSON — the combo which will work on the most number of apps, without using proprietary tags.