🌱BeginnerAdvanced Basics
Open Graph and Social Tags
Control how your pages look when shared on Facebook, Twitter/X, LinkedIn with OG and Twitter Cards.
Overview
When someone shares your page on social media, platforms like Facebook, Twitter/X, and LinkedIn read special meta tags to generate the preview card title, description, image, and URL.
The Open Graph protocol (og:*) was created by Facebook and is now supported by most platforms. Twitter/X uses its own twitter:* meta tags (though it also reads og:* as fallback).
Without these tags, social platforms use whatever they can find on the page often producing ugly, inconsistent previews. With them, you control exactly how your page appears.
Key Points
- •og:title, og:description, og:image, og:url are the four essential Open Graph tags
- •og:type specifies the content type: website, article, product, video.movie, etc.
- •Images should be 1200×630px minimum for optimal display across platforms
- •Twitter Cards: twitter:card, twitter:title, twitter:description, twitter:image
- •twitter:card values: summary (small image), summary_large_image (full-width), player (video)
- •Use the Facebook Sharing Debugger and Twitter Card Validator to preview and refresh caches
Examples
Essential Open Graph meta tags
<head>
<!-- Open Graph (Facebook, LinkedIn, WhatsApp, Slack) -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/html-guide">
<meta property="og:title" content="HTML Guide for Beginners">
<meta property="og:description" content="Learn HTML from scratch with 40 interactive topics and exercises.">
<meta property="og:image" content="https://example.com/images/html-guide-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="LearnHTML.dev">
</head>Twitter Card meta tags
<!-- Twitter/X Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@learnhtml">
<meta name="twitter:title" content="HTML Guide for Beginners">
<meta name="twitter:description" content="Learn HTML with 40 interactive topics.">
<meta name="twitter:image" content="https://example.com/images/html-guide-og.jpg">Twitter uses og:* tags as fallback if twitter:* are missing.
Complete social sharing head section
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Guide for Beginners | LearnHTML.dev</title>
<meta name="description" content="Learn HTML from scratch.">
<link rel="canonical" href="https://example.com/html-guide">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/html-guide">
<meta property="og:title" content="HTML Guide for Beginners">
<meta property="og:description" content="Learn HTML from scratch.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
</head>Common Mistakes
- Using relative image URLs og:image must be an absolute URL with https://
- Images smaller than 1200×630px they appear blurry or cropped on some platforms
- Not refreshing social platform cache after fixing OG tags use the platform's debug tool
Note
After deploying OG changes, use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and Twitter Card Validator (cards-dev.twitter.com/validator) to force-refresh the cache and preview your cards.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4