📣Open Graph & Social Sharing Optimization
How to configure Open Graph and Twitter Card tags to control how your pages look when shared on Facebook, LinkedIn, Twitter, and other social platforms.
When someone shares your URL on social media, the platform reads specific meta tags to generate a preview card — title, description, and image. Without these tags, platforms fall back to guessed or blank previews, which dramatically reduce click-through rates on shared links.
The Open Graph Protocol
Open Graph (OG) was created by Facebook and is now used by virtually every social platform. Tags live in the <head> of your HTML and use the property prefix og:.
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling summary, 1-2 sentences.">
<meta property="og:image" content="https://example.com/images/og-cover.jpg">
<meta property="og:url" content="https://example.com/your-page">
<meta property="og:type" content="website">Critical OG Tags
| Tag | Required? | Best Practice |
|---|---|---|
| og:title | Yes | 60–90 characters, different from <title> OK |
| og:description | Yes | 100–200 characters, action-focused |
| og:image | Yes | 1200×630 px minimum, < 8 MB, no text in centre |
| og:url | Yes | Canonical URL of the page |
| og:type | Recommended | "website" for homepages, "article" for blog posts |
| og:site_name | Optional | Your brand name for context |
Twitter Card Tags
Twitter/X reads og: tags but also has its own twitter: namespace for fine-grained control. The most impactful setting is the card type:
- "summary" — small square thumbnail + text. Default.
- "summary_large_image" — large banner image + text. Much more engaging for most content.
- "app" — for mobile apps.
- "player" — for video/audio content.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Short compelling summary.">
<meta name="twitter:image" content="https://example.com/images/og-cover.jpg">Social platforms aggressively cache OG images. If you update an image, use Facebook's Sharing Debugger and Twitter's Card Validator to purge the old cache and preview the new card.
How Hugo Checks Social Tags
Hugo's Metadata category includes checks for og:title, og:description, og:image, og:url, og:type, and Twitter Card presence. Missing or incorrectly sized og:image generates a high-impact warning because it's the single biggest factor in social share click-through rates.
References
- [1]The Open Graph Protocol — Official og: meta tag specification — ogp.me
- [2]Facebook Sharing Debugger — Preview and validate social share cards — developers.facebook.com
- [3]Twitter Cards Documentation — Card types, markup, and validation — developer.twitter.com