Open Graph Preview Generator
Preview how your page will look when shared on social media. Generate OG and Twitter Card meta tags.
- Home
- > Web Dev >
- OG Preview
Preview
HELP2CODE.APP
Help2Code - Free Online Developer Tools
Free online developer tools for JSON formatting, image optimization, text conversion, and more. 100% in your browser, no uploads required.
https://help2code.app
Preview shown is approximate. Actual rendering varies by platform.
What is Open Graph?
Open Graph is a protocol that enables web pages to become rich objects when shared on social media platforms like Facebook, LinkedIn, and Twitter. By adding OG meta tags to your HTML, you control how your content appears with a title, description, image, and more.
This tool features:
- Live preview — See how your page will look when shared on social media in real time.
- URL fetch — Enter a URL to automatically extract existing OG meta tags.
- OG code generation — Generates both Open Graph and Twitter Card meta tags ready to copy.
- Type selection — Choose from article, product, video, music, and more.
Essential OG Meta Tags
| Property | Description | Example |
|---|---|---|
og:title |
The title of your page | My Awesome Article |
og:description |
A brief description (2-4 sentences) | Learn how to build... |
og:image |
URL of the featured image (1200x630 recommended) | https://site.com/image.jpg |
og:url |
The canonical URL of the page | https://site.com/page |
og:type |
The type of content (website, article, etc.) | article |
og:site_name |
The name of your website | Help2Code |
How to Use
- Enter your page URL — Type or paste the URL you want to preview. Click Fetch OG Tags to automatically extract existing meta tags from the page.
- Edit meta tags — Fill in the title, description, image URL, site name, and type fields. The preview updates in real time.
- Copy the code — Switch between Open Graph and Twitter Card tabs to copy the generated HTML meta tags.
Frequently Asked Questions
Do I need all OG tags?
Facebook recommends at least og:title, og:description, og:image, and og:url for the best sharing experience. og:site_name and og:type are optional but recommended.
What image size should I use?
The recommended image size is 1200 x 630 pixels with a 1.91:1 aspect ratio. Images should be less than 8MB and in PNG, JPEG, or WebP format.
What is the difference between OG and Twitter Cards?
Open Graph is used by Facebook, LinkedIn, and other platforms. Twitter Cards use similar meta tags prefixed with twitter:. If you don't specify Twitter Cards, Twitter falls back to OG tags.
How does the URL fetch work?
When you click Fetch OG Tags, the URL is sent to our server which fetches the HTML and extracts Open Graph meta tags. Your submitted URL is not stored or logged.
