Schema

Updated: May 4, 2025

Add Schema.org structured data to your pages for SEO and rich search results.

Schema

<Schema
  as="webPage"
  title="My Page Title"
  description="A comprehensive description of the page content"
  baseURL="https://example.com"
  path="/docs/getting-started"
  author={{
    name: "John Doe",
  }}
/>

Advanced setup

For larger sites, store your schema data in a central configuration file to maintain consistency across pages:

1. Config file

Store your site-wide metadata in a configuration file:

app/resources/seo.js

// default metadata
const meta = {
  title: "Once UI: Build the future",
  description: "An open-source design system for indie creators to ship like teams of 10+ alone.",
};

// default schema data
const schema = {
  title: "Once UI",
  description: meta.description,
  baseURL: "https://once-ui.com",
  path: "/",
  image: "/images/cover.jpg",
  author: {
    name: "Once UI Team",
    url: "https://once-ui.com"
  }
};

export { schema };

2. Reference

Reference the configuration in your pages:

app/{page}/page.tsx

import { Schema } from '@/modules';
import { schema } from '@/app/resources/seo';

export default function HomePage() {
  return (
    <>
      <Schema
        as="organization"
        title={schema.title}
        description={schema.description}
        baseURL={schema.baseURL}
        path={schema.path}
        image={schema.image}
        author={schema.author}
      />
      {/* Rest of your page component */}
    </>
  );
}

This approach makes it easier to maintain consistent schema data across your site and update it from a single location.

ModulesMobileMegaMenu

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club