Generate Open Graph Tags for Rich Social Media Previews
When someone shares your URL on Facebook, LinkedIn, X (Twitter), or WhatsApp, what appears in the preview card is controlled entirely by Open Graph meta tags — not your regular SEO title or description. If you've ever shared a link that displayed a blurry image, a wrong title, or no description at all, that's an OG tag problem. Open Graph was created by Facebook in 2010 and has since become the universal standard adopted by virtually every major platform. This generator helps developers, marketers, and content creators build complete OG tag sets: og:title, og:description, og:image, og:url, og:type, og:site_name, and the equivalent Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image). Enter your page details once and get a complete, copy-paste-ready block of HTML that works across all major platforms.
Open Meta Tag Generator →What Is Generate Open Graph Tags for Rich Social Media Previews?
Open Graph (OG) tags are meta tags in the HTML head that control how a page appears when shared on social media platforms. Originally developed by Facebook, the OG protocol is now supported by LinkedIn, X (Twitter), Pinterest, WhatsApp, Slack, Discord, and most messaging apps. Without OG tags, platforms guess at titles and images, often displaying the wrong content or showing no preview at all.
How to Use the Meta Tag Generator
- Step 1: Gather your page URL, intended share title, share description (1–2 sentences), and a 1200×630px OG image URL.
- Step 2: Enter these into the generator and select the og:type that matches your page (website, article, product, video.movie).
- Step 3: Review the og:title (aim for under 60 characters for Facebook, under 70 for Twitter Cards) and og:description (under 200 characters).
- Step 4: Verify your OG image URL is absolute (starts with https://) and the image is publicly accessible without authentication.
- Step 5: Copy the generated tag block and paste it into your page's <head> before the closing </head> tag.
- Step 6: Validate the implementation using Facebook's Sharing Debugger and LinkedIn's Post Inspector to confirm correct rendering.
Example
<!-- Complete Open Graph + Twitter Card Tag Set -->
<meta property="og:title" content="The Complete Guide to Cold Brew Coffee at Home" />
<meta property="og:description" content="Learn the cold brew ratio, steeping time, and equipment pros use to make coffeehouse-quality cold brew in your kitchen." />
<meta property="og:image" content="https://example.com/images/cold-brew-guide-og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/guides/cold-brew-coffee" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="The Coffee Lab" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Make Cold Brew Like a Pro — The Complete Home Guide" />
<meta name="twitter:description" content="Ratio, steep time, equipment — everything you need for perfect cold brew at home." />
<meta name="twitter:image" content="https://example.com/images/cold-brew-guide-og.jpg" />Pro Tips
- Always use an absolute URL for og:image — relative paths like '/images/og.jpg' will cause the image to fail to load on external platforms.
- Specify og:image:width and og:image:height (1200 and 630) to help platforms render the image immediately without needing to fetch and measure it first.
- Use a different, shorter copy for twitter:title and twitter:description — X's card format can differ visually from Facebook, so tailor the phrasing accordingly.
- After deploying OG tags, use Facebook's Sharing Debugger to clear the platform's cache for your URL — otherwise the old (or missing) preview may persist for days.
- For article pages, add og:article:published_time and og:article:author tags — LinkedIn and some news aggregators use these to surface freshness and authorship in share previews.
Ready to Try It?
Free, browser-based, no signup required.
Launch Meta Tag Generator Free →FAQ's
The recommended Open Graph image size is 1200×630 pixels with an aspect ratio of 1.91:1. This size renders well on Facebook, LinkedIn, and most other platforms. Images smaller than 600×315px will not display as large preview cards on Facebook. Always use HTTPS image URLs and ensure the image file is under 8MB.
Open Graph tags themselves are not a direct Google ranking factor. However, OG tags drive social sharing quality, and content shared widely on social platforms can earn backlinks and brand signals that indirectly influence rankings. Well-implemented OG tags also ensure your content appears professional when shared, which affects whether readers engage and link to it.
Use og:type 'website' for your homepage and evergreen pages like About or Contact. Use 'article' for blog posts, news stories, and editorial content — this type unlocks additional properties like og:article:published_time, og:article:author, and og:article:section that help platforms like LinkedIn surface content contextually.
Facebook aggressively caches OG data. After updating your OG tags, visit Facebook's Sharing Debugger (developers.facebook.com/tools/debug), enter your URL, and click 'Scrape Again'. This forces Facebook to re-fetch your page and update its cached preview. The update typically propagates within a few minutes after scraping.
Twitter Cards use a separate tag set (twitter:card, twitter:title, twitter:description, twitter:image) but will fall back to OG tags if the Twitter-specific tags are missing. It's best practice to include both sets explicitly, since you can tailor twitter:title and twitter:description to X's character limits and card formats independently from your Facebook OG copy.
Without OG tags, social platforms attempt to scrape a title, description, and image from your page content. Results are unpredictable — platforms might pull a navigation link, a footer blurb, or a small logo as the image. This leads to unappealing share previews that reduce click-through rates on social media significantly.
Yes, and this is actually recommended. OG tags are optimized for social sharing context (typically shorter, more conversational) while SEO meta tags are optimized for search results and Google's rendering limits. The og:title and og:description can and should differ from the standard <title> and meta description to suit each context.
Open Graph tags are used by Facebook, LinkedIn, Pinterest, WhatsApp, iMessage (iOS link previews), Slack, Discord, Telegram, Reddit, and most modern CMS platforms when generating share previews. X (Twitter) has its own Twitter Card system but falls back to OG tags. Virtually every major social and messaging platform honors the OG protocol.