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:
2. Reference
Reference the configuration in your pages:This approach makes it easier to maintain consistent metadata across your site and
update it from a single location.
Output
The Meta.generate function will generate all necessary meta tags for SEO and social sharing:
import { Meta } from "@/modules";
export async function generateMetadata() {
return Meta.generate({
title: "My Page Title",
description: "A comprehensive description of the page content",
baseURL: "https://example.com",
path: "/docs/getting-started",
type: "website"
});
}
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 };
app/{page}/page.tsx
import { Meta } from '@/modules';
import { meta } from '@/app/resources/seo';
export async function generateMetadata() {
return Meta.generate({
...meta,
path: "/",
});
}
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">
