What are Open Graph (OG) tags and why are they important?

Open Graph tags are meta tags that control how your content appears when shared on social media platforms like Facebook, LinkedIn, Pinterest, and Discord. They define the title, description, image, and type for social shares, significantly improving engagement and click-through rates.

How do I create Open Graph tags online?

Enter your content details (title, description, URL, image), select the OG type (website, article, product, etc.), configure optional properties (locale, site name), preview how your content will appear when shared, and copy the generated meta tags.

Which Open Graph tags are required?

The minimum required tags are: og:title (content title), og:type (content type like website, article), og:image (preview image URL), og:url (canonical URL). While only og:title and og:type are technically required, including og:image and og:url is strongly recommended.

What is the recommended image size for og:image?

The recommended size is 1200x630 pixels with a 1.91:1 aspect ratio. This works well across most platforms: Facebook (1200x630), LinkedIn (1200x627), Twitter (1200x628). Use high-quality images under 8MB in JPEG or PNG format.

Do I need both Open Graph tags and Twitter Cards?

Twitter will use OG tags as a fallback, so you don't strictly need Twitter-specific tags. However, adding Twitter card tags gives you more control over how content appears on Twitter, including card type selection and Twitter-specific features like player cards.

How do I choose the right og:type?

Choose based on content: website (general pages, homepages), article (blog posts, news), product (e-commerce items), profile (user pages), video.movie/video.episode (video content), music.song/music.album (music), event (events), business.business (local businesses).

How can I test and debug my Open Graph tags?

Use official debugging tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), Twitter Card Validator (cards-dev.twitter.com/validator). These show exactly how your content will appear and highlight issues.

Why aren't my Open Graph tag changes showing up?

Social platforms cache OG data aggressively. To force a refresh: use the platform's debug tool to scrape the URL again. Facebook: click "Scrape Again" in Sharing Debugger. Changes can take a few minutes to propagate across all servers.

Can I specify multiple images in Open Graph?

Yes, you can include multiple og:image tags. The first image is typically used as the primary image, but platforms may allow users to choose from available images when sharing. Each image should have its own og:image:width, og:image:height, and og:image:alt tags.

How do I handle multiple languages with Open Graph?

Use og:locale for the primary language and og:locale:alternate for other versions. Format is language_TERRITORY (e.g., en_US, es_ES, fr_FR). This helps platforms show the right language version to users based on their preferences.

What are App Links in Open Graph?

App Links (al:ios, al:android) enable deep linking to your mobile apps when users click shared links. Include app store IDs and URL schemes so platforms can offer "Open in App" options, driving app engagement from social shares.

Do I need a Facebook App ID (fb:app_id)?

A Facebook App ID is optional but recommended if you want to use Facebook Insights for shared content, access Facebook's API features, or enable Facebook comments. Create one at developers.facebook.com. It's a numeric ID linking content to your developer account.

How do I add video to Open Graph tags?

Set og:type to video.movie, video.episode, or video.other. Add og:video with the video URL (MP4 recommended), og:video:type (e.g., video/mp4), og:video:width and og:video:height. Always include a fallback og:image for platforms that don't support video.

What Open Graph tags should I use for e-commerce products?

Use og:type="product" and include: product:price:amount (e.g., "29.99"), product:price:currency (e.g., "USD"), product:availability (instock, oos, preorder), product:condition (new, refurbished, used), product:brand, product:retailer_item_id.

Is my Open Graph data secure when using this generator?

Yes! All Open Graph tag generation happens 100% in your browser using JavaScript. Your content and URLs are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy and security.

What are Open Graph (OG) tags and why are they important?

Open Graph tags are meta tags that control how your content appears when shared on social media platforms like Facebook, LinkedIn, Pinterest, and Discord. They define the title, description, image, and type for social shares, significantly improving engagement and click-through rates.

How do I create Open Graph tags online?

Enter your content details (title, description, URL, image), select the OG type (website, article, product, etc.), configure optional properties (locale, site name), preview how your content will appear when shared, and copy the generated meta tags.

Which Open Graph tags are required?

The minimum required tags are: og:title (content title), og:type (content type like website, article), og:image (preview image URL), og:url (canonical URL). While only og:title and og:type are technically required, including og:image and og:url is strongly recommended.

What is the recommended image size for og:image?

The recommended size is 1200x630 pixels with a 1.91:1 aspect ratio. This works well across most platforms: Facebook (1200x630), LinkedIn (1200x627), Twitter (1200x628). Use high-quality images under 8MB in JPEG or PNG format.

Do I need both Open Graph tags and Twitter Cards?

Twitter will use OG tags as a fallback, so you don't strictly need Twitter-specific tags. However, adding Twitter card tags gives you more control over how content appears on Twitter, including card type selection and Twitter-specific features like player cards.

How do I choose the right og:type?

Choose based on content: website (general pages, homepages), article (blog posts, news), product (e-commerce items), profile (user pages), video.movie/video.episode (video content), music.song/music.album (music), event (events), business.business (local businesses).

How can I test and debug my Open Graph tags?

Use official debugging tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), Twitter Card Validator (cards-dev.twitter.com/validator). These show exactly how your content will appear and highlight issues.

Why aren't my Open Graph tag changes showing up?

Social platforms cache OG data aggressively. To force a refresh: use the platform's debug tool to scrape the URL again. Facebook: click "Scrape Again" in Sharing Debugger. Changes can take a few minutes to propagate across all servers.

Can I specify multiple images in Open Graph?

Yes, you can include multiple og:image tags. The first image is typically used as the primary image, but platforms may allow users to choose from available images when sharing. Each image should have its own og:image:width, og:image:height, and og:image:alt tags.

How do I handle multiple languages with Open Graph?

Use og:locale for the primary language and og:locale:alternate for other versions. Format is language_TERRITORY (e.g., en_US, es_ES, fr_FR). This helps platforms show the right language version to users based on their preferences.

What are App Links in Open Graph?

App Links (al:ios, al:android) enable deep linking to your mobile apps when users click shared links. Include app store IDs and URL schemes so platforms can offer "Open in App" options, driving app engagement from social shares.

Do I need a Facebook App ID (fb:app_id)?

A Facebook App ID is optional but recommended if you want to use Facebook Insights for shared content, access Facebook's API features, or enable Facebook comments. Create one at developers.facebook.com. It's a numeric ID linking content to your developer account.

How do I add video to Open Graph tags?

Set og:type to video.movie, video.episode, or video.other. Add og:video with the video URL (MP4 recommended), og:video:type (e.g., video/mp4), og:video:width and og:video:height. Always include a fallback og:image for platforms that don't support video.

What Open Graph tags should I use for e-commerce products?

Use og:type="product" and include: product:price:amount (e.g., "29.99"), product:price:currency (e.g., "USD"), product:availability (instock, oos, preorder), product:condition (new, refurbished, used), product:brand, product:retailer_item_id.

Is my Open Graph data secure when using this generator?

Yes! All Open Graph tag generation happens 100% in your browser using JavaScript. Your content and URLs are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy and security.

Open Graph Generator

simple

Generate Open Graph meta tags for social media sharing on Facebook, LinkedIn, Pinterest, and Discord with live preview.

Web Developmentopen graphogfacebooksocial

100% Private - Runs Locally

How to Use

1Enter content details
2Add image URL
3Preview social card
4Copy OG tags

Examples

Basic Website

Input

Minimal OG tags for a simple website homepage

Output

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="My Website - Welcome">
<meta property="og:description" content="Welcome to my website. Discover our products and services.">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
<meta prope...

Blog Article

Input

Complete OG tags for a blog post with author and timestamps

Output

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="10 Tips for Better SEO in 2025">
<meta property="og:description" content="Learn the latest SEO strategies to improve your website ranking and drive more organic traffic.">
<meta property="og:url" content="https://blog.example.com/seo-t...

E-commerce Product

Input

Product page with price, availability, and brand information

Output

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Premium Wireless Headphones - $149.99">
<meta property="og:description" content="Experience crystal-clear audio with our premium wireless headphones. 40-hour battery life, active noise cancellation.">
<meta property="og:url" content="h...

Video Content

Input

Video page with duration, actors, and director

Output

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="The Future of AI - Documentary">
<meta property="og:description" content="Explore how artificial intelligence is reshaping our world in this compelling documentary.">
<meta property="og:url" content="https://videos.example.com/ai-docum...

Music Track

Input

Song page with album, artist, and duration

Output

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Midnight Dreams - Luna Star">
<meta property="og:description" content="Listen to the latest hit single from Luna Star's new album 'Starlight'.">
<meta property="og:url" content="https://music.example.com/tracks/midnight-dreams">
<meta ...

Mobile App Landing

Input

App landing page with deep links for iOS and Android

Output

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="TaskMaster - Productivity App">
<meta property="og:description" content="Boost your productivity with TaskMaster. Available on iOS and Android.">
<meta property="og:url" content="https://taskmaster.app">
<meta property="og:type" conten...

Frequently Asked Questions

Related Tools

View all

Twitter Card Generator

Generate Twitter Card meta tags for rich tweet previews. Support for Summary, Summary Large Image, Player, and App cards.

Meta Tag Generator

Generate HTML meta tags for SEO, social sharing, and search engine optimization. Includes Open Graph, Twitter Cards, and all essential meta tags.

 <meta property="og:title" content="My Website - Welcome"> <meta property="og:description" content="Welcome to my website. Discover our products and services."> <meta property="og:url" content="https://example.com"> <meta property="og:type" content="website"> <meta prope...

 <meta property="og:title" content="10 Tips for Better SEO in 2025"> <meta property="og:description" content="Learn the latest SEO strategies to improve your website ranking and drive more organic traffic."> <meta property="og:url" content="https://blog.example.com/seo-t...

 <meta property="og:title" content="Premium Wireless Headphones - $149.99"> <meta property="og:description" content="Experience crystal-clear audio with our premium wireless headphones. 40-hour battery life, active noise cancellation."> <meta property="og:url" content="h...

 <meta property="og:title" content="The Future of AI - Documentary"> <meta property="og:description" content="Explore how artificial intelligence is reshaping our world in this compelling documentary."> <meta property="og:url" content="https://videos.example.com/ai-docum...

 <meta property="og:title" content="Midnight Dreams - Luna Star"> <meta property="og:description" content="Listen to the latest hit single from Luna Star's new album 'Starlight'."> <meta property="og:url" content="https://music.example.com/tracks/midnight-dreams"> <meta ...

 <meta property="og:title" content="TaskMaster - Productivity App"> <meta property="og:description" content="Boost your productivity with TaskMaster. Available on iOS and Android."> <meta property="og:url" content="https://taskmaster.app"> <meta property="og:type" conten...