Title

Title renders the <title> tag for the document. It accepts a required page-specific value and an optional template containing a %s placeholder, which is replaced with value at render time.

Props

prop	type	default	required	description
value	string	-	Yes	The page-specific title text substituted into the template at the %s placeholder position.
template	`${string}%s${string}`	"%s"	No	Template string containing a %s placeholder that is replaced by value. Falls back to headTags.titleTemplate from integration config, then "%s" if neither is set.

Examples

Basic

Input:

<Title value="Home" />

Output:

<title>Home</title>

Automatic

Uses the integration headTags.titleTemplate value when template is not provided.

Input:

// in astro.config.mjs integration config
eminence({
  headTags: {
    titleTemplate: "%s | My Site",
  },
});

<Title value="Home" />

Output:

<title>Home | My Site</title>

Complete

Input:

<Title value="Home" template="%s | My Site" />

Output:

<title>Home | My Site</title>

Decisions Made

Template uses %s as the single placeholder

The placeholder convention is %s, a widely recognized pattern for string interpolation. The type is constrained to `${string}%s${string}` so TypeScript enforces that the template always contains the placeholder.

Integration config can define a site-wide template

When template is omitted, the component falls back to headTags.titleTemplate from the integration config. If neither is set, the default is "%s", which renders the value as-is. This allows a site-wide suffix or prefix to be configured once and applied consistently across all pages without per-page repetition.

Value is always required

Unlike most other head components, value is not optional. A title tag without content would produce an empty or incorrect document title, so the component requires it unconditionally.

Source code

---
import config from "virtual:eminence-astro-suite/head-tags";

interface Props {
  /**
   * The page-specific title text.
   */
  value: string;
  /**
   * Optional template string containing `%s` as a placeholder for the value.
   * @default "%s" via integration virtual config
   * @example "%s | My Site"
   */
  template?: `${string}%s${string}`;
}

const { value, template = config.titleTemplate } = Astro.props;
---

<title>{template.replace("%s", value)}</title>

Reference

• MDN: title element
• WHATWG HTML Standard: title element