DEV Community

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

Nathaniel on August 14, 2022

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 he...
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 ?