How To Create Beautiful Link Previews For Every Platform

Twitter, Facebook, WhatsApp, many more. Cover them all.

Photo by Chris J. Davis on Unsplash

You’ve been working hard on your web app.

It’s finally done. You are proud of it and want to share it.

But after pasting a link to Twitter, your link preview is so broken. Only the title is correct, everything else is missing.

The first impression everyone will have about your app — is bad.

Let’s fix that.

After reading this article, you will be able to:

• Have a correct image, title, and description.
• Make it work properly on all platforms.
• Have different previews depending on the shared page.

And it’s all so simple.

Mystical Meta Tags

<meta> tags in your HTML files have many use cases — one of them is to set up preview data properly.