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

How to use the Youtube JS API to play music in the background

󰃭 2014-05-23 | #javascript #tutorials #youtube

The Youtube JavaScript API allows you to embed YouTube videos and interact with them programatically. To use it, first you need to embed this script into your page: <script src="http://www.youtube.com/player_api"></script>. If you just want the audio, you can hide the element that contains the video: <div id="player" style="position: absolute; top: -9999px; left: -9999px;"></div> Here we use absolute positioning with negative coordinates because using display: none; will prevent the onReady handler from the Youtube player from triggering on Firefox.

Continue reading 

Starfield visualization in JavaScript

󰃭 2024-08-31 | #canvas #javascript #programming-projects #tutorials

This is a simple, straightforward implementation of a visualization reminiscent of the classic Windows 95 starfield screensaver. It is also interactive: you can touch the screen or use the accelerometer to influence the direction of the movement. This is how it works: Create a bunch of particles (100), each in a random position. Every frame, move each particle further away from the center*. The further the particle is from the center, the more visible it will become.

Continue reading 