Link Previews — More than Meets the Eye
Ever wondered how is this preview generated?
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:
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 describe the content of the page. They go inside the
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
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?
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.
If you want to start using OGP but aren’t sure how, I recommend reading this excellent short article.
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
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.
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.
- A Developer’s Guide to the Open Graph Protocol — https://thetrevorharmon.com/blog/a-developers-guide-to-the-open-graph-protocol
- Open Graph Checker — https://opengraphcheck.com/
- Open Graph Protocol Explained with Examples — https://www.optimizesmart.com/how-to-use-open-graph-protocol/
- How Slack Generates Link Previews — https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254