Q3
The preview and code generation work without a URL — add one to see the domain and og:url tag.
Long descriptions may be truncated depending on the platform and device.
Social image
Click to choose a PNG, JPEG, or WebP file
Your image stays in your browser. It is never uploaded to Q3 Labs.
This is the URL that goes into the generated og:image/twitter:image tags — it must be publicly accessible for real social platform crawlers to retrieve it.
Optional: author, locale & X/Twitter details
X/Twitter overrides (optional) — each falls back to the values above when left blank
X may fall back to Open Graph tags when Twitter-specific tags aren't present, depending on its own implementation — this isn't guaranteed behavior this tool controls.
Generic social card — preview approximation
example.com
Your page title
A short description of what this page is about.
These are visual approximations, not pixel-perfect replicas of any platform's actual interface. Real appearance can vary by platform, device, caching, and how each platform's crawler interprets your metadata.
Generated meta tags
Enter a title, description, URL, or image to generate meta tags.
Everything above is generated in your browser — your title, description, URL, and image are never sent to Q3 Labs.
What Is Open Graph?
Open Graph is a metadata protocol, originally introduced by Facebook, that lets a webpage describe itself for platforms that read links, its title, description, image, and type, so a shared link can display as a richer preview card instead of a bare URL.
What Are Open Graph Meta Tags?
They're <meta> tags placed in a page's <head>, using the property="og:..." attribute instead of the usual name attribute, each describing one piece of the page for platforms that support the protocol.
What Is og:title?
Suggests the title shown when the page is shared as a link — often, but not always, the same as the page's SEO title tag.
What Is og:description?
A short summary shown alongside the title in a shared link preview, similar in spirit to a meta description but read by a different system for a different purpose.
What Is og:image?
Points to the image a platform may display in the preview card, provided the image is publicly reachable at that URL by the platform's own crawler.
What Is og:url?
The canonical URL a shared link should be associated with, particularly useful if the same content is reachable through more than one address.
What Is og:type?
Declares what kind of object the page represents — common values include website, article, product, and profile. It gives platforms a hint about the content's nature, though most general-purpose link previews render similarly regardless of type.
What Is twitter:card?
A separate, X/Twitter-specific tag declaring the card layout X should use for the link, most commonly summary or summary_large_image.
What Is summary_large_image?
One of the two documented X/Twitter card layouts — it requests a large, prominent image display for the shared link, as opposed to the smaller square-image summary card. It's a widely used default for link previews with a landscape image.
How to Add Open Graph Tags to HTML
Copy the generated <meta> tags above and paste them inside your page's <head>, alongside your existing title tag and meta description — Open Graph tags don't replace those, they sit independently in the same section.
Open Graph for WordPress
Most SEO plugins (such as Yoast SEO or Rank Math) generate Open Graph tags automatically from a page's title, excerpt, and featured image, with fields to override each one per page — check your installed plugin's social/Open Graph settings rather than editing theme template files directly.
Open Graph for Next.js
The Next.js App Router's built-in Metadata API supports an openGraph and twitter object directly — this tool's "Next.js" code tab generates that object literal from your entered values, ready to export as a page's metadata constant.
Open Graph vs SEO Metadata
Open Graph primarily controls social sharing presentation — it's a separate system from the title tag, meta description, canonical tag, robots directives, and structured data that search engines use. These commonly coexist and sometimes share similar values, but Open Graph tags themselves aren't a documented Google ranking factor.
Open Graph vs Twitter/X Metadata
Open Graph tags are read by a wide range of platforms; Twitter/X tags are a separate, X-specific set. X may use Open Graph tags as a fallback when its own tags are absent, depending on its own implementation at any given time, so including both is common practice rather than a strict requirement.
Why Social Previews May Differ From Your Website
Open Graph metadata is separate from what a visitor sees when they actually load the page. It's distinct from the page's SEO title, meta description, favicon, structured data, and canonical tag, even though these systems commonly coexist and sometimes share similar values.
Why Platforms Sometimes Change Titles, Descriptions, or Images
Platforms can cache metadata from an earlier crawl, crop or resize an image, truncate text that runs too long for their layout, ignore metadata they don't support, or apply their own presentation rules entirely. A preview is a helpful approximation for editing, not a guarantee of the exact final appearance everywhere.
Social Image Best Practices
- Use a landscape image, a commonly cited practical starting point is around 1200×630 pixels, though this isn't a universal requirement every platform enforces identically.
- Keep important content away from the edges, since some platforms crop differently.
- Make sure the image is hosted at a publicly accessible URL, not behind a login or blocked by robots rules.
- Use a unique, relevant image per important page rather than one generic image everywhere.
Common Open Graph Mistakes
- Missing og:image, leaving platforms to guess or show nothing.
- An image URL that isn't publicly accessible to crawlers.
- Forgetting to update cached metadata after changing a page, and not using a platform's cache-refresh tool when needed.
- Using a relative image URL instead of an absolute one.
- Assuming Open Graph tags affect search rankings, they don't directly.
- Confusing Open Graph tags with the page's actual SEO title or meta description.
Frequently Asked Questions
Explore more
Use this tool to design metadata before publishing; use our Meta Tag Checker to inspect metadata already live on a page. Preview how the same title and description could look in a Google search result with the SERP Snippet Preview. Need title and description ideas first? Try the SEO Title & Meta Description Generator, then run a broader On-Page SEO Checker analysis. Generate the sitemap and robots.txt for a new page with our XML Sitemap Generator and Robots.txt Generator & Tester, add structured data with our JSON-LD Schema Markup Generator. Before uploading a social image, shrink it with the Image Compressor or generate a matching Favicon Generator set, or run a full Buzzing Bee website & SEO audit. Explore the rest of our free marketing tools, or see our SEO & organic growth services.
Related tools & resources
Related tools
- SERP Snippet PreviewPreview how your title, URL and meta description could look in a Google-style search result.
- Hreflang Generator & ValidatorGenerate and validate hreflang tags for multilingual and international SEO.
- Meta Tag CheckerCheck any public page's title, description, canonical, robots and Open Graph tags.
Learn more
- SEO GuidesTechnical SEO, on-page fundamentals, and the checklist we run against every client site before it goes live.
- SEO & Organic GrowthMost SEO work stalls after the first few technical fixes because there's no system connecting content, author…
Related articles
- Technical SEO Checklist for Business WebsitesMost technical SEO checklists run to 150 items written for enterprise auditors. This one is sorted into four…
- The 2026 Technical SEO Checklist for Growing BrandsCore Web Vitals, structured data, and crawl budget: the technical fundamentals still separate the sites that…