Clickable Image Links on Social Media

Welcome

You may have reached this article by clicking an image on LinkedIn. Let me show you how that works.

When you share a link on most social-media sites, the site will examine the link and produce a preview with the link title and a featured image. When visitors click the preview, they are forwarded to the link you shared.

Here is the card LinkedIn built for me when I shared a link to this site.

Foundation Safety preview card on LinkedIn

Not bad. This looks better than plain text, but there are some issues. LinkedIn selected a shaded banner image from my site. I would have preferred something brighter, and with my branding on it, like one of these.

There are things we can do on our sites to instruct social-media card generators to select a particular image, but that will still be just one image. What if we want to share the same link with multiple images? For instance, if you were a photographer, you might want to share a different picture every week along with a link to your site.

You can post a picture with a link, but that is less attractive than a picture as a link. LinkedIn is especially bad about this because LinkedIn may replace your text link with an ugly, shortened version.

Solution: combine the image and the link

The social-media sites make these cards themselves. We can’t replace the card generators, but if we know enough about how they work, we can trick them into doing what we want. The trick is to post a link to a simple webpage that immediately redirects visitors to our site. This page won’t do much, but it will have enough meta information for the social-media site to build a card with the image and text we want.

Creating your own cards

The format for these cards is straightforward. You will need

an image somewhere on the web (preferably hosted on your own site)
a small HTML file (also hosted on the web)

The HTML file

This is going to be a bit of an eyefull, but I’ll post a full template here, because, if you’re still reading, you probably know 95% of how to get this done and are looking for a few small but critical implementation details.

	<!doctype html>
	<html lang="en>">
	<head>
	<!--More about these options at my GitHub link below.-->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta name="robots" content="noindex, follow">
	<meta name="date" content="$today">
	<meta name="author" content="$author">

	<!--Tell Twitter (how) to treat your card as a web page.-->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="$title">
	<meta name="twitter:description" content="$description">
	<meta name="twitter:image" content="$image_url_twitter">

	<!--Tell LinkedIn and Facebook (how) to treat your card as a web page.-->
	<meta property="og:type" content="website" />
	<meta property="og:title" content="$title" />
	<meta property="og:description" content="$description" />
	<meta property="og:image" content="$image_url" />
	<meta property="og:url" content="$url" />
	<meta property="og:image:width" content="$image_width"/>
	<meta property="og:image:height" content="$image_height"/>

	<title>$title</title>
	</head>
	<body>
	<!--Immediately forward to your website.-->
	<script>
	location.href = "$url";
	</script>
	</body>
	</html>

view raw social_media_card_template.html hosted with ❤ by GitHub

That’s it. $image_url and $image_url_twitter are links to a card image hosted somewhere. They can be the same image or different. Replace any $placeholder placeholders, host that html somewhere, link to it, and your social-media platform will build a beautiful card for you. Don’t worry that Twitter is no longer called “Twitter”. The template still works on X.

Automation

You might already be thinking of automating this process. That makes a lot of sense if you plan to post new image cards every few days. On faster social-media platforms, you may even want to post new cards every few hours. If this is your goal, I’ve build a Python card generator you can fork:

An important bonus tip for LinkedIn users

Social media sites will frustrate your efforts to update your site previews because they cache the preview cards. That means, once a site has created a preview for https://yoursite.com, that preview is going to stick around, no matter how much your site improves over time. Here’s the tip (for LinkedIn).

Where you would paste https://yoursite.com into LinkedIn and get the same old cached card, instead paste https://yoursite.com/?latest to force a refresh. If you plan to experiment with social-media cards, you will thank me for this tip.