Meta Tags
Meta tags are essential for SEO (Search Engine Optimization) and social media sharing. Nuxt provides powerful composables to manage meta tags dynamically.
Why Meta Tags Matter
Meta tags help:
- Search engines understand your page content
- Social media display rich previews when sharing
- Browsers configure viewport and behavior
- Users see proper titles in browser tabs
useHead Composable
The useHead composable allows you to manage all HTML head elements:
<script setup>
useHead({
title: 'My Page Title',
meta: [
{ name: 'description', content: 'My page description' },
{ property: 'og:title', content: 'My Page Title' },
{ property: 'og:description', content: 'My page description' }
]
})
</script>
Page-Specific Titles
Set different titles for different pages:
<script setup>
// pages/about.vue
useHead({
title: 'About Us'
})
</script>
<script setup>
// pages/contact.vue
useHead({
title: 'Contact Us'
})
</script>
Dynamic Titles
Use reactive data for dynamic titles:
<script setup>
const product = ref({ name: 'Vue.js Course' })
useHead({
title: () => `${product.value.name} - My Store`
})
</script>
useSeoMeta Composable
For SEO-specific meta tags, use useSeoMeta - a type-safe alternative:
<script setup>
useSeoMeta({
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: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
</script>
Common Meta Tags
Open Graph (Facebook, LinkedIn)
<script setup>
useSeoMeta({
ogTitle: 'Page Title',
ogDescription: 'Page description',
ogImage: 'https://example.com/image.jpg',
ogUrl: 'https://example.com/page',
ogType: 'website'
})
</script>
Twitter Cards
<script setup>
useSeoMeta({
twitterCard: 'summary_large_image',
twitterTitle: 'Page Title',
twitterDescription: 'Page description',
twitterImage: 'https://example.com/image.jpg',
})
</script>
App-Wide Default Meta
Set default meta tags in app.vue or nuxt.config.ts:
In app.vue
<script setup>
useHead({
titleTemplate: '%s - My Site',
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
})
</script>
In nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
title: 'My Site',
meta: [
{ name: 'description', content: 'My amazing site' }
]
}
}
})
Title Templates
Create consistent title formats:
<script setup>
// In app.vue
useHead({
titleTemplate: (title) => {
return title ? `${title} - My Site` : 'My Site'
}
})
</script>
<script setup>
// In pages/about.vue
useHead({
title: 'About' // Results in: "About - My Site"
})
</script>
Body Attributes
You can also set attributes on the <body> tag:
<script setup>
useHead({
bodyAttrs: {
class: 'dark-mode'
}
})
</script>
External Scripts
Add external scripts to your pages:
<script setup>
useHead({
script: [
{
src: 'https://example.com/analytics.js',
async: true
}
]
})
</script>
Best Practices
- ✅ Always set a title - Every page should have a unique, descriptive title
- ✅ Write good descriptions - Keep them between 150-160 characters
- ✅ Use Open Graph tags - Enable rich social media previews
- ✅ Set viewport meta - Essential for mobile responsiveness
- ✅ Use titleTemplate - Maintain consistent title format
- ✅ Keep it DRY - Set defaults in app.vue or nuxt.config.ts
- ✅ Test social sharing - Use tools like Open Graph Debugger
SEO Checklist
- ✅ Unique title for each page
- ✅ Meta description (150-160 characters)
- ✅ Open Graph tags (og:title, og:description, og:image)
- ✅ Twitter Card tags
- ✅ Canonical URL
- ✅ Viewport meta tag
- ✅ Charset declaration
- ✅ Language declaration
Proper meta tag management is crucial for SEO and social media presence. Nuxt makes it easy with useHead and useSeoMeta composables!