3.5 KiB
3.5 KiB
SEO Utilities
Additional utilities from nuxt-seo-utils and nuxt-link-checker.
Canonical URLs
Automatic canonical URLs based on site config.
export default defineNuxtConfig({
seoUtils: {
canonicalQueryWhitelist: ['page', 'sort'], // Keep these query params
redirectToCanonicalSiteUrl: true // 301 to canonical domain
}
})
Override per-page:
useHead({
link: [{ rel: 'canonical', href: 'https://example.com/preferred-url' }]
})
Breadcrumbs
Generate breadcrumb items from current route:
const items = useBreadcrumbItems()
// [{ label: 'Home', to: '/' }, { label: 'Blog', to: '/blog' }, { label: 'My Post' }]
For schema.org integration, see schema-org.md.
Render in template:
<template>
<nav aria-label="Breadcrumb">
<ol class="flex gap-2">
<li v-for="(item, i) in items" :key="i">
<NuxtLink v-if="item.to" :to="item.to">{{ item.label }}</NuxtLink>
<span v-else>{{ item.label }}</span>
</li>
</ol>
</nav>
</template>
Customize labels in route meta:
// pages/blog/[slug].vue
definePageMeta({
breadcrumb: { label: 'Article' }
})
Title Templates
Set site-wide title template:
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
titleTemplate: '%s | My Site'
}
}
})
Override per-page:
useHead({
title: 'Page Title',
titleTemplate: '%s - Different Template'
})
Meta Defaults
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
meta: [
{ name: 'author', content: 'My Name' },
{ property: 'og:site_name', content: 'My Site' }
]
}
}
})
Link Checker
Build-time validation of links.
export default defineNuxtConfig({
linkChecker: {
failOnError: true, // Default: fail build on errors
exclude: ['/api/**'],
skipInspections: ['missing-hash'],
report: { html: true } // Generate HTML report
}
})
Inspections:
no-error-response- 404/500 errorsno-baseless- Missing base URLno-javascript- javascript: linkstrailing-slash- Inconsistent slashesmissing-hash- Invalid anchor targetsno-uppercase-chars- URL casingabsolute-site-urls- Hardcoded domain
Ignoring Links
<a href="/maybe-broken" data-link-checker-ignore>Link</a>
File-Based Icons
Place favicon files in public/:
public/
├── favicon.ico
├── favicon.svg # Modern browsers
├── apple-touch-icon.png
└── site.webmanifest
Auto-detected and added to <head>.
For SVG favicon with dark mode support:
<!-- public/favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #fff; }
}
</style>
<path d="..."/>
</svg>
Social Meta Tags
Automatic Open Graph and Twitter cards from site config (see site-config.md).
Override per-page:
useSeoMeta({
title: 'Page Title',
description: 'Page description',
ogImage: '/images/page-og.png',
twitterCard: 'summary_large_image'
})
Trailing Slash Redirect
Enforce consistent URLs:
export default defineNuxtConfig({
site: {
trailingSlash: false // Redirect /blog/ to /blog
}
})
Debug Panel
Enable comprehensive debug panel:
export default defineNuxtConfig({
seo: { debug: true }
})
Shows in dev:
- Current meta tags
- Schema.org data
- OG image preview
- Sitemap/robots status