SEO Setup

Global setup

1. Update your default site info

Edit frontend/src/config/seo.ts:

export const siteConfig = {
  name: 'Your App Name',
  description: 'What your app does in one sentence',
  url: process.env.NEXT_PUBLIC_SITE_URL || 'https://yourdomain.com',
}

Want to customize more? You can also update default settings for global metadata, viewport settings, etc.

2. Create images

You'll need these images for your app. It determines the icon that is shown in your browser tab and bookmarks.

favicon.ico (32x32)
favicon-96x96.png (96x96)
favicon.svg (scalable)
apple-touch-icon.png (180x180)

Need help creating these? Use RealFaviconGenerator - it creates all the favicon formats you need in one go. Just upload your square logo and it generates things automatically.

You also need a social sharing image (X, Facebook): og-image.jpg (1200x630 pixels)

3. Configure individual pages

Title and description

For each page, add this at the top:

import { createMetadata } from '@/config/seo'

export const metadata = createMetadata({
  title: 'Page Title',
  description: 'What this page is about',
})

Want custom images when your pages are shared? Add an image to your public folder and reference it:

export const metadata = createMetadata({
  title: 'Page Title',
  description: 'What this page is about',
  image: '/your-social-image.jpg', // 1200x630 pixels works best
})

Hide pages from Google

For private pages, add noIndex: true:

export const metadata = createMetadata({
  noIndex: true, // Google won't index this page
})

Sitemap & Robots.txt

Automatically generated when you build your app (pnpm build) via the postbuild script.

Want to customize? Edit frontend/src/routes.js:

Add your public pages to PUBLIC_ROUTES
Private pages are automatically excluded from your sitemaps, but you can include additional pages under SITEMAP_EXCLUSIONS (supports wildcards like /api/*)

The sitemap will be available at yourdomain.com/sitemap.xml and robots.txt at yourdomain.com/robots.txt.

That's It!

Your PocketStarter app now has professional SEO. Google will find your pages, and they'll look great when shared on social media.

On this page