JSON-LD

JSON-LD

Renders a <script type="application/ld+json"> tag for structured data — improves SEO with Article, BreadcrumbList, FAQPage schemas

Installation

npx @ravikumarsurya/mdx-ui add json-ld

Usage

Place <JsonLd> anywhere in your MDX file. It renders a <script> tag with no visible output — search engines read it to understand your page structure.

<JsonLd
  data={{
    "@context": "https://schema.org",
    "@type": "TechArticle",
    headline: "Getting started with mdx-ui",
    datePublished: "2025-01-15",
    author: { "@type": "Person", name: "Surya" },
  }}
/>

Examples

Article schema

<JsonLd
  data={{
    "@context": "https://schema.org",
    "@type": "Article",
    headline: "How to build documentation sites",
    datePublished: "2025-05-01",
    dateModified: "2025-05-08",
  }}
/>

FAQ schema

<JsonLd
  data={{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: [
      {
        "@type": "Question",
        name: "What is mdx-ui?",
        acceptedAnswer: {
          "@type": "Answer",
          text: "A CLI that copies MDX components into your project.",
        },
      },
    ],
  }}
/>

BreadcrumbList schema

<JsonLd
  data={{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Docs", item: "/docs" },
      {
        "@type": "ListItem",
        position: 2,
        name: "Components",
        item: "/docs/components",
      },
    ],
  }}
/>