SEO Route Rules

Introduction

Sometimes we're dealing with complex page structures which make it difficult to set SEO meta tags appropriately without duplication.

To get around this, you can use build-time Route Rules to set dynamic SEO meta tags. This is useful for setting up default meta tags for a specific set of pages, such as a blog or product pages.

Usage

Due to the performance implications, route rules are injected within the server runtime based on the route. This means that the properties will not update on client-side navigation, you should only use this for data needed by crawlers.

Trying to set default OG Images? Try instead use the App Icons - Open Graph Images.

seoMeta

Takes the same input as useSeoMeta().

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': {
      seoMeta: {
        author: 'Harlan Wilton',
      },
    },
  }
})

head

Takes the same input as useHead().

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': {
      head: {
        // set default icon for blog posts
        link: [
          { rel: 'icon', type: 'image/png', href: '/blog-icon.png' }
        ]
      },
    },
  }
})

Limitations

Route rules will by default take a high priority, meaning that they will override any other meta tags set by the page. You can override

<script lang="ts" setup>
useSeoMeta({
  description: 'My awesome blog post',
}, {
  tagPriority: 'high' // overrides route rules
})
</script>