HTML document title and setting the head in Nuxt project

The head element

The <head> element mainly stores information for machine processing rather than for human readers. It can be simply understood that the information contained in <head> is hidden in the web page code, rather than anything the user sees directly on the page.

The <head> contains the following internal elements:

<title>
<base>
<link>
<style>
<meta>
<script>
<noscript>
<template>

It's important to remember that a <head> element is limited to including just one <title> element.

The title element

The <title> element defines the title of the document, shown in the browser's title bar or on its tab..

Title content and format

The <title> should exclusively feature text. Including HTML tags within it, such as <b>, <i>, <script>, etc., means these tags won't be rendered by the browser as HTML. Rather, they'll be processed as regular text, similar to the example that follows:

<title>
  This is a <b>bold</b> title
</title>

In displaying titles, browsers don't apply the bold formatting to the word "bold"; instead, they disregard the <b> tag, showing only the text "This is a bold title" without any formatting effect on "bold".

Title adn SEO

According to the MDN documentation，the content of a page's <title> can play a crucial role in SEO. Longer, descriptive titles usually outperform short or vague ones. The title's content is a key factor used by search engine algorithms to decide how pages are ranked in search results.

For example, the homepage of the GitHub website has the title set as <title>GitHub: Let’s build from here · GitHub</title>, which is displayed in Google search results as follows:

Vercel's website has the title set as <title>Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel</title>, which is displayed in Google search results as follows:

GitHub and Vercel both combine their brand name with a product description in descriptive titles, allowing users to quickly and clearly find the corresponding website in search results and gain an initial understanding of the site.

Let's look at another example, Openai's competitor Anthropic. Their official homepage title is set as: <title>Home \ Anthropic</title>, and it appears in Google search results as follows:

The most noticeable title “Home \ Anthropic” does not fully showcase the brand and product, and the “\” is not commonly seen in everyday reading, lacking clear semantics. If the title were changed to: <title>Anthropic: AI research and products that put safety at the frontier</title>, the display effect on Google search results pages would be as follows, wouldn't that be more effective?

Setting the head in Nuxt project

Nuxt offers several ways to set the webpage's head, including useHead(), useSeoMeta(), useServerSeoMeta(), and nuxt config. From my understanding, useHead() and nuxt config focus on the <head> level, allowing the definition of all elements and attributes within <head>; useSeoMeta() and useServerSeoMeta() are focused on the <head> 's child tag <meta>, targeting its elements and attributes.

Shared head

The shared head data for all web pages can be defined in app.vue, /layouts/default.vue, or nuxt.config.ts, as follows:

<!-- app.vue or /layouts/default.vue -->

<script setup>
useHead({
  title: 'My App',
  meta: [{ name: 'description', content: 'My amazing site.' }],
})
</script>

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      title: "My App",
      meta: [{ name: "description", content: "My amazing site." }],
    },
  },
});

If individual pages don't have their own head settings, they'll inherit the shared head configuration defined earlier. However, if a page has its own specific head settings, these will take precedence and replace the shared configuration.

Shared head and specific head

To implement a combination of shared and specific head configurations, such as setting up titles in the format of "My app: home", "My app: about", you can use titleTemplate in app.vue, /layouts/default.vue, or nuxt.config.ts, as shown below:

<!-- app.vue or /layouts/default.vue -->

<script setup>
useHead({
  titleTemplate: "My app: %s",
  meta: [{ name: 'description', content: 'My amazing site.' }],
})
</script>

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: "My app: %s",
      meta: [{ name: "description", content: "My amazing site." }],
    },
  },
});

The placeholder "%s" is dynamically replaced with each page's specific title, which is then prefixed with "My app: " from the titleTemplate, resulting in a customized title for each page, such as:

<!-- index.vue -->

<script setup>
useHead({
  title: "home",
});
</script>

<!-- about.vue -->

<script setup>
useHead({
  title: "about",
});
</script>

The titles for these pages ultimately appear as "My app: home" and "My app: about", showcasing the combination of shared and specific head settings in action.

Shared head and specific head (advanced version)

For more advanced combined rendering of shared and specific heads, since nuxt.config.ts doesn't allow for function-based control, the absence of a specific page title can lead to a rather unfinished "My app: " result from the titleTemplate. To address this, you can employ a function within app.vue or /layouts/default.vue to conditionally determine the output.

<!-- app.vue or /layouts/default.vue -->

<script setup>
const siteTitle = "My app";
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${siteTitle}: ${titleChunk}` : siteTitle;
  },
});
</script>

<!-- index.vue -->

<script setup>
useHead({
  title: "home",
});
</script>

<!-- about.vue -->

<script setup>
useHead({
  title: "about",
});
</script>

<!-- pricing.vue -->

<script setup>

</script>

The final rendered titles are: "My app: home", "My app: about", and "My app".

HTML document title and setting the head in Nuxt project

JeeJee Guan