Improve SEO with Social Sharing Cards

Context

You just built your site and want people to share it. When someone pastes your URL into a social app, you usually want more than a plain link. You want a preview card with a title, description, and image.

That behavior comes from metadata in the document <head>. A small set of tags can power previews on platforms like X, Facebook, Slack, Discord, iMessage, and other link unfurlers.

Start With The Basics

Every shareable page should have a clear title and description. Those same values help browser tabs, search snippets, and social previews.

<head>
  <title>My Awesome Title</title>
  <meta
    name="description"
    content="This article explains how to make links to your website look good when shared."
  />
</head>

Add Open Graph Metadata

Open Graph is the common baseline for link previews. If a platform understands Open Graph, it can render a rich card from your page.

<head>
  <title>My Awesome Title</title>
  <meta
    name="description"
    content="This article explains how to make links to your website look good when shared."
  />

  <meta property="og:title" content="My Awesome Title" />
  <meta property="og:description" content="This article explains how to make links to your website look good when shared." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.skies.dev" />
  <meta property="og:image" content="https://www.skies.dev/image.jpg" />
  <meta property="og:image:alt" content="Preview image for My Awesome Title" />
</head>

A few rules matter here:

Use an absolute URL for og:image.
Keep og:url canonical and stable.
Make the image large enough to look good when cropped into a card.

Add Twitter Card Tags

X still recognizes Twitter Card metadata, and many apps mirror the same fields. If you already have Open Graph tags, these mostly act as a compatibility layer.

<head>
  <title>My Awesome Title</title>
  <meta
    name="description"
    content="This article explains how to make links to your website look good when shared."
  />

  <meta property="og:title" content="My Awesome Title" />
  <meta property="og:description" content="This article explains how to make links to your website look good when shared." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://skies.dev" />
  <meta property="og:image" content="https://skies.dev/image.jpg" />
  <meta property="og:image:alt" content="Preview image for My Awesome Title" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="My Awesome Title" />
  <meta name="twitter:description" content="This article explains how to make links to your website look good when shared." />
  <meta name="twitter:image" content="https://skies.dev/image.jpg" />
</head>

Validate And Refresh

After you update metadata, the preview on each platform may take time to refresh. Many services cache cards aggressively, so a change to the tags might not show up immediately. When that happens, use the platform's preview or inspector tool to force a re-scrape.

Keep It Consistent

The best share previews are simple:

one title,
one description,
one canonical URL,
one image that matches the page.

If those four values are correct, most preview systems will do the right thing.