Open Graph Tester
Test, debug, and validate your Open Graph implementation
What are Open Graph tags?
The Open Graph protocol is the standard that controls how your content appears when shared on social media. Created by Facebook in 2010, it's now used by virtually every social platform, messaging app, and collaboration tool to generate rich link previews.
Open Graph tags are meta elements placed in your page's <head> section. The core tags — og:title, og:description, og:image, og:url, and og:type — define how your page is represented as a social object. When someone shares your URL, the platform's crawler fetches your page, reads these tags, and builds a preview card with the specified title, description, and image.
Proper Open Graph implementation is one of the highest-ROI SEO and marketing tasks you can do. It takes minutes to set up but pays dividends every time someone shares your content. Pages with well-configured OG tags see dramatically higher engagement — richer previews earn more clicks, more clicks drive more traffic, and more traffic improves your search rankings. Yet studies show that over 50% of websites have at least one misconfigured OG tag.
Common Open Graph tag issues and how to fix them
1. og:url doesn't match the actual page URL
og:url should be the canonical URL of the page. If it points to a different URL, platforms may fetch that URL instead, showing the wrong preview.
<!-- Should match your canonical URL --> <meta property="og:url" content="https://example.com/blog/my-post" /> <link rel="canonical" href="https://example.com/blog/my-post" />
2. og:type is missing or wrong
og:type defaults to 'website' if missing, which is fine for homepages. For blog posts, use 'article' — this enables additional tags like article:published_time and article:author.
<!-- For blog posts --> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2026-03-29T00:00:00Z" /> <meta property="article:author" content="https://example.com/about" />
3. OG tags rendered client-side only
If your OG tags are injected by JavaScript (React useEffect, Vue mounted, etc.), social media crawlers won't see them. OG tags must be in the initial server-rendered HTML. Use SSR, SSG, or a meta tag management solution that renders on the server.
4. Missing og:locale for multilingual sites
For sites in languages other than English, set og:locale to help platforms display your content correctly. Use og:locale:alternate for translated versions.
<meta property="og:locale" content="es_ES" /> <meta property="og:locale:alternate" content="en_US" /> <meta property="og:locale:alternate" content="fr_FR" />
Frequently Asked Questions
What is the Open Graph protocol?▾
Open Graph (OG) is a protocol created by Facebook in 2010 that lets web pages become rich objects in social graphs. It uses meta tags in the HTML <head> to define a page's title, description, image, type, and URL. When you share a link, social platforms read these tags to generate a rich preview card instead of showing just a plain URL.
What OG tags are required?▾
The four required OG tags according to the protocol are: og:title (page title), og:type (content type like 'website' or 'article'), og:image (preview image URL), and og:url (canonical URL). In practice, og:description is also essential for good previews, even though it's technically optional.
How do I add Open Graph tags to my website?▾
Add meta tags to the <head> section of your HTML. For static HTML, add them directly. For frameworks: in Next.js, use the metadata export or generateMetadata function. In WordPress, use plugins like Yoast SEO. In Gatsby, use gatsby-plugin-react-helmet. Always use absolute HTTPS URLs for og:image and og:url.
What's the difference between Open Graph and Schema.org?▾
Open Graph controls how your page appears when shared on social media (the preview card). Schema.org (JSON-LD) controls how your page appears in Google search results (rich snippets, knowledge panels, etc.). They serve different purposes and both should be implemented. OG uses meta tags; Schema.org uses JSON-LD scripts.
How do I test Open Graph tags?▾
Paste your URL into Unfurli to instantly see all OG tags, preview how your link appears on 9 platforms, and get a quality score with actionable fix suggestions. For platform-specific testing, use Facebook's Sharing Debugger, Twitter's Card Validator, or LinkedIn's Post Inspector.
Do Open Graph tags affect SEO?▾
OG tags don't directly affect Google search rankings. However, they significantly impact social media engagement — and social signals can indirectly influence SEO. A well-configured OG image increases shares and clicks, driving more traffic, which can improve search performance over time.