v3.0.0 · Nuxt SEO Utils · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

[User Guides](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)

[API](https://nuxtseo.com/docs/seo-utils/api/breadcrumbs)

[Releases](https://nuxtseo.com/docs/seo-utils/releases/v8)

SEO Utils

- [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

Search…```k`` /`

v8.1.7

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Changelog

### Releases

- [v8.0.0](https://nuxtseo.com/docs/seo-utils/releases/v8)
- [v7.0.0](https://nuxtseo.com/docs/seo-utils/releases/v7)
- [v6.0.0](https://nuxtseo.com/docs/seo-utils/releases/v6)
- [v5.0.0](https://nuxtseo.com/docs/seo-utils/releases/v5)
- [v4.0.0](https://nuxtseo.com/docs/seo-utils/releases/v4)
- [v3.0.0](https://nuxtseo.com/docs/seo-utils/releases/v3)

Releases

# v3.0.0

[Copy for LLMs](https://nuxtseo.com/docs/seo-utils/releases/v3.md)

## [Background](#background)

Nuxt should look to adopt popular conventions from other frameworks that can improve the developer experience. In this major release we take a small step towards that.

Likewise in this major, we explore the conventions of Nuxt and see what we can do to improve the developer experience.

## [Features 🚀](#features)

### [▲ Next.js inspired [Metadata Files](https://nextjs.org/docs/app/api-reference/file-conventions/metadata)](#nextjs-inspired-metadata-files)

This is a popular convention in Next.js that allows you to define metadata for your pages through the files themselves.

This is now implemented with support for:

- [App Icons / Logos](https://nuxtseo.com/docs/seo-utils/guides/app-icons)
- [Open Graph / Twitter Images](https://nuxtseo.com/docs/seo-utils/guides/open-graph-images)

As Nuxt does not have an App dir, you can place your images inside your `pages` directory. This also follows the convention of @nuxt/content, where you can use a `_dir` folder to store your images.

Example File Structure

```
pages/
├── about/
│   ├── index.vue
│   └── _dir/
│       ├── og-image.png
│       ├── og-image.txt
│       ├── twitter-image.png
│       └── twitter-image.txt
public/
└── logo.png
```

/about Head output

```
<link rel="icon" href="/logo.png" sizes="<generated>" />
<meta property="og:image" content="<site-url>/about/_dir/og-image.png" />
<meta property="og:image:width" content="<generated>>" />
<meta property="og:image:height" content="<generated>" />
<meta property="og:image:type" content="image/<generated>" />
<meta property="og:image:alt" content="This is the alternate text for my image." />
<meta name="twitter:image" content="<site-url>/about/_dir/twitter-image.png" />
<meta name="twitter:image:width" content="<generated>" />
<meta name="twitter:image:height" content="<generated>" />
<meta name="twitter:image:type" content="image/<generated>" />
<meta name="twitter:image:alt" content="This is the alternate text for my image." />
```

### [✨ Nuxt Config `app.seoMeta`](#nuxt-config-appseometa)

The [useSeoMeta](https://nuxt.com/docs/api/composables/use-seo-meta#useseometa) composable is a powerful tool for managing SEO meta tags.

This module brings the power of `useSeoMeta` to your `nuxt.config`.

To use it, simply add within the `app.seoMeta` config of your `nuxt.config`:

nuxt.config.ts

```
export default defineNuxtConfig({
  app: {
    head: {
      seoMeta: {
        ogImage: 'https://example.com/my-og-image.png'
      }
    }
  }
})
```

The functionality is the same as the composable without reactivity. It has a higher priority than `app.head`.

### [🧙 Route Rules](#route-rules)

Providing SEO meta tags for dynamic pages at build time can be difficult.

To make this easier, you can leverage the power of [Route Rules](https://nitro.unjs.io/config#routerules) to provide dynamic SEO meta tags for your pages.

Supporting both `seoMeta` and `head` inputs, you can provide SEO meta tags for your dynamic pages.

```
export default defineNuxtConfig({
  routeRules: {
    '/blog/**': {
      seoMeta: {
        ogImage: 'https://example.com'
      },
      head: {
        link: [
          { rel: 'icon', type: 'image/png', href: '/blog-icon.png' }
        ]
      }
    },
  }
})
```

### [Nuxt Site Config](#nuxt-site-config)

The `siteUrl` config was required for prerendering the `og:image` to an absolute path, this is now deprecated.

Instead, [nuxt-site-config](https://github.com/harlan-zw/nuxt-site-config) is used which automatically sets the URL for some environments.

See the [installation](https://nuxtseo.com/docs/seo-utils/getting-started/installation) page for more details.

## [Deprecations and Breaking Changes](#deprecations-and-breaking-changes)

### [Breaking Changes](#breaking-changes)

The `DebugHead` component has been removed.

DevTools has a tab that can be used to debug your meta tags.

### [API Changes](#api-changes)

The following options have been removed from nuxt.config:

- `seoOptimise` - removed use `automaticOgAndTwitterTags`
- `inferTagsFromFiles` - removed use `metaDataFiles`

### [Behaviour Changes](#behaviour-changes)

Version 3.0.0 now avoids setting a default `titleTemplate` for you. You should now set this yourself.

nuxt.config.ts

```
export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s %separator %siteName'
    }
  }
})
```

[Edit this page](https://github.com/harlan-zw/nuxt-seo-utils/edit/main/docs/content/4.releases/6.v3.md)

[Markdown For LLMs](https://nuxtseo.com/docs/seo-utils/releases/v3.md)

Did this page help you?

[v4.0.0 Release notes for v4.0.0 - Dark/light mode icons support.](https://nuxtseo.com/docs/seo-utils/releases/v4) 

On this page

- [Background](#background)
- [Features 🚀](#features)
- [Deprecations and Breaking Changes](#deprecations-and-breaking-changes)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)