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.
以上是来自官网的介绍。
通用的使用方法是：
<script setup>
import { Head } from '@unhead/vue/components'
</script>
<template>
<Head>
<title>My awesome site</title>
<meta name="description" content="My awesome site description">
</Head>
</template>Unhead Vue包导出一个组件<Head>,然后正常写入数据。
还有一种方式是使用useHead方法：
import { useHead } from '@unhead/vue'
useHead({
title: 'My Page',
meta: [
{
name: 'description',
content: 'My page description',
},
],
})以及useSeoMeta:
import { useSeoMeta } from '@unhead/vue'
useSeoMeta({
title: 'About',
description: 'My about page',
ogDescription: 'Still about my about page',
ogTitle: 'About',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
