How to Use the Open Graph Generator
A tool to quickly generate and preview og: meta tags to ensure your links look beautiful when shared on social media platforms.
Step-by-Step Guide
- Auto-Fetch (Optional): Paste a live URL and click "Fetch" to automatically pull existing Open Graph tags from the internet.
- Fill in Details: Provide an eye-catching title, description, and an absolute URL to your feature image (1200x630px recommended). Don't forget image alt text for accessibility.
- Verify Preview: Check the "Social Feed Preview" to ensure your image isn't broken and your text isn't being truncated awkwardly.
-
Copy & Paste: Click "Copy" and paste the generated tags inside the
<head>section of your website.
What are Open Graph tags?
Originally created by Facebook, the Open Graph protocol standardizes how web pages are represented on social graphs. By adding og: tags to your site, you dictate exactly what title, description, and image appear when someone shares your link on Facebook, LinkedIn, Discord, iMessage, and more.
Best Practices
Titles: Keep under 90 characters. Keep the most important words at the beginning.
Images: Always use an absolute URL (e.g., https://...). The ideal resolution is 1200 x 630 pixels. Include image width and height tags to ensure social platforms display the card immediately on the first share.