Nuxt SEO Utils v8.0.0

Introduction

The v8 release introduces social sharing composables, a CLI for icon generation, automatic inline minification, devtools integration, and several quality of life improvements for i18n and breadcrumb users.

⚠️ Breaking Changes

Site Config v4: Nuxt Site Config is a module used internally by Nuxt SEO Utils.

The major update to v4.0.0 shouldn't have any direct effect on your site; however, you may want to double-check the breaking changes.

🔗 `useShareLinks()` Composable

Adding social share buttons to your site means wrangling platform specific URL formats, query parameters, and UTM tracking across every network. useShareLinks() handles all of that, giving you reactive share URLs for 8 platforms with built in UTM attribution.

<script setup>
const links = useShareLinks({
  title: 'Check this out',
  utm: { source: 'auto', campaign: 'launch' }
})
</script>

<template>
  <a :href="links.twitter">Share on Twitter</a>
  <a :href="links.facebook">Share on Facebook</a>
  <a :href="links.linkedin">Share on LinkedIn</a>
</template>

Supported platforms: twitter, facebook, linkedin, whatsapp, telegram, reddit, pinterest, email.

UTM tracking is enabled by default with automatic per-platform utm_source values. Disable with utm: false or provide a custom configuration. An object without source: 'auto' is manual mode: it sends only the UTM keys you pass.

useShareLinks({
  utm: {
    source: 'auto', // uses platform name
    medium: 'social',
    campaign: 'spring-launch'
  },
  twitter: { via: 'harloops', hashtags: ['nuxt', 'seo'] },
  pinterest: { media: 'https://example.com/image.png' }
})

⚡ Inline Script & Style Minification

Nuxt minifies your bundled JS and CSS, but inline <script> and <style> tags injected via useHead() or hydration payloads ship unminified. On content heavy pages this adds meaningful weight to every SSR response. v8 now automatically minifies these inline tags in production with zero configuration.

Two complementary modes work together:

Build mode uses Rolldown (Vite 8+) or esbuild with lightningcss for full minification of prerendered HTML and app.head content.
Runtime mode uses lightweight pure JS minifiers (no native deps) to minify hydration payloads and useHead() injections on every SSR request, compatible with any deployment target.

Enabled by default. Configure or disable per mode:

export default defineNuxtConfig({
  seo: {
    minify: true, // default — both modes
    // minify: { build: true, runtime: false },
    // minify: false,
  },
})

See the Inline Minification guide for full details.

🖼️ `nuxt-seo-utils icons` CLI Command

Every platform expects a different icon size and format: browsers want favicon.ico, iOS needs apple-touch-icon.png, PWAs require 192px and 512px variants. Manually exporting and maintaining all of these from a single logo is tedious. This CLI command generates every variant from one source image.

npx nuxt-seo-utils icons --source logo.svg

Generates the following files in your public directory:

favicon.ico (32x32)
icon-16x16.png
icon-32x32.png
apple-touch-icon.png (180x180)
icon-192x192.png
icon-512x512.png

Accepts SVG, PNG, JPG, and WebP source formats.

🏷️ Configurable `tagPriority` for OG Meta Tags

Some crawlers stop reading <head> after a certain byte limit. If large style blocks appear before your OG meta tags, crawlers may never see them. This option lets you control where SEO meta tags are placed in the <head> so they render before style blocks that could push them past the limit.

export default defineNuxtConfig({
  seo: {
    tagPriority: 'low' // default
  }
})

The default of 'low' ensures module-level SEO tags act as fallbacks that page-level useSeoMeta() calls can override. You can also use 'critical', 'high', a number, or before:/after: aliases.

🛠️ Devtools Integration

Debugging SEO issues usually means viewing page source, checking meta tags manually, and testing share previews through each platform. The new devtools panel at /__nuxt-seo-utils gives you a single dashboard to inspect all meta tags and preview social share cards during development.

📝 `useFallbackTitle()` Composable

Pages without an explicit useHead({ title }) still need a reasonable title for SEO and browser tabs. Previously this fallback logic was internal. Now it's exposed as a standalone composable so you can use the same resolution logic (route metadata, i18n keys, title cased URL segments) anywhere in your app.

const title = useFallbackTitle()
// /about-us → "About Us"
// 404 page  → "404 - Page not found"

⚡ Performance

Replaced fast-glob with tinyglobby for faster file matching
Inline minification reduces SSR HTML payload size with minimal runtime overhead

🐛 Bug Fixes

Error pages: Preserve user-defined titles on error pages instead of overwriting them
i18n: Resolve fallback page titles from i18n translation keys (pages.{routeName}.title)
Breadcrumbs: Resolve Schema.org duplicate @id and double registration
Meta precedence: Ensure useServerSeoMeta takes precedence over site defaults