You share a link on Facebook or Twitter, and a nice card appears with an image, title, and description. That is Open Graph in action. Open Graph meta tags tell social media platforms exactly how to display your content when someone shares your page. Without them, you get a boring, auto-generated preview.
The Essential Open Graph Tags
There are four Open Graph tags you absolutely need: og:title for the title, og:description for the description, og:image for the preview image, and og:url for the canonical URL. These four give you a solid share card on most platforms.
<meta property="og:title" content="Learn HTML from Scratch">
<meta property="og:description" content="A comprehensive guide to HTML for beginners.">
<meta property="og:image" content="https://example.com/images/og-banner.jpg">
<meta property="og:url" content="https://example.com/learn-html">
Additional Open Graph Properties
Beyond the basics, you can specify og:type (website, article, product), og:site_name for your brand, og:locale for language, and og:video or og:audio for media content. These help platforms categorize and display your content more accurately.
<meta property="og:type" content="article">
<meta property="og:site_name" content="My Blog">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2025-01-15T08:00:00Z">
<meta property="article:author" content="Jane Smith">
Image Guidelines
The og:image should be at least 1200x630 pixels for the best display. Use a JPG, PNG, or GIF format. Keep the file size reasonable — social platforms may reject images that are too large. The image URL must be absolute, not relative.
<!-- Good: absolute URL with proper dimensions -->
<meta property="og:image" content="https://example.com/images/og-banner.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Learn HTML from Scratch - Course Banner">
<!-- Bad: relative URL -->
<meta property="og:image" content="/images/og-banner.jpg">
Twitter Card Tags
Twitter (now X) uses its own tags but falls back to Open Graph if they are missing. If you want the best experience on Twitter specifically, add the twitter: prefixed tags alongside your Open Graph tags.
<!-- Open Graph for general social sharing -->
<meta property="og:title" content="Learn HTML from Scratch">
<meta property="og:description" content="A comprehensive guide to HTML.">
<meta property="og:image" content="https://example.com/images/og-banner.jpg">
<!-- Twitter-specific tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Learn HTML from Scratch">
<meta name="twitter:description" content="A comprehensive guide to HTML.">
<meta name="twitter:image" content="https://example.com/images/og-banner.jpg">