Check your Open Graph tags and social link previews

When someone shares your link, the platform's bot fetches the page and reads meta tags in the HTML head. Open Graph tags (og:) were created by Facebook and are read by most platforms. X also reads its own twitter: tags and falls back to the matching og: tag when a twitter: tag is missing.

• The tags are added with JavaScript after the page loads. Most preview bots read only the HTML the server sends, so they never see them. Put the tags in the server response.
• The image path is relative, such as /og.png. Use the full URL including https:// and your domain.
• Every page shares one generic set of tags from the root layout, so every link looks the same. Set a title, description and image per page.
• The image is too large, the wrong shape, or behind a login or bot protection that returns an error instead of the image.
• The platform cached an old preview. Fix the tags, then ask the platform to re-scrape, for example with Facebook's Sharing Debugger or LinkedIn's Post Inspector.

Facebook recommends images of at least 1200 x 630 pixels for the best display on high-resolution devices, in a ratio of about 1.91:1, and documents a file size limit of 8 MB. X's card documentation listed a 5 MB limit for card images, with summary_large_image supporting a 2:1 ratio. A 1200 x 630 image that is well under 5 MB works across the platforms this tool previews.

In the App Router, export a metadata object (or a generateMetadata function for dynamic pages) from page.tsx or layout.tsx. Next.js renders the tags into the server HTML, so preview bots see them without running JavaScript. The tool above generates a pre-filled version from your page.

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://your-app.example"),
  title: "Your page title",
  description: "One or two sentences about the page.",
  openGraph: {
    type: "website",
    url: "/",
    images: [{ url: "/og.png", width: 1200, height: 630, alt: "What the image shows" }],
  },
  twitter: { card: "summary_large_image" },
};