Customize generated title (omit suffix)

[Samrose-Ahmed]

Is there a way to customize the generated title?

We don't want to add the | SiteTitle suffix for blog posts. I tried to add

import Head from "@docusaurus/Head";

<Head>
  <title>My simple title</title>
</Head>

but it doesn't work.

[slorber]

No easy way, unfortunately, but it's worth opening a feature request for that.

We have a titleDelimiter options so it makes sense that we also have some kind of titleTemplate config instead of hardcoding:

export const useTitleFormatter = (title?: string | undefined): string => {
  const {siteConfig} = useDocusaurusContext();
  const {title: siteTitle, titleDelimiter} = siteConfig;
  return title && title.trim().length
    ? `${title.trim()} ${titleDelimiter} ${siteTitle}`
    : siteTitle;
};

---

but it doesn't work.

Actually, this works if you add the <Head> component at the end, render order matters (cf doc of https://github.com/nfl/react-helmet)

A temporary solution: swizzle wrap both the Layout/Seo components to override our logic:

https://docusaurus.io/docs/advanced/swizzling#wrapping-theme-components

import Layout from '@theme-original/Layout';
import React from 'react';

export default function LayoutWrapper(props) {
  return (
    <>
      <Layout {...props} />
      <Head titleTemplate="%s | MySuffix">
        {props.title && <title>{props.title}</title>}
      </Head>
    </>
  );
}

(titleTemplate is a react-helmet feature, we don't actually use it but you could)

[Josh-Cena]

See #5878

[slorber]

It will be possible in v3.8 soon: #11090