If you want your website to look great when shared on social media (Facebook, Twitter, LinkedIn, Discord, etc.), you need Open Graph (OG) tags.
Open Graph lets you control the title, description, image, and more that appear when someone shares your link.
1. What is Open Graph?
Open Graph is a set of meta tags in your HTML <head> that social platforms use to generate rich previews.
Basic OG tags:
<meta property="og:title" content="My Awesome Website">
<meta property="og:description" content="This is a cool website about tech and AI.">
<meta property="og:image" content="https://example.com/preview-image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
2.** Main OG Properties**
| Property | Description | Example |
| ---------------- | ---------------------------------------------- | --------------------------------------- |
| og:title | The title of your content | My Awesome Website |
| og:description | A short description | Learn coding, AI, and web development |
| og:image | Image URL to display | https://example.com/image.jpg |
| og:url | Canonical URL of your page | https://example.com |
| og:type | Type of object (website, article, video, etc.) | website |
| og:site_name | Your website or brand name | My Blog |
Optional but Useful OG Tags
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Preview image showing cool stuff">
Locale → language/region of your content.
Image dimensions → helps platforms render previews correctly.
Alt text → improves accessibility and SEO.Twitter Cards (Bonus)
Twitter uses its own meta tags called Twitter Cards, but you can reuse OG tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Awesome Website">
<meta name="twitter:description" content="This is a cool website about tech and AI.">
<meta name="twitter:image" content="https://example.com/preview-image.jpg">-
Testing Your OG Tags
- Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
- Twitter Card Validator: https://cards-dev.twitter.com/validator
- LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
- Use these tools to preview and troubleshoot how your pages will appear on social media.
By using Open Graph correctly, your website will look professional and clickable when shared. 🚀
Rich previews increase clicks, engagement, and overall site traffic.
Top comments (0)