When someone shares a link on X, LinkedIn, or Facebook, the platform looks for Open Graph (OG) meta tags to generate the preview card. Without them, you get a plain URL or a random snippet pulled from the page. With them, you get a rich card with a title, description, and image that you control.

The essential OG tags

<head>
  <meta property="og:title" content="Free Website Audit — 200+ Checks | PageGrader" />
  <meta property="og:description" content="Paste any URL and get a score across SEO, performance, security, mobile, and accessibility." />
  <meta property="og:image" content="https://yoursite.com/og-image.png" />
  <meta property="og:url" content="https://yoursite.com/" />
  <meta property="og:type" content="website" />
</head>

Tag by tag

og:title — The title shown in the card. Can differ from your HTML <title>
og:description — 1-2 sentences shown below the title
og:image — Must be an absolute URL. Recommended size: 1200x630 pixels
og:url — The canonical URL of the page
og:type — Usually "website" for homepages, "article" for blog posts

In Next.js

export const metadata = {
  openGraph: {
    title: "Free Website Audit — 200+ Checks | PageGrader",
    description: "Paste any URL and get a score.",
    images: [{ url: "https://yoursite.com/og-image.png", width: 1200, height: 630 }],
    url: "https://yoursite.com",
    type: "website",
  },
};

Testing your OG tags

After adding them, test with:

X (Twitter): Card Validator
Facebook: Sharing Debugger
LinkedIn: Post Inspector

These tools show exactly what your share card will look like.

Common mistakes

Relative image URLs — OG images must be absolute (https://...), not relative (/images/og.png)
Image too small — Some platforms won't show images under 200x200 pixels
Missing og:image — Without it, platforms pick a random image from your page (or none)

Check your OG tags

PageGrader checks for Open Graph tags as part of its SEO audit. Scan your site to see if your social sharing previews are configured correctly.