Nuda Kit uses @nuxtjs/seo — a comprehensive SEO module that bundles everything you need for search engine optimization in one package.
The @nuxtjs/seo module provides:
Sitemap
Robots.txt
Meta Tags
Schema.org
Use the useHead composable to set page-specific metadata:
<script setup lang="ts">
useHead({
title: 'Dashboard',
meta: [
{
name: 'description',
content: 'Manage your account and view analytics.'
},
],
})
</script>
For a cleaner API, use useSeoMeta:
<script setup lang="ts">
useSeoMeta({
title: 'Pricing Plans',
description: 'Choose the plan that fits your needs.',
ogTitle: 'Pricing Plans - Your SaaS',
ogDescription: 'Flexible pricing for teams of all sizes.',
ogImage: '/og/pricing.png',
twitterCard: 'summary_large_image',
})
</script>
Nuda Kit uses a title template defined in app.vue:
<script setup lang="ts">
useHead({
titleTemplate: 'Nuda Kit - %s',
})
</script>
This means:
DashboardNuda Kit - DashboardTo override the template for a specific page:
<script setup lang="ts">
useHead({
title: 'Your SaaS Name',
titleTemplate: '', // Removes the template
})
</script>
Open Graph tags control how your pages appear when shared on social media:
| Tag | Purpose |
|---|---|
og:title | Title shown in social shares |
og:description | Description shown in social shares |
og:image | Preview image (1200x630px recommended) |
og:url | Canonical URL |
og:type | Content type (website, article, etc.) |
<script setup lang="ts">
useSeoMeta({
ogTitle: 'Your Page Title',
ogDescription: 'A compelling description for social sharing.',
ogImage: 'https://yourdomain.com/og-image.png',
ogUrl: 'https://yourdomain.com/page',
ogType: 'website',
})
</script>
Twitter uses its own meta tags for rich previews:
<script setup lang="ts">
useSeoMeta({
twitterCard: 'summary_large_image',
twitterTitle: 'Your Page Title',
twitterDescription: 'Description for Twitter.',
twitterImage: 'https://yourdomain.com/twitter-image.png',
})
</script>
| Type | Description |
|---|---|
summary | Small square image |
summary_large_image | Large rectangular image |
app | App download card |
player | Video/audio player |
Configure global SEO settings in nuxt.config.ts:
export default defineNuxtConfig({
site: {
url: 'https://yourdomain.com',
name: 'Your SaaS Name',
description: 'Your default meta description.',
defaultLocale: 'en',
},
})
These values are used as defaults when page-specific values aren't set.
The sitemap is automatically generated at /sitemap.xml. Configure it in nuxt.config.ts:
export default defineNuxtConfig({
sitemap: {
// Exclude certain routes
exclude: [
'/app/**', // Exclude authenticated pages
'/admin/**',
],
// Add custom URLs
urls: [
'/custom-page',
],
},
})
/app/*) are typically excluded from sitemaps since they're not indexable.Control search engine crawlers with robots.txt configuration:
export default defineNuxtConfig({
robots: {
// Disallow specific paths
disallow: ['/app/', '/api/'],
// Allow specific crawlers
allow: '/',
},
})
The generated robots.txt will be available at /robots.txt.
Prevent duplicate content issues with canonical URLs:
<script setup lang="ts">
useHead({
link: [
{ rel: 'canonical', href: 'https://yourdomain.com/page' }
],
})
</script>
Add structured data for rich search results:
<script setup lang="ts">
useSchemaOrg([
defineOrganization({
name: 'Your Company',
logo: '/logo.png',
sameAs: [
'https://twitter.com/yourcompany',
'https://linkedin.com/company/yourcompany',
],
}),
])
</script>
| Type | Use Case |
|---|---|
Organization | Company information |
WebSite | Site-wide search box |
Product | Product pages |
FAQPage | FAQ sections |
Article | Blog posts |
BreadcrumbList | Breadcrumb navigation |
alt textUse browser dev tools to inspect meta tags:
<head> section for meta tags