Link Previews — More than Meets the Eye

Ever wondered how is this preview generated?

Omri Lavi
Omri Lavi
Sep 9, 2019 · 5 min read
Photo by Paul Skorupskas on Unsplash

High chances are you got to this post through some link sharing.

High chances are the link had some preview: the post header, a short summary, and an image as well.

Even higher chances that it’s not the first time you have seen such preview.

Ever wondered what generates these previews, or how can you start using them? I hope I’ll answer some of your questions in the post.


Link Previews? What’s That?

For those of you who are still wondering what previews I’m referring to, here are some examples:

Link preview generated by WhatsApp
Link preview generated by Slack

These previews help us every day by giving us a glimpse of the relevant website.

Usually, the preview contains a header, a description, a preview image, an icon, and an optional app name.

How do WhatsApp and Slack know which part of the content is the description? If there are many images on the page, which is the primary one?
Where is this data stored for each page?


Meta Tags

Meta tags describe the content of the page. They go inside the <head> element.

Meta tags can define a wide range of attributes. These are some:

  • Declaring the application name and icon
  • Specifying the description
  • Configuring the viewport
  • Setting a document refresh each 10 seconds
  • Declaring the charset
Photo by Brett Jordan on Unsplash

A web service could use meta tags to generate a link preview, by getting the
link’s HTML, right?

Surprisingly, using pure HTML meta tags only support basic features. For example, meta tags alone cannot specify a preview image.

So where do they come from?


The Open Graph Protocol

The Open Graph protocol is used to describe a website with rich objects, like images, audio files, and more. To do that, OGP (shorthand for Open Graph protocol) uses <meta> tags. OGP was built by Facebook specifically for social networks.

Using OGP is very simple.

See the following example from the official site. It describes the movie “The Rock” on IMDB’s website:

Even without reading the protocol’s documentation, most developers can understand the markup.

By looking at the <meta> tags, we can see that the website’s title is The Rock, which refers to a movie. We also have an image link and a URL, which leads to the same website.

It’s no coincidence that OGP is so simple — it was one of the designers’ goals from the very beginning:

Developer simplicity is a key goal of the Open Graph protocol, which has informed many of the technical design decisions.

There are many advanced features for Open Graph protocol. You can find more about them in the official documentation.


Should I Use the Open Graph Protocol? Why?

Although OGP was designed specifically for Facebook, many other web services support it. Linkedin, Twitter, and Pinterest are only some of the social networks that support OGP.

Additionally, many messaging tools embed link previews to messages. It is also important to mention that OGP can affect your SEO.

Generally speaking, any public web app owner should care about link previews. It makes the web app more accessible by giving the user a hint about the content.
OGP is easy to use and has many benefits. If you can, use it.

The main exception is content that requires any kind of authentication.

Link preview generators usually perform anonymous requests to get the link’s data. If the page requires authentication, the generated link will be broken.
We all shared at least one link previewed as a “please log in” page.

Link preview for a private page on Medium, as seen on Whatsapp

If you want to start using OGP but aren’t sure how, I recommend reading this excellent short article.


Other Solutions

There are ways other than OGP for generating link previews. oEmbed is one of the most popular ones. It gives the user a JSON describing a resource, instead of having to parse the resource’s meta tags.

An oEmbed JSON is very simple and contains info like image, title, and other useful data.

The catch here is that each supported website must have a provider on oEmbed, which requires a bit of work.

This means that while oEmbed could be simpler to use, the initial setup is much more complicated compared to OGP.

In case you were wondering, if you got to this post by clicking a link preview, it was not through oEmbed.

Medium is not listed as an oEmbed provider, and it still has great support for link previews.


Conclusion

Instant messaging, search engines, and social networks are part of our lives.
We use link previews every day without noticing. These are powerful tools that greatly affect a website’s social traffic.

I had no clue that this subject was so deep when I started reading about it. This post only covers a small part of things you can learn. Curious readers can find a Further Reading section below.

I hope that if you were wondering like me about link previews, you now have fewer mysteries in life to unfold.

Further Reading

Better Programming

Advice for programmers.

Omri Lavi

Written by

Omri Lavi

Passionate about UI / UX. I love React, TypeScript, testing and learning something new each day.

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade