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

Free Static Web Hosts for Frontend Developers

󰃭 2022-01-15 | #css #html #javascript #tips #tutorials

Nowadays it’s very easy to publish on the web for free. There are countless blogging platforms and website creators. But these platforms usually end up controlling your content. Sometimes you cannot even export your own data! The other extreme is to set up your own server by yourself. Buy a VPS (virtual private server) or a shared hosting somewhere, install a web server, and upload your files. This is a lot of work already!

Continue reading 

Generating partner.jar for Salesforce API Integration

󰃭 2014-11-12 | #java #tutorials

I ran into a small issue recently when setting up a Java project to use the Salesforce APIs. Basically, you need to download a WSDL file from Salesforce, then use a tool made by them to generate a jar that you then include in your Java program. They instruct you to download force-wsc.jar and then run it, but when you run it you realize they didn’t pack the dependencies within the jar!

Continue reading 