---
title: "tags:beforeResolve Hook"
description: "Learn about the tags:beforeResolve hook in Unhead that runs before the tag resolution process"
navigation:
  title: "tags:beforeResolve"
---

The `tags:beforeResolve` hook is called just before the tag resolution process begins. This hook provides access to all tags that have been collected from entries and allows for bulk modifications before the main resolution process.

## Hook Signature

```ts
export interface Hook {
  'tags:beforeResolve': (ctx: TagResolveContext) => HookResult
}
```

### Parameters

| Name | Type | Description |
|------|------|-------------|
| `ctx` | `TagResolveContext` | Context object with the collection of tags |

The `TagResolveContext` interface is defined as:

```ts
interface TagResolveContext {
  tagMap: Map<string, HeadTag>
  tags: HeadTag[]
}
```

### Returns

`HookResult` which is either `void` or `Promise<void>`

## Usage Example

```ts
import { createHead } from '@unhead/dynamic-import'

const head = createHead({
  hooks: {
    'tags:beforeResolve': (ctx) => {
      // Log all tags before resolution
      console.log(`Processing ${ctx.tags.length} tags before resolution`)

      // Add a tag that should be included in all pages
      ctx.tags.push({
        tag: 'meta',
        props: {
          name: 'generator',
          content: 'Unhead'
        }
      })
    }
  }
})
```

## Use Cases

### Pre-processing Tags

You can use this hook to pre-process tags before the main resolution:

```ts
import { defineHeadPlugin } from '@unhead/dynamic-import'

export const tagsPreprocessPlugin = defineHeadPlugin({
  hooks: {
    'tags:beforeResolve': (ctx) => {
      // Sort tags by priority before resolution
      ctx.tags.sort((a, b) => {
        const aPriority = a.tagPriority === 'high'
          ? 0
          : a.tagPriority === 'critical' ? -1 : 1
        const bPriority = b.tagPriority === 'high'
          ? 0
          : b.tagPriority === 'critical' ? -1 : 1
        return aPriority - bPriority
      })
    }
  }
})
```

### Adding Global Tags

This hook is ideal for adding tags that should be present on all pages:

```ts
import { defineHeadPlugin } from '@unhead/dynamic-import'

export const globalTagsPlugin = defineHeadPlugin({
  hooks: {
    'tags:beforeResolve': (ctx) => {
      // Add global meta tags
      const globalTags = [
        {
          tag: 'meta',
          props: {
            charset: 'utf-8'
          }
        },
        {
          tag: 'meta',
          props: {
            name: 'viewport',
            content: 'width=device-width, initial-scale=1'
          }
        },
        {
          tag: 'link',
          props: {
            rel: 'icon',
            href: '/favicon.ico'
          }
        }
      ]

      ctx.tags.push(...globalTags)
    }
  }
})
```

### Filtering Tags Based on Environment

Filter or modify tags based on the current environment:

```ts
import { defineHeadPlugin } from '@unhead/dynamic-import'

export const environmentFilterPlugin = defineHeadPlugin((head) => {
  return {
    hooks: {
      'tags:beforeResolve': (ctx) => {
        const isProduction = process.env.NODE_ENV === 'production'

        // Remove development-only tags in production
        if (isProduction) {
          ctx.tags = ctx.tags.filter((tag) => {
            // Remove development-specific meta tags
            if (tag.tag === 'meta' && tag.props.name === 'robots'
              && tag.props.content === 'noindex, nofollow') {
              return false
            }

            // Remove debug scripts
            if (tag.tag === 'script' && tag.props['data-debug']) {
              return false
            }

            return true
          })
        }
      }
    }
  }
})
```