Site Config

Why this matters

Site config is the one file that touches every page. Change name here and your <title> tags, header logo alt text, footer copyright, OG images, transactional emails, robots.txt and sitemap.xml all update — no manual hunting through 40 components. Get it wrong and you ship a directory with mismatched branding in three places, broken share previews on Twitter, and emails that go out under the wrong domain.

This page is the field-by-field reference, the minimal example, and the gotchas. If you're spinning up a new directory, edit this file first — before you touch any feature config or layout. Everything else inherits from here.

File: config/site.config.ts

This is the first file you'll edit. Everything in it — name, tagline, URL, contact emails — propagates across the whole site: header, footer, SEO tags, emails, Open Graph images.

All fields

Minimal example

export const siteConfig: SiteConfig = {
  name: 'ToolFinder',
  tagline: 'Discover the best developer tools',
  description: 'A curated directory of tools, libraries, and services for developers.',
  url: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
 
  logo: {
    light: '/assets/logo.svg',
    dark: '/assets/logo-white.svg',
  },
  favicon: '/assets/favicon/favicon.ico',
  ogImage: '/assets/og-image.png',
 
  social: {
    twitter: '@toolfinder',
  },
 
  contact: {
    email: 'hello@toolfinder.dev',
    supportEmail: 'support@toolfinder.dev',
    privacyEmail: 'privacy@toolfinder.dev',
  },
 
  footer: {
    copyright: `© ${new Date().getFullYear()} ToolFinder. All rights reserved.`,
    description: 'A curated directory of developer tools.',
  },
 
  refParameter: 'toolfinder',
  keywords: ['developer tools', 'SaaS directory', 'programming'],
  language: 'en',
  locale: 'en_US',
  themeColor: '#000000',
};

Replacing logos and images

Drop your files into public/assets/ using the same filenames the config references (logo.svg, logo-white.svg, favicon.ico, og-image.png). No code changes needed.

See Branding for sizes and best practices.

When to restart the server

• Changes to name, tagline, contact, etc. — hot-reload handles it.
• Changes to url (when also changing NEXT_PUBLIC_APP_URL) — restart the dev server to pick up the env var.

A real-world walkthrough: spinning up a new directory in 30 minutes

You bought craft-tools.directory for a directory of woodworking software. The 30-minute setup:

1. Open config/site.config.ts. Replace name with 'CraftTools'. Update tagline, description, contact.*, keywords, themeColor. Save.
2. Drop your logo SVG into public/assets/logo.svg (and logo-white.svg for dark mode). Drop a 1200×630 OG image into public/assets/og-image.png. Drop a favicon into public/assets/favicon/. Filenames must match what's in config.
3. Set NEXT_PUBLIC_APP_URL=https://craft-tools.directory in Vercel env vars (production) and http://localhost:3000 in .env.local (dev).
4. Run pnpm dev. Verify the header logo, page title, footer text. Open a project page → confirm the <title> is [Project Name] | CraftTools.
5. Set up keywords carefully: 5–8 niche terms, not generic ones. ['woodworking software', 'CAD for furniture', 'wood-cutting plans', 'workshop tools'] beats ['software directory', 'tools', 'apps'].

The whole setup takes 20–30 minutes. After that, every page on the site has correct branding, correct meta tags, correct emails, and correct OG share previews — without you touching any other file.

Common pitfalls

• Using process.env.NEXT_PUBLIC_APP_URL without a fallback. If the env var is missing in a build, url becomes undefined, breaking canonical tags and OG image absolute URLs. Always provide a literal fallback in the config: process.env.NEXT_PUBLIC_APP_URL || 'https://yourdomain.com'.
• Forgetting to update language and locale for non-English directories. They default to en/en_US. If you ship in Russian, set language: 'ru', locale: 'ru_RU' — Google uses these to decide language relevance.
• Setting themeColor to your brand's vibrant colour. Mobile address-bar colour bleeds into the URL for users; vibrant colours look gaudy. Use a darker, muted version of your brand (your sidebar/footer dark colour usually works).
• Mismatching social.twitter formats. Use @handle for the bare handle; the OG meta tags expect that format. If you put a full URL, the Twitter card may not render correctly.
• Hardcoding the year in footer.copyright. Use ${new Date().getFullYear()} so the year auto-updates on the next deploy. Year-stale footers are a tiny but visible "this site is abandoned" signal.

FAQ

Should I store the logo in public/assets/ or in public/?

public/assets/ is the convention here, and the config defaults reference that path. Keeping all branding in one folder makes rebrands easier — drop new files in, one folder, no git ls-files | grep logo archaeology.

Can I A/B test the tagline?

Yes — wrap the tagline render with a feature flag or split-test middleware. The config file is the default; you can override the rendered value at runtime. Most operators don't bother — the tagline is rarely the conversion bottleneck.

Does Google use description from this file or per-page descriptions?

Per-page descriptions if set; falls back to description from this file otherwise. Project pages, blog posts and category pages typically generate their own descriptions; static pages (privacy, about) inherit from here.

With AI

Rebrand config/site.config.ts with these values:
Brand:

name: "{brand name}"
tagline: "{60-char one-liner}"
description: "{150-char SEO description}"
Contact:

email: "{hello@yourdomain.com}"
supportEmail: "{support@yourdomain.com}"
privacyEmail: "{privacy@yourdomain.com}"
Social (use full URLs or @handle where noted; omit any I didn't provide):

twitter: "{@handle}"
github: "{https://github.com/org\}"
discord: "{https://discord.gg/xxxx\}"
Footer:

copyright: "{© YEAR Brand. All rights reserved.}"
description: "{short footer tagline}"
SEO:

refParameter: "{slug for ref query param}"
keywords: [{5 niche keywords}]
language: "{en|ru|es|...}"
locale: "{en_US|ru_RU|...}"
themeColor: "{hex color for mobile browser UI}"
Preserve the existing SiteConfig type structure. Don't touch logo/favicon/ogImage paths.