Lesson 25 of 55 · HTML
Open Graph & Twitter Card Tags
Duration: 9 min
Social Media Rich Previews
<meta property='og:title' content='My Portfolio' />
<meta property='og:description' content='Front‑end developer showcasing projects.' />
<meta property='og:image' content='https://example.com/preview.png' />
<meta property='og:url' content='https://example.com/' />
<meta property='og:type' content='website' />
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:title' content='My Portfolio' />
<meta name='twitter:description' content='Front‑end developer portfolio.' />
<meta name='twitter:image' content='https://example.com/preview.png' />
<meta name='twitter:image:alt' content='Screenshot of portfolio homepage' />
Image guidelines
- Use 1200 × 630 px for optimal display on Facebook and Twitter.
- Keep the image under 5 MB to avoid timeout errors.
- Provide a descriptive
twitter:image:altfor accessibility.
Testing tools
- Facebook Sharing Debugger – Refreshes the cache and shows parsed OG tags.
- Twitter Card Validator – Previews how the card will appear on Twitter.
- Meta Tag Analyzer (various online tools) can check completeness.
Quick checklist for social meta tags
- Open Graph tags (
og:title,og:description,og:image,og:url,og:type) present? ✅ - Twitter Card tags present (
twitter:card,twitter:title,twitter:description)? ✅ - Image size follows 1200 × 630 px recommendation? ✅
twitter:image:altprovided for accessibility? ✅- Tested with Facebook and Twitter debuggers? ✅
Tip: Keep the Open Graph data consistent across pages for a cohesive brand presence on social platforms.