What is og:description?
The og:description meta tag provides a brief summary of your page's content. When someone shares your link on social media, this description appears below the title, giving users context about what they'll find if they click.
Why is it critical?
Without an og:description:
- Facebook may try to scrape text from your page, often resulting in random or irrelevant snippets
- LinkedIn might show no description at all
- Discord and Slack will display a bare link or unrelated page content
- WhatsApp will show a minimal or empty preview
The description is your elevator pitch — it's the second most important element (after the title) in convincing users to click your link.
How to fix it
Add the following tag inside your <head>:
<meta property="og:description" content="A concise and compelling summary of your page content. Aim for 110-160 characters." />Best practices
- Aim for 110-160 characters — Long enough to be informative, short enough to avoid truncation
- Complement the title — Don't repeat it; expand on it with additional details
- Include a call to action — "Learn how to...", "Discover why...", "Get started with..."
- Be accurate — Misleading descriptions damage trust and increase bounce rates
- Use it differently from
<meta name="description">— The OG description can be more casual and social-media-friendly
Examples
Good:
<meta property="og:description" content="Learn how to implement Open Graph tags correctly. Step-by-step guide with examples for Next.js, Astro, and WordPress." />Bad:
<meta property="og:description" content="Welcome to our website." />Framework-specific implementation
Next.js (App Router):
export const metadata = {
openGraph: {
description: 'Your page description for social sharing',
},
}Astro:
<meta property="og:description" content="Your page description for social sharing" />