OG Tag Settings
My Website Title
example.com
example.com
My Website Title
A brief description of your website. This text appears when shared on social media.
𝕏 Twitter/X
My Website Title
A brief description of your website. This text appears when shared on social media.
🔗 example.com
Meta Tags Code
<meta property="og:title" content="My Website Title" /> <meta property="og:description" content="A brief description of your website. This text appears when shared on social media." /> <meta property="og:image" content="https://placehold.co/1200x630/3b82f6/ffffff?text=OG+Image" /> <meta property="og:url" content="https://example.com" /> <meta property="og:site_name" content="My Website" /> <meta property="og:type" content="website" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="My Website Title" /> <meta name="twitter:description" content="A brief description of your website. This text appears when shared on social media." /> <meta name="twitter:image" content="https://placehold.co/1200x630/3b82f6/ffffff?text=OG+Image" />
📱 What is OG Preview?
Open Graph (OG) tags define the title, description, and image that appear when a webpage is shared on social media. This tool lets you see in real-time how your link will appear on platforms like Facebook, Twitter, and LinkedIn. The configured settings are generated as copy-ready meta tag code that you can paste directly into your website's <head> section.
📋 Key OG Tags
| Tag | Description | Recommended |
|---|---|---|
| og:title | Page title | Under 60 chars |
| og:description | Page description | Under 160 chars |
| og:image | Preview image | 1200×630px |
| og:url | Canonical URL | Absolute path |
| og:type | Content type | website, article, etc. |
💡 OG Image Optimization Tips
- Recommended size: 1200×630px (1.91:1 ratio) optimized for most platforms
- File format: JPG or PNG (PNG supports transparency)
- File size: Under 5MB, ideally under 1MB
- Center important content: Crop areas vary by platform
- Text overlay: Keep under 20% of image area (Facebook policy)
Frequently Asked Questions
Why does the preview not change after updating OG tags?▼
Platforms cache OG information. Use Facebook Sharing Debugger or Twitter Card Validator to refresh the cache and see your updates.
Does og:image need to be an absolute URL?▼
Yes, relative paths are not recognized. Use a full URL starting with https://.
Should I include both Twitter Cards and OG tags?▼
Twitter reads OG tags but prioritizes its own twitter: tags when present. Including both is recommended for optimal results.
What is OG Tag Preview?
Edit Open Graph meta tags and see how your page appears when shared on social media. Preview for Facebook, Twitter/X, and LinkedIn included.