---
title: Unhead管理网站head标签内容
description: 使用vue2开发网站前端的时候使用组件vue-meta，可针对每个页面设置不同的标题和描述信息。再使用vue3开发的时候发现Unhead更为方便。
author: chaihongjun
category: frontend
published: 2024-12-16
url: https://chaihongjun.me/frontend/37.html
---

# Unhead管理网站head标签内容

Unhead通过支持SSR（服务器端渲染）和CSR（客户端渲染）来管理您网站的<head>。实际就是可以配置<head>标签内的内容。

> Unhead manages the <head> of your site with support for SSR Server-Side Rendering and CSR Client-Side Rendering. It's split into multiple packages to improve modularization and flexibility, allowing developers to choose and use only the components they actually need.The core package is framework-agnostic and should work in any setup.Framework packages are provided to improve the DX of using Unhead with the framework.Optional packages exist to add extra functionality and optimisations to Unhead.

以上是来自[官网](https://unhead.unjs.io/setup/unhead/introduction)的介绍。

通用的使用方法是：
MDBLOCK0
Unhead Vue包导出一个组件<Head>,然后正常写入数据。

还有一种方式是使用useHead方法：
MDBLOCK1
以及useSeoMeta:
MDBLOCK2

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/37.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。
