Free · Fast · Privacy-first

Open Graph Meta Tags Generator

When someone shares your page on Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage, or any of the dozens of platforms that adopted the Open Graph protocol, OG meta tags determine exactly what title, image, and description appear in the resulting link preview.

⚡

Generates all essential OG properties

🔒

Image dimension guidance (1200x630px recommended)

✨

Facebook and LinkedIn compatible

⚡

Copy-ready HTML output

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Meta Tags to your website

Drop the Meta Tags into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/seo-tools/meta-tags?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Meta Tags by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/seo-tools/meta-tags?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Meta Tags by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

How the Open Graph Protocol Controls Your Social Sharing Previews

The Open Graph protocol was created by Facebook in 2010 as an extension of the RDFa specification and has since become the de facto standard for social sharing metadata across virtually every major platform on the modern web. When you share a URL on Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage, Telegram, Pinterest, or any of the messaging clients that respect the protocol, those platforms send an HTTP request to fetch your page and parse its OG meta tags from the head section to construct the rich preview that appears in the chat or feed. The four required OG properties are og:title for the title to display, og:type for the content type which can be website, article, product, or other type strings, og:image for the image URL to show in the preview, and og:url for the canonical URL pointing to the authoritative version of the content. Optional but highly recommended supporting properties include og:description for the snippet text, og:site_name for brand attribution, og:locale for language and region targeting, article:author and article:published_time for editorial content, and product:price:amount for e-commerce items.

The og:image specification is where the majority of Open Graph implementations fail in practice, and the failures are usually invisible until someone actually shares the link and notices the broken preview. Facebook's documentation specifies a minimum of two hundred by two hundred pixels but recommends twelve hundred by six hundred thirty pixels for high-resolution display across modern feed surfaces. Images below six hundred by three hundred fifteen pixels are shown as small thumbnails rather than large previews, significantly reducing visual impact in social feeds and dramatically cutting through-click rates. The image must be accessible via HTTPS without authentication, because images behind login walls, private storage buckets, or served via redirect chains will fail to load when Facebook's scraper attempts to fetch them. Open Graph data caching is also aggressive, with Facebook caching previews for up to thirty days, meaning changes to your tags will not appear in new shares until you force a cache refresh through the Facebook Sharing Debugger at the developers.facebook.com slash tools slash debug URL.

For sites with dynamic content like e-commerce, news, blogs, or user-generated platforms, OG tags should be populated dynamically from page data rather than being hardcoded static strings that go stale the moment the underlying content changes. In Next.js, populate og:title from the page's title prop using the metadata API in the app router or the Head component in the pages router. In WordPress, the Yoast SEO or Rank Math plugin handles dynamic OG population automatically by pulling from the post title, excerpt, and featured image fields. In Shopify, the theme controls OG generation through the head.liquid include and pulls from product fields. In any CMS, the principle is the same: ensure OG tags pull from the same metadata fields as your title and description rather than requiring separate manual entries for each page, which is the most common cause of stale or missing Open Graph data on large sites.

Beyond the core implementation, several advanced Open Graph techniques separate a polished social presence from a basic one. The og:image:width and og:image:height tags let platforms render link previews faster by skipping the image dimension lookup, which can shave hundreds of milliseconds off preview rendering in chat clients. The og:image:alt tag provides alternative text for screen readers and accessibility tooling. The article:section and article:tag tags improve content categorisation on platforms like LinkedIn that surface editorial content through topic-based discovery. For multilingual sites, og:locale:alternate lists every additional language version of the page so platforms can route users to the correct localised content. Using all of these together produces a richer, more discoverable social presence than relying on the four required properties alone, and the FixTools generator outputs them in the correct order with the proper namespacing so you do not have to memorise the syntax.

Open Graph Protocol: Official Specification Facebook Sharing Debugger Tool

How to use this tool

💡

Enter your page URL, title, description, and image URL to generate a complete set of Open Graph meta tags.

How It Works

Step-by-step guide to open graph meta tags generator:

1
Enter your page URL
Provide the canonical HTTPS URL of the page you are adding Open Graph tags to, because this exact string becomes the og:url value that platforms use to deduplicate shares and route engagement back to your site. Use the production URL with the correct protocol and trailing slash convention that matches the rest of your site's canonical structure rather than a staging URL or a relative path. A mismatch between og:url and the actual page URL can cause platforms to treat shared variants as separate links and split engagement metrics across multiple cached entries.
2
Set the title, description, and image
Enter the og:title up to ninety-five characters which can be more conversational than your SEO title tag, the og:description up to two hundred characters which can emphasise emotional appeal more than your meta description, and the URL of your twelve hundred by six hundred thirty pixel og:image hosted on an HTTPS endpoint. The image must return a 200 status without redirects, must be smaller than eight megabytes, and should be saved as a JPEG or PNG for maximum compatibility across every platform that respects the Open Graph standard.
3
Choose the page type
Select the correct og:type value for the content you are tagging, choosing website for homepages and general informational pages, article for blog posts and editorial content, product for individual e-commerce items, video.movie or video.episode for video content, and music.song or music.album for audio content. The correct type unlocks additional namespaced properties relevant to that content category, such as article:author for editorial pieces or product:price:amount for shoppable items. Choosing the wrong type or omitting the property entirely defaults to website and loses these enhanced capabilities.
4
Generate, copy, and deploy
Generate the complete Open Graph tag HTML block, copy it from the output panel, and paste it inside the head section of your page near the top before any large script tags. Test the implementation immediately after deploying by pasting the URL into the Facebook Sharing Debugger to confirm the tags are detected and rendered correctly. If you spot any issues like a missing image or an unexpected fallback title, click Scrape Again to force a fresh fetch and verify the corrected version is now cached for future shares from that URL.

Real-world examples

Common situations where this approach makes a real difference:

Blog post social share fix

A blogger notices that her articles consistently share with no image on LinkedIn and a tiny grey thumbnail on Facebook, which has been quietly suppressing engagement on every social share for months without anyone realising the metadata was the cause. She generates a complete set of Open Graph tags with the correct twelve hundred by six hundred thirty pixel image URL, a tailored og:description, and an article og:type that unlocks LinkedIn's editorial content surfaces. After deploying and forcing a cache refresh, shares immediately start displaying correctly with prominent featured images, and the next batch of LinkedIn posts she publishes earn three times the click-through volume of the previous month.

Product launch page

A marketing manager generating buzz for an upcoming product launch adds Open Graph tags with a professionally designed twelve hundred by six hundred thirty pixel campaign image, a benefit-led og:description that mirrors the campaign tagline, and og:type set to product so Facebook surfaces the price hint in the link preview. The OG implementation ensures the announcement looks polished and on-brand when shared by employees, press contacts, and early customers across every social channel rather than appearing as a generic link with whatever image Facebook happened to extract from the page. The launch generates significantly more social engagement than previous launches that relied on default metadata.

News site template update

A developer updates the article template for a news site to include dynamic Open Graph tags that pull from each article's featured image, headline, and summary excerpt at render time rather than requiring editors to populate metadata fields manually for every story. The single template change fixes Open Graph implementation across hundreds of existing pages and every future article automatically, eliminating an entire category of metadata debt without requiring any post-by-post intervention. Within a week the site's social referral traffic from Facebook and LinkedIn climbs measurably as previously image-less link shares start rendering as proper rich previews in the platforms' feeds.

When to use this guide

Use this before publishing any page that will be shared on social media, or to fix broken social sharing previews on existing pages.

Pro tips

Get better results with these expert suggestions:

Force OG cache refresh before campaigns

After updating Open Graph tags, paste your URL into the Facebook Sharing Debugger and click the Scrape Again button to force an immediate cache refresh rather than waiting up to thirty days for the natural cache expiry. LinkedIn's Post Inspector does the same job for LinkedIn shares, and the Twitter Card Validator handles X. Do this at least twenty-four hours before any social campaign launch to ensure updated tags are served to every new share rather than discovering at the worst possible moment that your launch traffic is seeing a cached preview of a previous version of the page.

Use a different og:title from your title tag

Your og:title property can be slightly more conversational and benefit-led than your SEO title tag because social audiences are not in active search mode and respond to different copy patterns than search results do. For example, the title tag might read How to Merge PDFs Online Free targeting the search query, while the og:title could be Merge any PDF files in seconds with no sign-up required, which is more shareable in a feed context. The two strings are deployed independently inside the same head section, so there is no technical penalty for divergence.

Always specify og:image dimensions

Some platforms use og:image:width and og:image:height tags to render previews faster without needing to fetch the image first to determine its dimensions, which can shave significant latency from how quickly your link preview appears in chat clients and social feeds. Adding these optional properties with content equal to twelve hundred and six hundred thirty respectively tells the receiving platform exactly how to size the placeholder while the actual image loads in the background. The improvement is most noticeable in WhatsApp and Slack where users frequently paste links and watch the preview unfold in real time.

Test on every target platform separately

Facebook, LinkedIn, Twitter, WhatsApp, Slack, and Discord all render Open Graph images with slightly different cropping rules, aspect ratio preferences, and maximum file sizes. After deploying Open Graph tags, share the URL on each platform you actually care about and visually verify the preview rather than assuming what looks perfect on Facebook will look identical everywhere else. What renders as a stunning full-width banner on Facebook may be cropped awkwardly on LinkedIn, displayed as a tiny thumbnail on Slack, or stripped of its image entirely on WhatsApp if any of the technical requirements are not met for that specific platform.

Use a 1200x630px image for best results

Facebook and LinkedIn both render OG images at roughly 1200x630 pixels. Using this aspect ratio ensures your image displays correctly without cropping on any platform.

Set og:type correctly

Use "article" for blog posts and news content, "product" for e-commerce items, and "website" for homepages and generic pages. The correct type unlocks additional structured metadata.

Test with Facebook Debugger

After deploying OG tags, paste your URL into the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) to see exactly how it will appear and to clear any cached previews.

FAQ

Frequently asked questions

Open Graph tags are HTML meta elements that tell social platforms exactly what title, description, image, and content type to display when a URL is shared anywhere online. They were defined by Facebook's Open Graph protocol in 2010 as an extension of the RDFa specification and have since been adopted as the universal standard for rich link previews. The protocol is now supported by Facebook, LinkedIn, WhatsApp, Slack, Discord, Pinterest, iMessage, Telegram, and the majority of other social and messaging platforms in active use today. Implementing Open Graph tags correctly is the single highest-leverage thing you can do to improve how your content appears across the entire social internet.

The recommended size is twelve hundred by six hundred thirty pixels with a 1.91 to 1 aspect ratio, which renders well on Facebook, LinkedIn, WhatsApp, and most other platforms that use the Open Graph standard. Images below six hundred by three hundred fifteen pixels are displayed as small thumbnails rather than the large hero-style previews that drive the most engagement, so falling below that threshold is a substantial visual downgrade in feed contexts. Use HTTPS URLs for every og:image reference and ensure the image returns a 200 status without redirects, because the scrapers that fetch your image will not follow redirect chains or accept self-signed certificates that browsers would tolerate.

No, Open Graph tags are not a direct Google ranking factor, and Google has confirmed this repeatedly across multiple official statements over the past decade. However, pages with compelling Open Graph images and descriptions get shared more widely on social media, which can drive substantial referral traffic and generate natural backlinks from people who discover the content through their feeds, both of which indirectly benefit SEO performance over time. Open Graph tags are best understood as a social performance lever rather than a search ranking lever, and the two should be optimised together as complementary parts of a unified content distribution strategy rather than treated as competing concerns.

Open Graph tags are read by Facebook, LinkedIn, WhatsApp, Slack, Discord, Pinterest, iMessage, and the majority of other social and messaging platforms in use today. Twitter Card tags are specific to X formerly known as Twitter and use their own twitter colon namespace with properties like twitter:card, twitter:title, twitter:description, and twitter:image. Twitter falls back to Open Graph tags when Twitter-specific tags are absent, so a solid Open Graph implementation alone covers most use cases including Twitter shares. Adding explicit Twitter Card tags is only necessary when you want to use Twitter-specific features like the Summary Large Image card or differentiate Twitter copy from the OG version.

Visit the developers.facebook.com slash tools slash debug URL, paste the affected page URL into the input field, and click Scrape Again to force Facebook to refetch your Open Graph tags and clear its cached version of the preview. Facebook caches Open Graph data aggressively for up to thirty days, so the Sharing Debugger is the only reliable way to force an immediate cache refresh after updating tags. The same flow applies if you have updated the og:image to a new URL and want the new image to appear in fresh shares rather than waiting for the natural cache expiry to pick up your change.

Not natively, because Open Graph tags are read the same way by every platform that respects the protocol and there is no built-in mechanism to vary the values by user agent or referring platform. However, you can use Twitter Card tags like twitter:title, twitter:description, and twitter:image to show different content specifically on Twitter while leaving the Open Graph tags untouched for every other platform. Beyond that single divergence path, achieving platform-specific targeting requires server-side user-agent detection and conditional rendering, which adds complexity that is rarely worth the effort outside of very high-volume editorial sites with sophisticated SEO teams.

The og:type property tells social platforms what kind of content the page contains, which determines how the platform categorises and distributes your content in its discovery surfaces. Use website for homepages and generic informational pages, article for blog posts and news content which also unlocks the article:author and article:published_time supporting properties, product for individual e-commerce items which enables price and availability extensions, and video or music types for the corresponding media content. Choosing the correct type improves how platforms surface your content in topic-based feeds, news distribution panels, and shopping contexts on networks that support those discovery surfaces.

In WordPress, install the Yoast SEO or Rank Math plugin and configure the social settings, which automatically populates Open Graph tags from your post fields without requiring any manual HTML editing. In Shopify, the head.liquid include controls Open Graph generation and most modern themes already populate the core properties from the product fields, with theme settings to customise the og:image fallback. In Next.js using the app router, export a metadata object from each page that includes the openGraph property; in the pages router, use the Head component to inject the tags. The FixTools generator output can be copied directly into any of these contexts.

Without Open Graph tags, social platforms attempt to construct a preview by scraping content from your page body using their own heuristics, which produces unreliable and usually poor results. You typically get an arbitrary image extracted from the page, sometimes the favicon or an irrelevant decorative graphic, an awkward excerpt as the description that may begin mid-sentence, and the raw HTML title tag as the share title. The resulting preview looks unprofessional next to properly tagged competitors and generates substantially fewer clicks. Implementing even the four core Open Graph properties takes minutes and immediately transforms how your shared links look across every supported platform.

Facebook and WhatsApp typically reflect cache refreshes triggered through the Sharing Debugger within minutes for the URL you scraped, but other users sharing the same URL may continue to see the cached preview until they trigger their own fetch or until the cache expires naturally up to thirty days later. LinkedIn refreshes within twenty-four hours through the Post Inspector tool. Twitter usually picks up changes within a few hours without needing manual intervention. Slack and Discord typically refresh within a few hours as well. Plan tag updates at least twenty-four hours in advance of any campaign launch to allow propagation time across every platform you care about.