Without Open Graph tags, social platforms guess which image, title, and description to show when your page is shared — usually poorly. This guide covers the essential tags, image specs, and common mistakes.
Open Graph (OG) tags are HTML meta attributes that control how your web pages appear when shared on Facebook, LinkedIn, Slack, WhatsApp, and other platforms that render link previews. Without them, platforms make their own choices about which image, title, and description to display — often with poor results that reduce click-through rates from social sharing.
This guide covers the essential OG tags, the image specifications that matter most, common implementation mistakes, and how to check your social snippets before you publish.
Open Graph is a protocol developed by Facebook that standardizes how web page metadata is read and displayed by third-party platforms. It uses <meta> tags in the <head> section of your HTML with a property attribute prefixed by og:.
When someone shares your URL, the receiving platform crawls the page, reads the OG tags, and renders a preview card using those values. If the tags are missing or misconfigured, the platform falls back to guessing — often picking an irrelevant image, a truncated heading, or no description at all.
Every published page should include these four tags:
<title> tag exactly. For social sharing, you can write a slightly more conversational version of the title — one that performs better without a keyword focus.A fifth tag, og:type, specifies the content type. For standard pages and blog posts, set it to website. For articles, use article, which unlocks additional properties like article:published_time that social platforms display in previews.
The OG image has stricter requirements than any other tag. Getting it wrong is the most common reason preview cards look broken or low-quality on social media:
og:image value must be a full URL including protocol and domain (e.g., https://example.com/images/preview.jpg), not a relative path. Relative paths fail on every platform.Twitter (now X) uses its own meta tags called Twitter Cards. Most platforms fall back to OG tags if Twitter Card tags are absent, but Twitter itself gives priority to its own tags. The key Twitter Card tags to add alongside your OG tags:
twitter:card — Set to summary_large_image to display a large preview image below the tweet.twitter:title — Mirrors og:title in most cases.twitter:description — Mirrors og:description.twitter:image — Mirrors og:image. The same 1200 × 630 image works perfectly for both.In Next.js, both OG and Twitter Card tags are managed through the metadata export in any page file, which renders the correct HTML attributes automatically without manual meta tag management.
/images/og.jpg will not work. OG crawlers require the full https:// URL to fetch the image.The SlugGenius SERP Snippet Preview lets you verify how your title and description render before you publish — measuring them in pixels exactly as Google does, so you can catch truncation issues in real time. For social platform previews specifically, use each platform’s native tools after the page is live: Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, and Twitter’s Card Validator all show exactly how the preview card will render.
Taking ten minutes to verify your OG tags before publishing meaningfully increases the click-through rate of every social share your page receives — a compounding return as the content is shared and reshared across platforms over time.
No sign-up required — use them instantly in your browser.