9.Nuxt’s SEO practice

1. Introduction

The advantages of the Nuxt framework in SEO are mainly reflected in the following aspects:

Server-side rendering (SSR): Nuxt supports SSR by default, which means that search engine crawlers can directly see the complete page content without executing JavaScript.
Built-in meta tag management: Nuxt provides a simpler API than Next to manage <head> tags, including title, meta description and other key SEO elements.
Static site generation (SSG): Through the nuxt generate command, a completely static website can be generated, further improving performance and SEO friendliness.

2. Nuxt’s built-in SEO functions

The Nuxt framework has multiple powerful SEO tools built into it, allowing developers to easily optimize their applications. Let’s understand these features in detail:

useHead and useSeoMeta combined functions

Nuxt has 2 combined functions that make managing header meta tags simpler and more flexible:

useHead: This function allows you to dynamically set the content of the <head> tag.

useHead({
  title: 'My Amazing Site',
  meta: [{ name: 'description', content: 'This is my amazing site built with Nuxt 3' }],
  link: [{ rel: 'canonical', href: 'https://example.com' }]
})

useSeoMeta: This function is specially used to set SEO-related meta tags.

useSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site - The Best Site Ever',
  description: 'This is my amazing site built with Nuxt 3',
  ogDescription: 'Experience the best site ever built with Nuxt 3',
  ogImage: 'https://example.com/image.jpg'
})

The final effect achieved by the two is the same. They both set the source data tag in the head. There is no special difference in usage scenarios. It is just that the ts type and structure simplify when using useSeoMeta.

Dynamic meta tag management

Nuxt allows you to dynamically update meta tags based on page content or routes. This is great for creating unique meta descriptions and titles that are optimized for each page.

const route = useRoute()

useHead(() => ({
  title: `${route.params.productName} - Our Store`,
  meta: [
    { name: 'description', content: `Learn more about ${route.params.productName} and purchase it from our store.` }
  ]
}))

The consideration for this scenario is this. Because there is a lazy logo, the page will be entered directly for client rendering. However, because it is a newly entered page and the request has not yet received the data, the title displayed above the browser is undefined-product. When the request ends, because data is a responsive object, the title of the page will be updated directly.

const { data } = await useFetch('/api/products/[id]', {
  lazy: true
})
useHead(() => ({
  title: `${data.title}-product`
}))

This is just a small demo. A better approach is to have a placeholder text for the title when there is no data.

Automatically generate canonical URLs

Nuxt can automatically generate canonical links for your pages, which helps prevent duplicate content issues. You can configure this functionality in nuxt.config.js:

export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'canonical', href: 'https://example.com' }]
    }
  }
})

These syntactic sugars provide a solid SEO foundation

1. Introduction

2. Nuxt’s built-in SEO functions

useHead and useSeoMeta combined functions

Dynamic meta tag management

Automatically generate canonical URLs

Subscribe to unlock the full article