Open Graph Meta Generator

Generate Open Graph meta tags to control how your content appears when shared on social media platforms.

Title (required)

Description

URL

Image URL

Type

Site Name

Locale

Open Graph Meta Generator (OG Tags for Social Share Previews)

Generate Open Graph meta tags instantly to control how your links appear when shared on Facebook, LinkedIn, Twitter/X, and other social platforms. Create properly formatted OG tags including title, description, image, URL, type, and locale. Copy and paste the generated code directly into your page's HTML head section.

Perfect for optimizing social media previews, increasing click-through rates, and ensuring your links display with the correct images and text across all social platforms.

What This Open Graph Meta Generator Creates

Our OG meta generator creates properly formatted Open Graph meta tags that control how your links appear when shared on social media platforms. The tool generates tags for og:title (the headline shown in previews), og:description (the text snippet below the title), og:url (the canonical URL for the page), og:image (the preview image), og:type (content type like website, article, video), og:site_name (your brand or site name), and og:locale (language and region).

These tags are placed in your page's HTML head section and are read by social platforms when someone shares your link. They determine the title, description, and image shown in the link preview, giving you control over your content's appearance on Facebook, LinkedIn, Twitter/X, messaging apps, and anywhere links are unfurled with rich previews.

Important clarification: Open Graph tags primarily affect social media previews and click-through rates from social shares, not search engine rankings. While they can indirectly help SEO by increasing social engagement and traffic, OG tags are not direct ranking factors for Google or other search engines. Their main purpose is making your shared links look professional and attractive on social platforms.

How to Use the Open Graph Meta Generator

Creating your Open Graph tags takes just a few simple steps:

Step 1: Fill in Your Page Information

Enter your page title (the headline you want shown in social previews), description (a compelling summary that encourages clicks), canonical URL (the permanent URL for this page), and image URL (absolute URL to your preview image). Select your content type from the dropdown (website for standard pages, article for blog posts, video for video content, etc.). Add your site name and locale if desired.

Step 2: Generate Your OG Tags

Click generate to create properly formatted Open Graph meta tags. The tool outputs HTML meta tags ready to paste into your page's head section.

Step 3: Copy and Paste Into Your HTML

Copy the generated code and paste it inside the <head>...</head> section of your HTML document. Place the OG tags in the head, typically after your standard meta tags but before closing the head tag.

Where to paste the code: Open your HTML file or page template and locate the <head> section. Paste the generated Open Graph tags within this section:

<head>
  <meta charset="UTF-8">
  <title>Your Page Title</title>
  <meta name="description" content="Your meta description">
  
  <!-- Paste your Open Graph tags here -->
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="Your description">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Your Site Name">
</head>

For WordPress sites, many themes and SEO plugins (like Yoast SEO, Rank Math, All in One SEO) provide interfaces for adding Open Graph tags without editing code. For Shopify, use theme liquid files or SEO apps. For other CMS platforms, check if your theme or plugins provide Open Graph management before manually editing templates.

Step 4: Test Your Open Graph Tags

After adding tags to your page, test how they appear using platform-specific debugging tools. Use Facebook's Sharing Debugger to preview and refresh Facebook's cache of your page. Use LinkedIn's Post Inspector to check how links appear on LinkedIn and refresh their cache. For Twitter/X, their Card Validator shows how your links will appear (Twitter uses OG tags as fallbacks when Twitter Card tags aren't present).

Open Graph Tags Explained

Understanding each Open Graph tag helps you use them effectively:

Required Open Graph properties are the minimum tags needed for valid Open Graph markup. These include og:title (the title shown in previews), og:type (content type), og:image (preview image URL), and og:url (canonical page URL). While platforms will often still show previews without all four, including all required tags ensures consistent, predictable display across platforms.

og:title (<meta property="og:title" content="...">) defines the headline shown when your link is shared. This should be compelling and descriptive, similar to your page's title tag but optimized for social sharing. It can differ from your HTML title tag if you want different headlines for search results versus social shares. Keep titles clear and concise, typically under 60-70 characters to avoid truncation, though exact limits vary by platform.

og:description (<meta property="og:description" content="...">) provides the text snippet shown below the title in link previews. Write compelling, actionable descriptions that encourage clicks. Unlike meta descriptions for search engines, OG descriptions are more consistently displayed on social platforms. Aim for 150-200 characters, though you can go longer since social platforms are less strict about truncation than search engines. Focus on benefits, intrigue, or key takeaways to drive engagement.

og:url (<meta property="og:url" content="...">) specifies the canonical URL for the page. This should be the permanent, preferred URL without tracking parameters or session IDs. Use the same URL format consistently (include or exclude www, use https). When multiple URLs point to the same content, og:url tells social platforms which URL to treat as the main one for counting shares and preventing duplicate previews. Always use absolute URLs including the protocol (https://).

og:image (<meta property="og:image" content="...">) defines the image shown in link previews. This is often the most important Open Graph tag because images dramatically affect click-through rates and engagement. The image URL must be absolute (including https://) and publicly accessible. See the next section for detailed image requirements and best practices. Multiple og:image tags can be added if you want to provide alternative images, though platforms may choose which to display.

og:type (<meta property="og:type" content="...">) indicates the content type. Common values include "website" (for standard web pages, homepages, about pages), "article" (for blog posts, news articles, editorial content), "video.movie" or "video.other" (for video content), "music.song" or "music.album" (for music content), "book" (for book pages), and "profile" (for personal profiles). The type affects how some platforms display content and which additional OG properties are relevant. Most pages use "website" or "article".

og:site_name (<meta property="og:site_name" content="...">) specifies your site or brand name. This appears in link previews on some platforms, helping establish brand identity. Use your consistent brand name across all pages. For example, "TechBlog" or "Acme Corporation". This is optional but recommended for brand recognition.

og:locale (<meta property="og:locale" content="...">) indicates the content's language and region using format like "en_US" (English, United States), "en_GB" (English, Great Britain), or "fr_FR" (French, France). This helps platforms display content appropriately for different regions and languages. If omitted, platforms typically default to "en_US". Only necessary if your content targets specific non-US-English audiences.

Advanced image properties (optional) include og:image:alt for image alt text, og:image:width and og:image:height for dimensions in pixels, and og:image:secure_url for the https version of the image URL if your main og:image uses http. These refinements help platforms process images more reliably but are optional for basic functionality.

Open Graph Image Best Practices

The og:image is arguably the most critical Open Graph tag because images dominate social media feeds and significantly impact engagement:

Recommended image size for Facebook and general use is at least 1200x630 pixels according to Meta's developer documentation. This 1.91:1 aspect ratio displays well in Facebook, LinkedIn, and most other platforms' link previews. Images at this size ensure sharp, clear previews without pixelation. Larger dimensions work fine (platforms will scale down), but smaller images may appear pixelated or be rejected. Facebook specifically recommends 1200x630 pixels as the optimal size.

LinkedIn image requirements are similar but slightly stricter. LinkedIn requires a minimum of 1200x627 pixels with a 1.91:1 aspect ratio. Images smaller than this minimum may not display at all in LinkedIn previews. LinkedIn also has file size recommendations around 5MB maximum for optimal performance. Use high-quality JPG or PNG images that meet these minimums for reliable LinkedIn sharing.

Image format and file size considerations matter for reliable display and fast loading. Use JPG for photographs and complex images, PNG for graphics with transparency or sharp edges. WebP is increasingly supported but JPG and PNG remain the safest choices for maximum compatibility. Keep file sizes under 5-8MB for optimal loading speed, though platforms typically accept larger files. Compress images to balance quality and file size.

Absolute URLs are required for og:image. The URL must be complete including the protocol: "https://example.com/image.jpg", not "/image.jpg" or "image.jpg". Relative URLs don't work with Open Graph. The image must be publicly accessible without authentication. If your image URL requires login, cookies, or special access, social platforms can't fetch it and previews will fail. Test image URLs by opening them in an incognito browser window to verify public accessibility.

Avoid blocking images in robots.txt or through other access restrictions. Social platforms' crawlers need to fetch your og:image to display it in previews. If you block the image URL with robots.txt, firewall rules, or geographic restrictions, previews will show without images. Ensure your og:image URL is accessible to all user agents, including social platform crawlers.

Image content matters for engagement. Choose images that are relevant to your content, visually appealing, include text overlays when appropriate (but don't make them too text-heavy as Facebook may limit distribution of overly promotional images), work well at different sizes and crops (platforms may crop images differently), and stand out in crowded social feeds. Avoid generic stock photos when possible. Custom graphics or relevant photographs perform better than generic imagery.

Consider multiple images for different contexts. Some platforms let you specify multiple og:image tags, and they may choose the one that best fits their display format. You can provide square images (1:1), horizontal images (1.91:1), and vertical images (4:5) to cover different platform preferences. The first og:image tag is typically the default, with subsequent ones as alternatives.

Test images before sharing widely. Use Facebook's Sharing Debugger, LinkedIn's Post Inspector, and Twitter's Card Validator to verify images display correctly. These tools show exactly how your og:image will appear and identify issues like wrong dimensions, blocked URLs, or missing images.

Platform-Specific Notes and Expectations

Different social platforms handle Open Graph tags with slight variations:

Facebook pioneered Open Graph and supports it comprehensively. Facebook reads og:title, og:description, og:image, og:type, and other OG tags to generate link previews. Facebook recommends 1200x630 pixel images for optimal display. Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) to preview how links appear and to refresh Facebook's cache of your page. Important: Facebook caches Open Graph data aggressively. If you update OG tags after a link has been shared, old previews won't automatically update. Use the Sharing Debugger to force Facebook to rescrape and refresh the cache.

LinkedIn also supports Open Graph tags and requires specific standards. LinkedIn needs og:title, og:description, og:image, and og:url to generate proper link previews. Images must be at least 1200x627 pixels. Use LinkedIn's Post Inspector (linkedin.com/post-inspector/) to test and refresh cached data. Critical limitation: LinkedIn's Post Inspector only refreshes cache for future shares, not existing posts. If you update OG tags after someone has already shared the link on LinkedIn, the old post will continue showing the old preview indefinitely. Only new shares after cache refresh will show updated information. Plan OG tags carefully before initial sharing on LinkedIn.

Twitter/X uses its own Twitter Card meta tags but falls back to Open Graph tags when Twitter Card tags are absent. If you include <meta name="twitter:card" content="summary_large_image">, Twitter will use twitter:title, twitter:description, and twitter:image if present, falling back to OG equivalents if Twitter-specific tags are missing. For reliable Twitter previews, explicitly add twitter:card tag. Common values are "summary_large_image" (large image preview) or "summary" (smaller square image). If you don't want to maintain separate Twitter Card tags, Twitter will use your OG tags as fallbacks, though explicitly adding twitter:card improves reliability. Use Twitter's Card Validator to test previews.

Messaging apps and other platforms like WhatsApp, Slack, Discord, Telegram, and iMessage typically support Open Graph tags for link unfurling. When you paste links into these apps, they fetch and display OG data. The same OG tags work across these platforms, so optimizing for Facebook and LinkedIn generally ensures good previews everywhere. Some messaging apps cache aggressively and may require time or tricks to refresh if you update tags.

Search engines don't use Open Graph tags for ranking but may use them in specific contexts. Google might display OG images for articles in some search features. However, OG tags are primarily for social media, not search rankings. Focus OG optimization on social engagement rather than expecting direct SEO benefits.

Troubleshooting Common Open Graph Issues

Here are solutions to frequent Open Graph problems:

"My link preview shows old image or old title after I updated OG tags" happens because social platforms cache Open Graph data aggressively. Facebook, LinkedIn, and other platforms store og: tag information when they first crawl a URL and don't automatically recrawl to check for updates. Solutions: Use Facebook's Sharing Debugger to force Facebook to rescrape your page and refresh its cache. Use LinkedIn's Post Inspector to refresh LinkedIn's cache, but understand this only affects new shares, not existing posts. For Twitter, the Card Validator can refresh cache. Wait several hours to days for caches to expire naturally if you can't manually refresh. Important: LinkedIn's cache refresh doesn't update existing shared posts, only future shares.

"My og:image is not showing in previews" has several common causes. First, verify the image URL is absolute (includes https://example.com, not relative path like /image.jpg). Check that the image is publicly accessible by opening the URL in an incognito browser window or different device. Ensure the image isn't blocked by robots.txt, firewall rules, or authentication requirements. Verify image dimensions meet minimum requirements (at least 1200x630 for Facebook/general, 1200x627 for LinkedIn). Check file format is JPG or PNG (avoid exotic formats). Ensure file size is reasonable (under 8MB). Test the og:image URL in platform debugging tools to see specific error messages.

"LinkedIn link preview not updating or showing wrong information" is often due to LinkedIn's aggressive caching and cache refresh limitations. Use LinkedIn's Post Inspector to refresh the cache, but understand this only affects new shares. Existing LinkedIn posts will continue showing the old preview indefinitely even after you refresh the cache. There's no way to update existing LinkedIn post previews. For future shares, verify og:title, og:description, og:image, and og:url are all present and correctly formatted. Check that your image meets LinkedIn's 1200x627 minimum size requirement. Wait 24-48 hours after cache refresh before sharing widely to ensure changes propagate.

"Twitter card not showing or showing wrong preview" typically means Twitter Card meta tags are missing. While Twitter falls back to Open Graph tags, explicitly adding twitter:card improves reliability. Add <meta name="twitter:card" content="summary_large_image"> for large image previews or <meta name="twitter:card" content="summary"> for smaller square images. Optionally add twitter:title, twitter:description, and twitter:image (Twitter uses these if present, falls back to og: equivalents if not). Use Twitter's Card Validator to test and verify previews work correctly.

"Different platforms show different images" can happen if you specify multiple og:image tags or if platforms choose differently based on aspect ratios. Each platform has preferences for image dimensions and may select different images from multiple options. To ensure consistent display, use a single og:image tag with the recommended 1200x630 size that works well everywhere. If you must provide multiple images, list your preferred default first.

"Preview shows a random image instead of my og:image" usually means the og:image tag is missing, malformed, or the URL is inaccessible. Social platforms fall back to finding images on the page when og:image is unavailable. They may choose the first image, largest image, or most prominent image based on their algorithms. Always include a properly formatted og:image tag with an absolute, publicly accessible URL to control which image appears.

"OG tags don't seem to be recognized or read by platforms" might indicate syntax errors or placement issues. Verify tags are in the <head> section, not in <body>. Check that property attributes use "property" not "name": <meta property="og:title"> not <meta name="og:title">. Ensure quotes are standard double quotes, not smart quotes or other characters. Validate HTML to catch syntax errors. Use platform debugging tools to see exactly what they're reading from your page.

"Share count disappeared or reset to zero" happens when you change the og:url. Social platforms track shares by the og:url value. If you change this URL, platforms treat it as a different page and share counts start over from zero. Keep og:url consistent once a page has been shared. If you must change URLs, understand that share counts won't transfer to the new URL.

Frequently Asked Questions

What are Open Graph meta tags?

Open Graph meta tags are HTML meta elements placed in your page's head section that control how your links appear when shared on social media platforms. Developed by Facebook (now Meta) and adopted widely across the web, Open Graph tags provide structured data that social platforms read to generate rich link previews with custom titles, descriptions, and images. When someone shares your link on Facebook, LinkedIn, Twitter/X, or messaging apps, these platforms fetch your Open Graph tags to display an attractive preview rather than showing just a plain URL. The Open Graph Protocol provides standardized properties like og:title, og:description, og:image, og:url, and og:type that work across platforms.

Which Open Graph tags are required?

The four required Open Graph properties for valid markup are og:title (the title/headline), og:type (content type like "website" or "article"), og:image (preview image URL), and og:url (canonical page URL). While social platforms often display previews even without all four tags, including all required properties ensures consistent, predictable display across all platforms. Additionally, og:description is strongly recommended though technically optional, as it provides the text snippet below the title that encourages clicks. For practical purposes, always include at least og:title, og:description, og:url, og:image, and og:type as a baseline set.

Where do I add Open Graph meta tags in my HTML?

Place Open Graph meta tags inside the <head>...</head> section of your HTML document, typically after your standard meta tags (charset, viewport) and SEO meta tags (title, description) but before the closing </head> tag. Open Graph tags use the format <meta property="og:title" content="Your Title"> with "property" attribute rather than "name". They must be in the head section to be recognized by social platforms. For WordPress, many SEO plugins (Yoast, Rank Math) provide interfaces for managing OG tags without editing code. For other CMS platforms, check for built-in OG support or plugins before manually editing theme files.

What does og:type do, and which value should I choose?

The og:type property indicates what kind of content your page represents. Common values include "website" for standard web pages, homepages, about pages, and landing pages; "article" for blog posts, news articles, and editorial content; "video.movie" or "video.other" for video content; "music.song" or "music.album" for music; "book" for book pages; and "profile" for personal or business profiles. The type affects how some platforms display content and determines which additional Open Graph properties are relevant. For most pages, use "website". For blog posts and news articles, use "article". The content type helps platforms categorize and display your content appropriately.

What size should my og:image be for Facebook?

Facebook recommends images be at least 1200x630 pixels for optimal display in link previews. This 1.91:1 aspect ratio (approximately 2:1) ensures sharp, clear previews across Facebook feeds, timelines, and sharing contexts. Smaller images may appear pixelated or display poorly. Larger dimensions are acceptable as Facebook will scale down, but 1200x630 is the recommended minimum. Use JPG or PNG format, keep file size under 5-8MB for optimal loading, and ensure the image URL is absolute (https://example.com/image.jpg) and publicly accessible. This same size works well for most other platforms too.

What are LinkedIn's Open Graph requirements and image size rules?

LinkedIn requires a minimum image size of 1200x627 pixels with a 1.91:1 aspect ratio for link previews. Images below this minimum may not display at all. LinkedIn also requires og:title, og:description, og:url, and og:image to generate complete previews. Keep images under 5MB file size for best performance. Use JPG or PNG formats. Ensure image URLs are absolute and publicly accessible. LinkedIn is stricter than some other platforms about image requirements, so meeting these minimums is essential for reliable LinkedIn sharing. Test with LinkedIn's Post Inspector before sharing widely.

Why is my link preview not updating on LinkedIn?

LinkedIn aggressively caches Open Graph data and has important limitations on cache refresh. When you use LinkedIn's Post Inspector to refresh the cache, it only affects future shares, not existing posts. If someone already shared your link on LinkedIn, that post will continue showing the old preview indefinitely, even after you update OG tags and refresh the cache. There's no way to update existing LinkedIn post previews. Only new shares after using Post Inspector will show updated information. Plan your OG tags carefully before initial LinkedIn sharing. For pages that have been shared, consider sharing the updated link as a new post rather than expecting old posts to update.

Why is my og:image not showing on Facebook?

Common causes include the image URL being relative instead of absolute (must include https://example.com), the image not being publicly accessible (requires login, is blocked by robots.txt or firewall, or has access restrictions), dimensions below Facebook's minimum of 1200x630 pixels, unsupported image format (use JPG or PNG), excessive file size (keep under 8MB), or Facebook's cache showing old data before you added the og:image tag. Solutions: verify image URL works in an incognito browser, use Facebook's Sharing Debugger to check what Facebook sees and force cache refresh, ensure og:image tag is properly formatted with property="og:image", and wait several hours after making changes as Facebook's cache may take time to update.

Does Twitter/X use Open Graph tags?

Yes, Twitter (now X) uses Open Graph tags as fallbacks when Twitter Card meta tags aren't present. Twitter primarily looks for its own twitter:card, twitter:title, twitter:description, and twitter:image tags. If these Twitter-specific tags are missing, Twitter falls back to using og:title, og:description, and og:image. For the most reliable Twitter previews, explicitly add <meta name="twitter:card" content="summary_large_image"> along with your Open Graph tags. This ensures Twitter generates rich previews rather than relying solely on fallback behavior. You can use OG tags alone and Twitter will usually work, but adding the twitter:card tag improves reliability.

Should Open Graph image URLs be absolute or can they be relative?

Open Graph image URLs must be absolute, not relative. Use complete URLs including the protocol: "https://example.com/images/preview.jpg", not "/images/preview.jpg" or "images/preview.jpg". Social platforms need to fetch images from external servers, so relative URLs that work within your site's context won't work for external crawlers. Always use fully qualified absolute URLs for og:image. The same applies to og:url, which should also be absolute. Test URLs by opening them in an incognito browser to verify they're publicly accessible with the absolute path.

What is og:locale and do I need it?

The og:locale property indicates your content's language and region using format like "en_US" (English, United States), "en_GB" (English, Great Britain), "fr_FR" (French, France), or "es_ES" (Spanish, Spain). This helps social platforms display content appropriately for different audiences and can affect how platforms categorize content regionally. If you omit og:locale, platforms typically default to "en_US". You only need og:locale if your content targets specific non-US-English audiences or if you're serving content in multiple languages. For US English sites, it's optional and often omitted. For international content, including og:locale helps platforms understand your target audience.

Do Open Graph tags help with SEO rankings?

Open Graph tags don't directly affect search engine rankings in Google, Bing, or other search engines. They're specifically designed for social media link previews, not search results. However, OG tags can indirectly benefit SEO by increasing social engagement, click-through rates from social shares, and traffic to your site. More social sharing and engagement can lead to more visibility, backlinks, and signals that may indirectly influence SEO. Google may use og:image in some search features for articles, but this is secondary usage. The primary purpose and value of Open Graph tags is controlling social media previews and improving social engagement, not ranking in search engines.