---
title: "v3.0.0 · Nuxt SEO Utils · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/seo-utils/releases/v3"
last_updated: "2026-08-14T20:56:07.618Z"
meta:
  description: "Release notes for v3.0.0 - Next.js inspired metadata files."
  "og:description": "Release notes for v3.0.0 - Next.js inspired metadata files."
  "og:title": "v3.0.0 · Nuxt SEO Utils · Nuxt SEO"
---

Nuxt SEO on GitHub

Switch to SEO UtilsSwitch to Nuxt SEOSwitch to RobotsSwitch to SitemapSwitch to OG ImageSwitch to Schema.orgSwitch to Link CheckerSwitch to Site ConfigSwitch to Skew ProtectionSwitch to AI Ready

**Releases**

# **v3.0.0**

## 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 :

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

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

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

  

/about Head output

```html
<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**`

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

```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

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.

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

### 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

### Breaking Changes

The `**DebugHead**` component has been removed.

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

### API Changes

The following options have been removed from nuxt.config:

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

### Behavior Changes

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

nuxt.config.ts

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

**Was this page helpful?**

### **Related **

[**v4.0.0**](https://nuxtseo.com/docs/seo-utils/releases/v4)

[**App Icons**](https://nuxtseo.com/docs/seo-utils/guides/app-icons)

[**Open Graph Images**](https://nuxtseo.com/docs/seo-utils/guides/open-graph-images)

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