Managing Title Templates and Length Limits Across Locales

This guide, part of Metadata Injection & SEO Automation, handles a detail that becomes surprisingly complex on multilingual sites: the <title> element. Every page’s title combines a page-specific part with a site-wide template, and both behave differently in each language. The guide covers title templates per locale, localized brand names and separators, length targets that account for scripts and character widths, and validation that helps editors without blocking them.

Titles matter more than most metadata: they are the main clickable line in search results, the default text in browser tabs and bookmarks, and a relevance signal. On a single-language site, a template like “{page} | Brand” and a 60-character guideline are enough. Across languages, the same template produces German titles that are cut off, Japanese titles that look half empty, and brand names that should be translated in one market but not another.

The Problem

A consumer electronics brand used the template “{page} – {Brand} Official Store” in every locale, with the English phrase untranslated. German product titles, already long because of compound words and model numbers, were cut off before the product name ended. Japanese titles used the Latin brand name where the Japanese market knew the katakana form. And editors had no guidance on length, because the CMS validation of 60 characters was wrong for Japanese, where titles of 30 characters already fill the space.

How to Manage Titles Across Locales

Templates per locale. Store the title template, separator and brand name per locale in configuration, reviewed by the local market. “{page} | Brand” in English may be “{page} – Brand” in German and “{page}｜ブランド” in Japanese, with a full-width separator.

Length in pixels, not characters. Search results truncate by rendered width, roughly 580 to 600 pixels on desktop. Latin characters average about 9 to 10 pixels in typical result fonts, so 60 characters fit; CJK characters are full-width, about 18 to 20 pixels, so about 30 fit. Use a per-script estimate, or measure with a font metrics table, rather than a single character limit.

Shorten the template first. When the full title exceeds the target, drop the brand suffix before touching the page part. The page-specific words matter more for relevance and clicks than the brand, which already appears in the URL and site name.

Guide editors, do not cut their words. Show the estimated width and where the cut will happen in the CMS preview, and let editors write a shorter override. Truncating in code produces titles that end mid-word.

Implementation

The title builder applies the locale’s template and falls back to a shorter form when the estimated width exceeds the target.

// lib/seo/title.ts
interface TitleConfig { template: string; shortTemplate: string; brand: string; maxWidthPx: number }

const CONFIG: Record<string, TitleConfig> = {
  en: { template: "{page} | {brand}", shortTemplate: "{page}", brand: "Example", maxWidthPx: 580 },
  de: { template: "{page} – {brand}", shortTemplate: "{page}", brand: "Example", maxWidthPx: 580 },
  ja: { template: "{page}｜{brand}", shortTemplate: "{page}", brand: "エグザンプル", maxWidthPx: 580 },
};

// Rough per-character width estimate for a typical search result font at title size.
function estimateWidth(text: string): number {
  let px = 0;
  for (const ch of text) {
    const code = ch.codePointAt(0) ?? 0;
    if (code >= 0x3000 && code <= 0x9fff) px += 19;          // CJK, full-width punctuation
    else if (code >= 0xac00 && code <= 0xd7af) px += 19;     // Hangul
    else if ("mwMW".includes(ch)) px += 14;
    else if ("iljtf.,:;|' ".includes(ch)) px += 5;
    else px += 9.5;
  }
  return Math.round(px);
}

export function buildTitle(pageTitle: string, locale: string): { title: string; widthPx: number; overLimit: boolean } {
  const cfg = CONFIG[locale] ?? CONFIG.en;
  const full = cfg.template.replace("{page}", pageTitle).replace("{brand}", cfg.brand);
  if (estimateWidth(full) <= cfg.maxWidthPx) return { title: full, widthPx: estimateWidth(full), overLimit: false };
  const short = cfg.shortTemplate.replace("{page}", pageTitle);
  const width = estimateWidth(short);
  return { title: short, widthPx: width, overLimit: width > cfg.maxWidthPx }; // overLimit: warn the editor, do not cut
}

The estimate is deliberately simple; it only needs to be accurate enough to warn editors in time. The same function runs in the metadata resolver and in the CMS preview, so editors see exactly which template will apply.

Homepage and special pages

Some pages do not follow the template. The homepage usually has a brand-first title, such as “Brand – tagline in the local language”. Search results pages, error pages and account pages need short, functional titles. Store these as explicit exceptions in the same locale configuration rather than special cases scattered in code.

Title versus heading

The <title> and the page’s visible h1 serve different purposes and do not need to be identical. The heading is read on the page, where context is clear and space is ample; the title is read in search results and browser tabs, out of context and in limited space. A product page’s heading might be the full product name with model number, while its title adds the category and drops redundant words. Model this with an optional search title override, falling back to the page heading plus template, so editors can adjust titles for search without changing what readers see on the page. In multilingual sites, the override is especially useful for languages where the natural heading is long, letting market teams write a concise title in their own language while the heading stays complete.

Configuration Reference

Gotchas & Edge Cases

• Duplicate titles. Templates make it easy to produce identical titles for similar pages, such as product variants. Check uniqueness per locale.
• Brand at the front. Putting the brand first wastes the most visible space on every page except the homepage.
• Separators in RTL. In right-to-left titles, the template order must follow the reading direction; review with native speakers.
• Title rewriting. Search engines sometimes rewrite titles they consider poor, such as all-caps titles or keyword lists. Natural titles are shown more reliably.

Worked Example

The electronics brand moved title templates into per-locale configuration reviewed by each market, translated the suffix, used the katakana brand name for Japanese, and replaced the 60-character validation with a pixel estimate in the CMS preview. Over-length titles now dropped the brand suffix automatically. German product titles cut off in search results fell by about three quarters, and the Japanese team reported that titles finally looked native in results, with the familiar katakana brand form and full-width separator.

Working with Local Markets

Title conventions are partly linguistic and partly commercial, and neither can be decided centrally. Give each market’s content or SEO lead ownership of its locale’s row in the configuration, with a simple review process for changes. Provide them with a report of the site’s current titles in their locale, sorted by traffic, showing the resolved title, its estimated width and whether it is truncated, so they can judge the effect of a template change before making it. When a new locale launches, its title configuration should be part of the launch checklist, alongside translations and legal pages; launching with the default English template is one of the most visible localization mistakes in search results.

Rollout Checklist

• Move templates, separators and brand names into per-locale configuration.
• Estimate title width in pixels with per-script widths.
• Drop the brand suffix before any truncation, and warn editors.
• Define exceptions for the homepage and utility pages.
• Check title uniqueness per locale in CI.
• Let each market own and review its locale’s settings.

Frequently Asked Questions

Related

• Metadata Injection & SEO Automation
• Previewing SEO Metadata in the CMS
• Modeling SEO and Metadata Fields for Headless Pages