Dynamic Metadata Setup

StarterKitPro comes pre-configured with a robust dynamic metadata system that works seamlessly across key areas:

• Layouts
• Landing Page
• Blog Pages (both list and individual posts)
• Documentation Pages

Setting up metadata for any newly created pages is also straightforward using the provided helper functions. This section explains how the system is implemented.

StarterKitPro utilizes helper functions located in lib/seo/metadata.ts to simplify setting up SEO metadata and viewport settings across your application, leveraging Next.js 15's file-based metadata capabilities.

Metadata (constructMetadata)

The constructMetadata function generates a comprehensive Metadata object for individual pages. It automatically includes:

• Default title, description, keywords, and applicationName from app-config.ts.
• Default Open Graph and Twitter card tags, automatically using /app/opengraph-image.png and /app/twitter-image.png if they exist.
• A metadataBase set according to your domainName and environment.

Usage:

Import and export metadata from your page.tsx files using this helper.

import { constructMetadata } from "@/lib/seo/metadata";
 
// Export metadata
export const metadata = constructMetadata({
  // Override default title
  title: "Specific Page Title | StarterKitPro",
  // Recommended: Set a canonical URL relative to your domain
  canonicalUrlRelative: "/some-page",
  // Optionally override other defaults
  // description: "Custom description for this page.",
});
 
export default function SomePage() {
  return <div>Page Content</div>;
}

Available Parameters:

You can override the defaults by passing an object with the following optional properties to constructMetadata:

type ConstructMetadataParams = {
  title?: string;
  description?: string;
  keywords?: string[];
  openGraph?: {
    title?: string;
    description?: string;
    url?: string;
    siteName?: string;
    images?: Array<{
      // Override default OG/Twitter images
      url: string;
      width?: number;
      height?: number;
      alt?: string;
    }>;
    locale?: string;
    type?: "website" | "article"; // Default is 'website'
  };
  canonicalUrlRelative?: string; // e.g., "/about-us"
  authors?: Array<{ name: string; url?: string }>; // For article schema
  extraTags?: Record<string, string>; // Add any other custom meta tags
};

Global Viewport Settings (getViewportMetadata)

The getViewportMetadata function generates the standard viewport configuration recommended for responsive web design.

Usage:

This is typically exported once from your root layout file (/app/layout.tsx) to apply globally.

import type { Viewport } from "next";
import { getViewportMetadata } from "@/lib/seo/metadata";
 
// Export viewport settings
export const viewport: Viewport = getViewportMetadata();
 
// ... rest of your layout component

This ensures consistent viewport behavior across all pages of your application.