---
title: "v3.0.0"
description: "Release notes for v3.0.0 - Next.js inspired metadata files."
canonical_url: "https://nuxtseo.com/docs/seo-utils/releases/v3"
last_updated: "2026-05-25T15:23:28.532Z"
---

## 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](/docs/seo-utils/guides/app-icons)
- [Open Graph / Twitter Images](/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
<span>

@nuxt/content

</span>

, where you can use a `_dir` folder to store your images.

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

<br />

```html [/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`

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

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

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](/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`

### Behaviour Changes

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

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s %separator %siteName'
    }
  }
})
```