Meta

Generate SEO-friendly metadata for your Next.js pages including OpenGraph and Twitter/X cards.

Add metadata directly to your pages using the Meta.generate function:

Advanced setup

For larger sites, store your metadata 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.",
  baseURL: "https://once-ui.com",
  type: "website",
  image: "/images/cover.jpg",
  author: {
    name: "Once UI Team",
    url: "https://once-ui.com"
  }
};

export { meta };

2. Reference

Reference the configuration in your pages:

app/{page}/page.tsx

import { Meta } from '@once-ui-system/core';
import { meta } from '@/app/resources/seo';

export async function generateMetadata() {
  return Meta.generate({
    ...meta,
    path: "/",
  });
}

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

Without an image, Meta.generate points the Open Graph and X images at /api/og/generate?title=…, a route you render with next/og. If yours lives elsewhere, pass ogRoutes; the same object can be given to OgRoutesProvider for OgCard.

app/{page}/page.tsx

export async function generateMetadata() {
  return Meta.generate({
    title: "My Page Title",
    description: "A comprehensive description of the page content",
    baseURL: "https://example.com",
    ogRoutes: { generate: "/og/image" },
  });
}
// og:image → /og/image?title=My%20Page%20Title

Output

The Meta.generate function will generate all necessary meta tags for SEO and social sharing:

Output

<title>Once UI: Build the future</title>
<meta name="description" content="An open-source design system for indie creators to ship like teams of 10+ alone.">

<meta property="og:title" content="Once UI: Build the future">
<meta property="og:description" content="An open-source design system for indie creators to ship like teams of 10+ alone.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://once-ui.com">
<meta property="og:image" content="https://once-ui.com/images/cover.jpg">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Once UI: Build the future">
<meta name="twitter:description" content="An open-source design system for indie creators to ship like teams of 10+ alone.">
<meta name="twitter:image" content="https://once-ui.com/images/cover.jpg">

API reference

Meta.generate takes one object:

	Type	Default
titlerequired	string	—
descriptionrequired	string	—
baseURLrequired	string	—
path	string	""
type	websitearticle	website
image	string	—
publishedTime	string	—
author	{ name: string; url?: string; }	—
canonical	string	—
robots	string	—
noindex	boolean	—
nofollow	boolean	—
alternates	Alternate[]	—
ogRoutes	Partial<OgRoutes>	—

Advanced setup

1. Config file

2. Reference

Social image route

Output

API reference