Site Identity

Set the documentation title, brand mark, canonical URL, favicon, and language metadata.

The configuration separates the documentation identity used by search engines from the compact brand mark shown in the application shell. Set both deliberately: a visitor should recognise the product, and every generated metadata file should describe the same public site.

Define the title and description

title and description are the site-wide fallback metadata. An MDX page can replace them with frontmatter, but the root route, discovery files, and any page without a description use these values.

heyo-docs.config.ts
export default heyoDocs({
  title: "Acme Developer Docs",
  description: "Reference and implementation guides for the Acme platform.",
  content: "content",
});

Use a concise product name for title and a factual description that can work as a search-result excerpt. Page titles are rendered with the site title in browser and social metadata; a specific page description is preferable when the page has a distinct purpose.

Configure the header brand

branding.name is the accessible name of the header link. It falls back to title when omitted. branding.logo is an image URL, normally an asset served from public:

heyo-docs.config.ts
export default heyoDocs({
  title: "Acme Developer Docs",
  content: "content",
  branding: {
    name: "Acme",
    logo: "/logo.svg",
  },
});

The Grain header links the brand mark to /. When logo is present, it renders that image with an empty image alt text because the surrounding link already carries the brand name. When no logo is configured, Grain shows its built-in geometric mark instead. The current built-in header does not render a separate visible text wordmark, so include lettering in the logo asset if the mark alone would be ambiguous.

Keep the header asset small and legible at a maximum rendered height of 24 pixels. An SVG in public/logo.svg is a good default because its /logo.svg URL works at every nested documentation route.

Set a canonical public origin

siteUrl identifies the production site, not the source repository or a temporary deployment:

heyo-docs.config.ts
export default heyoDocs({
  title: "Acme Developer Docs",
  content: "content",
  siteUrl: "https://docs.acme.com",
});

This value supplies canonical URLs and absolute links in the sitemap, RSS feed, llms.txt files, and social metadata. It accepts only a clean HTTP(S) base URL; query strings and fragments are rejected. Use the exact hostname that should appear in search results, then rebuild after a domain change.

Replace the favicon

The favicon is part of the framework shell rather than the Heyo Docs configuration. This project exposes public/favicon.svg and links it in app/root.tsx. Replace that file while retaining the same public path, or change the framework root layout to reference a different asset.

Generated projects make the equivalent link in their root document:

FrameworkShell file
React Routerapp/root.tsx
Next.jsapp/layout.tsx
Astrosrc/layouts/docs-layout.astro

Use an SVG or a complete set of raster favicon assets appropriate for the product. Favicon changes are build assets, so check them in a production build as well as in a browser tab during development.

Set the document language

The supplied React Router shell declares <html lang="en">. If the documentation is written primarily in another language, update that attribute in the application shell. This is separate from MDX content and helps screen readers, spelling tools, and search engines interpret the site correctly.

The same change belongs in the root layout for the selected framework, not in individual pages. A single site language keeps all generated routes consistent; use the normal HTML lang attribute on a specific MDX element only for a genuine passage in another language.

Powered by heyo-docs