---
title: "Alias Sorting"
description: "Order head tags with before: and after: prefixes. More readable than numeric priorities for script loading and CSS dependencies."
canonical_url: "https://unhead.unjs.io/docs/head/guides/plugins/alias-sorting"
last_updated: "2026-05-14T22:50:58.544Z"
---

**Quick Answer:** The Alias Sorting plugin lets you control head tag order using readable `before:` and `after:` prefixes instead of arbitrary numbers. Use `tagPriority: 'before:script:analytics'` to place a script before another.

## What Is Alias Sorting?

The Alias Sorting plugin lets you control tag order using descriptive `before:` and `after:` prefixes instead of numerical priorities.

## Why Use Aliases Instead of Numbers?

Numerical priorities become hard to maintain as your application grows:

- Numbers are arbitrary and their meaning isn't clear
- You need to know all existing priorities to insert a new tag
- Changing one priority might require updating many others

Aliases make tag ordering more intuitive and maintainable with declarative relationships between tags.

## How Do I Set Up Alias Sorting?

Add the plugin to your Unhead configuration:

<code-block>

```ts [Input]
import { createHead } from '@unhead/dynamic-import'
import { AliasSortingPlugin } from '@unhead/dynamic-import/plugins'

const head = createHead({
  plugins: [
    AliasSortingPlugin()
  ]
})
```

</code-block>

## How Do I Use Alias Sorting?

### Basic Ordering

Use `before:` or `after:` with the tag type and key:

<code-block>

```ts [Input]
useHead({
  // First script
  script: [{
    key: 'analytics',
    src: '/analytics.js'
  }],
})

useHead({
  // This will render before analytics.js
  script: [{
    src: '/critical.js',
    tagPriority: 'before:script:analytics'
  }]
})
```

```html [Output]
<script src="/critical.js"></script>
<script src="/analytics.js"></script>
```

</code-block>

### What Is the Alias Format?

The format is: `{before|after}:{tagName}:{key}`

For example:

- `before:script:analytics` - Place before the analytics script
- `after:meta:description` - Place after the description meta tag
- `before:link:styles` - Place before the styles link tag

### Multiple Dependencies

You can order multiple tags relative to each other:

<code-block>

```ts [Input]
useHead({
  script: [
    {
      key: 'third',
      src: '/c.js',
      tagPriority: 'after:script:second'
    },
    {
      key: 'second',
      src: '/b.js',
      tagPriority: 'after:script:first'
    },
    {
      key: 'first',
      src: '/a.js'
    }
  ]
})
```

```html [Output]
<script src="/a.js"></script>
<script src="/b.js"></script>
<script src="/c.js"></script>
```

</code-block>

### Can I Combine Aliases with Numeric Priorities?

Yes. Alias sorting works alongside numeric priorities. The plugin will preserve the numeric priority of the referenced tag:

<code-block>

```ts [Input]
useHead({
  script: [
    {
      key: 'high-priority',
      src: '/important.js',
      tagPriority: 0
    },
    {
      src: '/also-important.js',
      tagPriority: 'before:script:high-priority'
      // Will inherit priority 0 and render first
    }
  ]
})
```

</code-block>

## Common Use Cases

### How Do I Load Critical CSS First?

Ensure critical CSS is loaded before other stylesheets:

<code-block>

```ts [Input]
useHead({
  link: [
    {
      key: 'main-css',
      rel: 'stylesheet',
      href: '/css/main.css'
    },
    {
      key: 'critical-css',
      rel: 'stylesheet',
      href: '/css/critical.css',
      tagPriority: 'before:link:main-css'
    }
  ]
})
```

</code-block>

### How Do I Control Script Loading Order?

Control the execution sequence of dependent scripts:

<code-block>

```ts [Input]
useHead({
  script: [
    {
      key: 'jquery',
      src: '/js/jquery.js'
    },
    {
      key: 'plugin',
      src: '/js/jquery-plugin.js',
      tagPriority: 'after:script:jquery' // Ensure jQuery loads first
    },
    {
      key: 'app',
      src: '/js/app.js',
      tagPriority: 'after:script:plugin' // Load app.js last
    }
  ]
})
```

</code-block>

## Best Practices

- Use meaningful keys that describe the tag's purpose
- Keep dependencies simple - avoid complex chains
- Consider using numeric priorities for critical tags
- Document your tag ordering strategy for your team

<note>

During hydration (SSR or page switches), tags may not reorder to avoid content flashing. The plugin respects this behavior.

</note>

## Related

- [Tag Positions](/docs/head/guides/core-concepts/positions) - Control tag ordering