Provide title without template

[toniengelhardt]

Clear and concise description of the problem

I think it is a common use case when you create a custom template that you need the title without the titleTemplate, e.g. when you have a template like %s - My Brand, in the OG image you might want to render "My Brand" as a logo or something and then just print the raw title below.

Suggested solution

Provide the title without template as prop to the image island component e.g. as titleRaw or something.

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[harlan-zw]

I agree, ideally, the inferred title would be without the title template. This is a limitation on how it's inferred (reads the HTML source of the page).

You can always override this by just passing in a title <OgImageStatic title="My Title" />, but I'll see if I can find a fix

[toniengelhardt]

Yeah, but then you have to add the component to every page. Right now I can just drop it into app.vue and that's it, which is super convenient!

As a workaround I do this rn:

const config = useRuntimeConfig()
const rawTitle = computed(() => props.title ? props.title.split(config.public.titleSeparator)[0].trim() : 'No title')

But it will fail if a page overrides the template.

[dargmuesli]

Similarly, I want to use the title template that's used for <title /> for <OgImageStatic /> as well: If I set no title on a page, only the site name should be shown (happens for title, but not on OgImageStatic). If I set a title on a page, I want %s %titleSeperator %siteName to be the title used for <title /> as well as <OgImageStatic />

I'm wondering: why are there two title templates? One on useHead and one on { app: head {}}? Could the latter be computed by any chance?

[harlan-zw]

Similarly, I want to use the title template that's used for <title /> for <OgImageStatic /> as well: If I set no title on a page, only the site name should be shown (happens for title, but not on OgImageStatic). If I set a title on a page, I want %s %titleSeperator %siteName to be the title used for <title /> as well as <OgImageStatic />

I'm wondering: why are there two title templates? One on useHead and one on { app: head {}}? Could the latter be computed by any chance?

I think this is a Nuxt SEO Kit thing you're talking about? I'm not exactly sure what you mean but we don't have the ability to do any computation in the nuxt.config, so any computation needs to be handled by useHead. This is one reason that Template Params exist.

In terms of this actual issue, the latest Unhead supports template params in JSON strings, so it can infer just the page title from %s, without having to query the pages HTML. Will wait until the Nuxt core is using this before adding support to avoid issues, will be soon though.

[harlan-zw]

Hey @toniengelhardt

This is now available in 1.5.0. Simply leave the title prop empty and it will use the title value itself (no longer using the title template).

Behind the scenes this uses { title: '%s' }, Unhead will automatically unpack the template param. So if you want to create your own template you can modify that, just include the %s.

[toniengelhardt]

Amazing, perfect solution! Thanks a lot 🙏🏽