Are you building a web application with Nuxt.js and want to ensure it ranks well in search engine results? Search Engine Optimization (SEO) is crucial for driving organic traffic to your website. In this guide, we’ll explore how to enhance your Nuxt app’s SEO using powerful head configuration, composables, and components.

Defaults and Configuration

Out-of-the-box, Nuxt provides sensible defaults for key SEO-related properties. These include setting the character encoding and viewport for your app. You can customize these defaults in your nuxt.config.js file. Here’s a snippet:

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',

his allows you to specify global settings for your app’s head section. However, for more dynamic and reactive SEO management, we recommend diving into the following techniques.

Leveraging useHead Composable

The useHead composable is a powerful tool for managing your app’s head tags programmatically and reactively. It enables you to set properties like the title, meta tags, body attributes, and script tags with ease. Here’s an example of how to use it in your component:

<script setup lang="ts">
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  bodyAttrs: {
    class: 'test'
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]

This method empowers you to manage your app’s SEO reactively within your components.

‘useSeoMeta’ and ‘useServerSeoMeta’ Composables

To avoid common SEO-related mistakes, such as using ‘name’ instead of ‘property’ in meta tags, you can employ the useSeoMeta and useServerSeoMeta composables. These tools enable you to define your site’s SEO meta tags as a flat object with full TypeScript support. Here’s an example:

<script setup lang="ts">
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: '',
  twitterCard: 'summary_large_image',

These composables enhance your SEO by making it easier to define and manage meta tags.

Components for Direct Interaction

Nuxt provides a set of components like <Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html>, and <Head>. These components enable you to interact directly with metadata within your component’s template. Here’s an example:

<script setup>
import { ref } from 'vue'

const title = ref('Hello World')

      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="body { background-color: green; }" />

    <h1>{{ title }}</h1>

These components make it straightforward to manage metadata within your templates.


Effective SEO is a critical aspect of any web application. With Nuxt.js and the techniques outlined in this guide, you can enhance your app’s SEO by managing metadata, titles, and other SEO-related elements in a programmatic and reactive manner. Boost your website’s visibility in search engine results and attract more organic traffic by optimizing your Nuxt app for SEO.

Start implementing these techniques today and watch your Nuxt app climb the search engine rankings!

Write A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.