Intermediate LevelHTML & Semantic Web
How do Open Graph and Twitter Card meta tags control social media preview cards?
❓ Interview Prompt: Explain Open Graph meta tags (og:title, og:image, og:description) and Twitter Card tags for rich link previews.
When users share website links on social media platforms (LinkedIn, Twitter, Facebook, Slack), crawlers inspect *Open Graph ('og:') and Twitter Card ('twitter:')* meta tags to render rich preview cards.
Essential Social Tags:
•
'<meta property="og:title" content="...">'
•
'<meta property="og:image" content="...">' (1200x630px recommended)
•
'<meta name="twitter:card" content="summary_large_image">'
Code Implementation Example
html
<head>
<!-- Open Graph Social Preview Meta Tags -->
<meta property="og:title" content="HTML5 Masterclass">
<meta property="og:description" content="100 hand-crafted interview questions and detailed answers.">
<meta property="og:image" content="https://example.com/og-banner.png">
<meta name="twitter:card" content="summary_large_image">
</head>💡Configuring Open Graph and Twitter Card social media preview meta tags.
🎯 Interview Key Takeaway
Include Open Graph og:image, og:title, and twitter:card meta tags to control social media link preview cards.
#Open Graph#Twitter Cards#SEO#Social Media#Intermediate
Back to all HTML & Semantic Web Questions→