LandingKit Docs
Build modern landing pages fast
Getting Started
  • Introduction
  • Installation
Guides
  • Customization
  • Colors
  • Hosting
  • Analytics
  • SEO
v1.0.0
  1. Docs
  2. Seo

SEO

The template exposes basic SEO via config.ts and Next.jsmetadata. You can extend it for social cards, sitemaps, robots, and per‑page overrides.

Site title and description

Edit config.ts to set your default SEO values:

// config.ts
export const pageConfig = {
  seo: {
    title: "Your Site Title",
    description: "Short, compelling description for search results.",
  },
  // ...
} as const

These values are read in app/layout.tsx and applied globally:

// app/layout.tsx
import type { Metadata } from 'next'
import { pageConfig } from './config'

export const metadata: Metadata = {
  title: pageConfig.seo.title,
  description: pageConfig.seo.description,
}

Improve titles with templates

Use Next.js title template to compose titles per page:

export const metadata: Metadata = {
  title: {
    default: pageConfig.seo.title,
    template: '%s – ' + pageConfig.seo.title,
  },
  description: pageConfig.seo.description,
}

Open Graph & Twitter cards

Add social sharing images for rich link previews. Place images in /publicand reference them in metadata:

export const metadata: Metadata = {
  title: { default: pageConfig.seo.title, template: '%s – ' + pageConfig.seo.title },
  description: pageConfig.seo.description,
  openGraph: {
    title: pageConfig.seo.title,
    description: pageConfig.seo.description,
    url: 'https://yourdomain.com',
    siteName: pageConfig.name,
    images: [
      { url: '/og.jpg', width: 1200, height: 630, alt: pageConfig.seo.title },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: pageConfig.seo.title,
    description: pageConfig.seo.description,
    images: ['/og.jpg'],
  },
}

Per‑page overrides

Any route can export its own metadata to override the defaults:

// app/(marketing)/pricing/page.tsx
export const metadata = {
  title: 'Pricing – Your Brand',
  description: 'Simple, transparent pricing.',
}

robots.txt and sitemap

Add dynamic route handlers for robots and sitemap under app/:

// app/robots.ts
import type { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [{ userAgent: '*', allow: '/' }],
    sitemap: 'https://yourdomain.com/sitemap.xml',
  }
}
// app/sitemap.ts
import type { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    { url: 'https://yourdomain.com/', changeFrequency: 'weekly', priority: 1 },
    { url: 'https://yourdomain.com/pricing', changeFrequency: 'monthly', priority: 0.8 },
  ]
}

Favicons and icons

Replace the default icons under /public and consider addingapp/icon.png and app/apple-icon.png. Next.js will auto‑wire icons when present.

Tip: Keep your description under ~155 characters and ensure your OG image is 1200×630 for best results across platforms.