公司网站建设中心_品牌宣传有哪些途径_重庆网站快速排名提升_b站推广网站入口2023是什么

可提升应用的SEO

nuxt.config.ts 中设置 Head

全局的静态配置，无法动态改变

export default defineNuxtConfig({app: {head: {title: "网站标题",charset: "utf-8",viewport: "width=device-width, initial-scale=1",link: [{rel: "stylesheet",href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",},],meta: [{name: "description",content: "我的nuxt应用",},],},},
})

使用 useHead 设置 Head

可在任意页面中使用，若在 app.vue 中使用，则全局生效。

<script setup lang="ts">
useHead({title: '我的应用',meta: [{ name: 'description', content: '我的神奇网站。' }],bodyAttrs: {class: 'test'},script: [{src: 'https://third-party-script.com',// 有效选项为：'head' | 'bodyClose' | 'bodyOpen'tagPosition: 'bodyClose'// 使用 tagPosition: 'bodyClose' 选项将它们附加到 <body> 标签的末尾}]
})
</script>

具有动态响应式

<script setup lang="ts">
const description = ref('我的神奇网站。')useHead({meta: [{ name: 'description', content: description }],
})
</script>

标题模板

可以使用 titleTemplate 选项来提供一个动态模板，以自定义站点的标题，例如在每个页面的标题中添加站点名称。

titleTemplate 可以是一个字符串，其中 %s 会被标题替换，也可以是一个函数（为函数时，不能在 nuxt.config 中设置，而是建议在 app.vue 文件中设置，这样它将适用于你站点上的所有页面）。

<script setup lang="ts">
useHead({titleTemplate: (titleChunk) => {return titleChunk ? `${titleChunk} - 网站名称` : '网站名称';}
})
</script>

动态标题

<script setup lang="ts">
useHead({// 作为字符串，// 其中`%s`会被标题替换titleTemplate: '%s - 网站标题',// ... 或者作为一个函数titleTemplate: (productCategory) => {return productCategory? `${productCategory} - 网站标题`: '网站标题'}
})
</script>

使用 useSeoMeta 设置 SEO 相关的元数据

useSeoMeta({title: 'My Page Title',description: 'This is a description of my page.',keywords: 'nuxt, useSeoMeta, meta tags'
})

useHead 和 useSeoMeta 的区别

两者都能设置 Head，区别如下：

useSeoMeta 只关注 SEO 相关的元数据，以简洁的方式设置标题、描述、关键词等，代码更少，效率更高
useHead 除了可以设置 SEO 相关的元数据外，还能设置 link 导入样式，设置 script 导入脚本，功能更全，灵活度更高，可以使用对象语法来详细配置每个头部标签的属性，还能使用嵌套对象来组织复杂的配置。

使用 definePageMeta 设置路由元数据

<script setup lang="ts">
// 这是在构建时通过宏提取的，因此不能动态设置
definePageMeta({title: '某个页面'
})
</script>

在布局文件（如 layouts/default.vue）中，可以使用路由元数据：

<script setup lang="ts">
const route = useRoute()useHead({meta: [{ property: 'og:title', content: `应用名称 - ${route.meta.title}` }]
})
</script>

使用内置组件设置 Head

    <Head><Title>{{ title }}</Title><Meta name="description" :content="title" /><Style type="text/css" children="body { background-color: green; }" /></Head>

相关的组件有 <Title>、<Base>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html>和<Head>

TS 中的类型描述

interface MetaObject {title?: stringtitleTemplate?: string | ((title?: string) => string)templateParams?: Record<string, string | Record<string, string>>base?: Baselink?: Link[]meta?: Meta[]style?: Style[]script?: Script[]noscript?: Noscript[];htmlAttrs?: HtmlAttributes;bodyAttrs?: BodyAttributes;
}