JSON-LD vs Open Graph Tags: What's the Difference and When to Use Each

JSON-LD and Open Graph tags both describe your content — but they serve different systems. Here's the exact difference, what each one affects, and how to use both correctly.

Updated March 2026

The Short Answer

Signal	Who reads it	Affects
Open Graph tags	Facebook, Twitter, LinkedIn, Discord, Slack, WhatsApp	Social link preview cards (title, image, description when you paste a URL)
JSON-LD	Google, Bing, AI search engines	Rich snippets in search results (star ratings, FAQs, how-tos, breadcrumbs, article bylines)

Use both. They don't overlap or conflict — they serve entirely different systems. JSON-LD doesn't affect social previews. Open Graph doesn't affect Google rich snippets.

Open Graph Tags: Social Previews

Open Graph (OG) tags are HTML meta tags in the <head> that control what appears when someone shares your URL on a social platform:

<!-- These are Open Graph tags -->
<meta property="og:title"       content="Your Article Title" />
<meta property="og:description" content="Brief description of your content" />
<meta property="og:image"       content="https://yoursite.com/og-image.png" />
<meta property="og:url"         content="https://yoursite.com/your-page" />
<meta property="og:type"        content="article" />

<!-- Twitter-specific extensions -->
<meta name="twitter:card"       content="summary_large_image" />
<meta name="twitter:title"      content="Your Article Title" />

When someone pastes your URL into Twitter, LinkedIn, Slack, or Discord — these are the tags that drive what appears. Google also reads OG tags but doesn't use them for search ranking or rich snippets.

JSON-LD: Structured Data for Search

JSON-LD (JavaScript Object Notation for Linked Data) is a <script> block that describes your content using Schema.org vocabulary. Google uses this to generate rich results:

<!-- This is JSON-LD structured data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "description": "Brief description of your content",
  "image": "https://yoursite.com/og-image.png",
  "author": {
    "@type": "Person",
    "name": "Jane Smith"
  },
  "datePublished": "2026-03-01",
  "publisher": {
    "@type": "Organization",
    "name": "Your Company",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yoursite.com/logo.png"
    }
  }
}
</script>

This can unlock Google rich results: article bylines in search, FAQ dropdowns, How-To steps, breadcrumbs, product star ratings, and more.

Do I Need Both?

Yes, for different reasons:

OG tags — required for social previews. Without them, shared links appear as plain text with no image.
JSON-LD — needed for Google rich snippets. Without it, you miss out on enhanced search result features that can dramatically increase CTR.

You'll often have duplicate information in both (title, description, image URL) — that's fine and expected. They're separate channels.

Common Confusion: Does JSON-LD Affect Social Cards?

No. Facebook, Twitter, LinkedIn, Discord, and Slack do not read JSON-LD. They only read OG meta tags. If you have perfect JSON-LD but no OG tags, your social previews will be broken.

Conversely, Google does not use OG tags to generate rich snippets. You can have perfect OG tags and still miss out on Google rich results if you don't have JSON-LD.

Implementing Both in Next.js

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    // OG tags (social previews)
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
      type: "article",
      publishedTime: post.publishedAt,
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  };
}

export default function BlogPost({ params }) {
  const post = getPost(params.slug);
  
  // JSON-LD (search rich results)
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    description: post.excerpt,
    image: post.ogImage,
    datePublished: post.publishedAt,
    author: { "@type": "Person", name: post.author },
    publisher: {
      "@type": "Organization",
      name: "Your Site",
      logo: { "@type": "ImageObject", url: "https://yoursite.com/logo.png" }
    }
  };
  
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{/* your content */}</article>
    </>
  );
}

Which Takes Priority When They Conflict?

If your JSON-LD headline differs from your OG title, Google will typically prefer the JSON-LD for rich results while social platforms use the OG title for preview cards. To avoid confusion, keep them consistent.

Check your OG tags (social previews) →

OGFixer shows how your page looks when shared on Twitter, LinkedIn, Discord, and Slack — verifying your Open Graph tags are correct.

Preview my social cards →