Home › Getting Started

Getting Started

1. Install

npm install @better-seo/core @better-seo/next

@better-seo/core has zero runtime dependencies. @better-seo/next declares next and react as peer dependencies.

2. First Metadata (Next.js App Router)

// app/page.tsx
import { seo } from "@better-seo/next"

export const metadata = seo({ title: "Home" })

That's it. Your page now renders with correct <title>, Open Graph, Twitter cards, and canonical tags — all from one object.

3. Full Config + JSON-LD

// app/page.tsx
import { NextJsonLd } from "@better-seo/next/json-ld"
import { prepareNextSeo } from "@better-seo/next"
import { webPage } from "@better-seo/core"

const site = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000"

const { metadata, seo } = prepareNextSeo(
  {
    title: "Hello",
    description: "World",
    canonical: "/",
    schema: [webPage({ name: "Hello", description: "World", url: site })],
  },
  { baseUrl: site },
)

export { metadata }

export default function Page() {
  return (
    <main>
      <NextJsonLd seo={seo} />
      <h1>Hello</h1>
    </main>
  )
}

4. Verify in the Browser

Open DevTools → Elements tab → check <head> for your title, description, OG tags
View page source → verify <script type="application/ld+json"> contains valid JSON-LD
Use Google Rich Results Test to validate structured data

What You Get

Channel	Auto-filled from
`<title>`	`meta.title`
`og:title`	`meta.title` fallback
`twitter:card`	default `summary_large_image`
`og:image`	`openGraph.images`
`twitter:image`	first `openGraph.images[].url`
canonical link	`baseUrl + path`
robots	`index,follow` default

Next Steps

Concepts — understand the SEO object and pipeline
Recipes — layout merge, route rules, OG images, icons
API Reference — createSEO, mergeSEO, serializeJSONLD