---
title: "tags:beforeResolve Hook"
description: "Hook called before tag resolution. Pre-process tags, add global meta tags, and filter based on environment conditions."
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.

## Lifecycle Position

This hook runs after [`tag:normalise`](/docs/head/api/hooks/tag-normalise) and before [`tags:resolve`](/docs/head/api/hooks/tags-resolve).

## 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
          })
        }
      }
    }
  }
})
```