Hi friends 👋🏻

A quick tip this week: we're going to check how your Website homepage shows up when somebody shares the link on social media or in a messaging platform.

I'll admit I messed this up when I redesigned the homepage of the Blue Hills Digital website a few months ago.

The other day, I was demoing a tool that allows you to test the social link preview, and I was surprised by what I saw on my own website 😬

So, learn from my experience and go check your own homepage right now using the free tool I'm going to show you ...

---

Want links to recent emails or a sign-up link to share? Go to The Digital Landscape sign-up page​

---

What do I mean by social link preview card?

A social link preview card is a visual snippet that displays automatically when someone shares a website URL on social media platforms, messaging apps, or in an email client.

It might also be called a social card or Open Graph card.

I just opened up LinkedIn to find an example, and here's the first one I saw:

And here's another example from Bluesky:

As you can see, the layout changes based on the platform, but the component parts of a link preview card are the same.

Here's what is included:

• Thumbnail Image: A visual preview (often built from Open Graph or Twitter Card tags)
• Title: The headline of the linked page
• Description: A short summary or snippet of the page's content
• Destination URL, obviously

And where do they show up?

• Social Media: Facebook, LinkedIn, X (Twitter), Discord, Bluesky
• Messaging Apps: WhatsApp, iMessage, Signal, Slack, Telegram
• Email & Workspaces: Gmail, Outlook, Microsoft Teams

These platforms create the cards by scraping the HTML code of the URL that was entered and looking for Open Graph (OG) tags.

If you look in the source code of a website, in the header section, you can find these if you search for og:title, og.image, etc.

How can you test your setup?

The most simple approach is to paste your homepage link into one of those platforms above and see what link preview card populates.

But if you want to check without posting, there's a free online scanning tool you can use at https://www.opengraph.xyz/​

Here's what I saw ran I ran the tool on the Blue Hills Digital homepage yesterday 😬

Yup: an awkwardly cropped picture of my face based on an image from the page that is the wrong dimensions for the og:image specs. And I was missing a prime opportunity to use my brand colors and messaging, or even to make sure the business name is visible.

This was happening because there was no og:image tag in the homepage header (this got lost after a homepage redesign), so the crawler was attempting to use the first image it found on the page as a substitute.

I just took a few minutes to create a new image to drop into the og:image tag. And after a rescan, here's where we are now:

The image is on brand now and matches the website homepage. The tool still shows a few warnings about the title and description text being too long, but those don't matter as much as the image – the title is truncated differently across platforms, and many strip out the description entirely.

Go scan your homepage and see what comes up!

---