Tools
Open Graph Generator
The OG meta tag generator creates the Open Graph and Twitter Card meta tags needed to control how your page appears when shared on social platforms like Facebook, LinkedIn, Twitter, and Slack. Enter your page title, description, image URL, and other properties to get the complete set of tags ready to paste into your HTML head section. A live preview shows how the card will look when shared.
What are Open Graph Meta Tags?
Open Graph is a protocol originally developed by Facebook that allows web pages to define how they appear when shared on social media platforms. By adding og: meta tags to the HTML head, you specify the title, description, preview image, page type, and URL that platforms use when generating a link preview card. Without these tags, platforms attempt to infer content automatically, often with poor results. Twitter Cards work similarly using twitter: meta tags and extend the Open Graph protocol with Twitter-specific layouts.
How does it work?
Fill in the form fields for your page title, description, canonical URL, preview image URL, content type, and optionally Twitter-specific fields like card type and site handle. The tool generates the corresponding HTML meta tags in real time and displays a simulated preview of how the card will appear on major platforms. Copy the generated tags and paste them inside the <head> section of your HTML document. The preview image should be at least 1200x630 pixels for best results.
Typical Use Cases
- Adding social sharing previews to a blog post or landing page
- Ensuring a product page shows the correct image and title when shared on LinkedIn
- Generating Twitter Card tags for an article with a large image summary card
- Auditing and correcting missing or incorrect Open Graph tags on an existing site
Step-by-step Guide
- Step 1: Enter the page title, description, and canonical URL.
- Step 2: Provide the absolute URL of the preview image (min 1200x630 px recommended).
- Step 3: Select the content type (website, article, product) and fill in optional fields.
- Step 4: Copy the generated meta tags and paste them into your HTML <head>.
Example
Input
Title: 'My Product', URL: https://example.com, Image: https://example.com/og.png
Output
<meta property='og:title' content='My Product'> <meta property='og:url' content='https://example.com'> ...
Tips & Notes
- Use an absolute URL with https:// for og:image — relative paths are not resolved by social crawlers.
- Keep og:description under 155 characters to avoid truncation in preview cards.
- Use the Twitter Card validator and Facebook Sharing Debugger to force a cache refresh after updating tags.
Frequently Asked Questions
Why is social media still showing old preview data after I updated the tags?
Social platforms cache Open Graph data aggressively. Use the platform's official cache-clearing tool (Facebook Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator) to fetch fresh data.
Do I need both og: and twitter: tags?
Twitter falls back to Open Graph tags if twitter: tags are absent, so adding og: tags is sufficient for basic support. Twitter-specific tags like twitter:card and twitter:site unlock additional card layouts and features.
Open Graph Generator
Generate Open Graph and social media meta tags for your website — compatible with Facebook, Twitter/X, LinkedIn, and more.
Open Tool