How to show preview images when sharing links of your website

󰃭 2019-04-13

You know when you share a link on social media or mesagging apps, sometimes the app shows a nice preview thumbnail with a description? You can click on it and it will take you to the linked website. I wanted to have this functionality for a website I was working on, so I did some research on how to get it working.

Short answer: use the og:image meta tag.

Longer answer: read on.

You have to use Open Graph meta tags. There’s a bunch of meta tags to use, but the ones you need for previews are the following:

    <meta name="twitter:card" content="summary">
    <meta property="og:title" content="Thumbnail example">
    <meta property="og:description" content="Only for Nic Cage fans">
    <meta property="og:image" content="https://www.placecage.com/c/460/300">
    <meta property="og:url" content="https://kaeruct.github.io/">

When a website with the previous tags is shared on social media, you will get a nice preview card with thumbnail, title, and description.

Important points:

  • You NEED to include the twitter:card meta tag for Twitter to display the preview. Otherwise it won’t work. If you don’t care about Twitter you can remove it.
  • Some apps/websites will not include your preview thumbnail if it’s not served via HTTPS. So make sure the image URLs always start with https://!
  • The og:url value should point to the canonical URL of the page, not to the root of your website.

Below you can see some examples:

Twitter

Twitter

Slack

Slack

Telegram

Telegram

WhatsApp

WhatsApp

Discord

Discord

Tags: #html #tutorials

More posts like this

Starry Sky in HTML5 Canvas - Part 2

󰃭 2019-04-13 | #canvas #javascript #programming-projects #tutorials

This is part of a series! Please make sure you have read Part 1 first! IMPORTANT – you can try out the result of this tutorial by visiting this CodeSandbox. However, I encourage you to read the blog post and try to follow along to understand how and why it works. Last time we left off with a very nice starry sky, but it’s a bit dead. We need to add some animation to it!

Continue reading 

Using AsyncLocalStorage for Better Traceability in NodeJS Applications

󰃭 2024-09-29 | #javascript #nodejs #tutorials

NodeJS has a neat API called AsyncLocalStorage. It’s used to share information across callbacks and promise chains. For example, it is useful to share information for all the code executed when serving a web request. I also found it very useful to keep trace information to easily keep track of which item was being processed during a batch process. The only caveat in my opinion, is that you need to wrap your code in yet another callback.

Continue reading 