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.
Trying to set default OG Images? Try instead use the App Icons - Open Graph Images.
seoMetaTakes the same input as useSeoMeta().
Nuxt SEO Utils loads the Infer SEO Meta Plugin from Unhead that will automatically infer SEO meta tags for you based on your content, including og:title, og:description, twitter:card.
export default defineNuxtConfig({
routeRules: {
'/blog/**': {
seoMeta: {
author: 'Harlan Wilton',
},
},
}
})
headTakes 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' }
]
},
},
}
})
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 this by setting a higher priority in your page components:
<script lang="ts" setup>
useSeoMeta({
description: 'My awesome blog post',
}, {
tagPriority: 'high' // overrides route rules
})
</script>