Fix-it guide

Add Open Graph tags for social shares

Open Graph (OG) tags are <meta> tags in your <head> that control how your page looks when someone shares the link on Facebook, LinkedIn, iMessage, Slack, or Discord.

Medium impact~5 minutesStructured data & social

What it is

Open Graph (OG) tags are <meta> tags in your <head> that control how your page looks when someone shares the link on Facebook, LinkedIn, iMessage, Slack, or Discord. Without them, a shared link shows a random image (or none) and the raw URL. With them, your link shows a polished card with your logo, headline, and a description.

Why it matters

Every time someone DMs your link to a friend without OG tags, you are silently losing the click. With proper OG tags, your link shows up as a branded card that feels professional and is way more likely to be tapped. The effort is fifteen minutes; the dividend is every social share for the life of the page.

How to fix it

  1. Create a share image (1200×630 PNG or JPG)

    1200×630 is the recommended size for Facebook and LinkedIn. Include your logo, headline, and brand colors. Keep file size under 1MB. Host it at a stable URL.

  2. Add the OG tags in <head>

    At minimum, set og:title, og:description, og:image, and og:url. og:type should be "website" for the homepage or "article" for blog posts.

    <head>
  <meta property="og:title" content="Airport Car Service in Austin | Apex Car Service" />
  <meta property="og:description" content="Reliable service, 24/7 phone. Licensed and insured." />
  <meta property="og:image" content="https://apexcarservice.com/og/home.png" />
  <meta property="og:url" content="https://apexcarservice.com/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Apex Car Service" />
</head>

  3. Add the Twitter Card variant too

    Twitter / X reads og:* by default but the summary_large_image card type gives you the big preview image instead of a tiny thumbnail.

    <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Airport Car Service in Austin | Apex Car Service" />
<meta name="twitter:description" content="Reliable service, 24/7 phone. Licensed and insured." />
<meta name="twitter:image" content="https://apexcarservice.com/og/home.png" />

  4. Next.js: set it via the Metadata API

    Use the `openGraph` and `twitter` fields on your metadata export.

    export const metadata: Metadata = {
  openGraph: {
    title: 'Airport Car Service in Austin | Apex Car Service',
    description: 'Reliable service, 24/7 phone. Licensed and insured.',
    url: 'https://apexcarservice.com/',
    images: ['https://apexcarservice.com/og/home.png'],
    type: 'website',
    siteName: 'Apex Car Service',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Airport Car Service in Austin | Apex Car Service',
    description: 'Reliable service, 24/7 phone.',
    images: ['https://apexcarservice.com/og/home.png'],
  },
};

How to verify the fix

Paste your URL into the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again." You should see your image, title, and description rendered as a preview card. Test the LinkedIn Post Inspector and the OpenGraph.xyz preview tool too.

Further reading

Confirm the fix

Run a fresh audit to make sure the issue is gone.

We’ll re-grade every category and confirm this issue is no longer firing.

Run a fresh audit
← All fix-it guidesSee the SEO glossary