Nuxt3的SEO

Nuxt动态设置title

在nuxt.config.ts里配置head的title，会默认给每个页面都加上这样的title。审查元素，浏览器标签页或者查看网页源代码的时候就能看到title里的内容。我一开始写了固定的内容，通过useHead给某些页面设置title。这样是可以设置title的，审查元素以及浏览器标签页都是新设置的title，但是查看网页源代码，title还是nuxtConfig文件里配置的。这样是不行的。
解决办法：config文件里不要写固定的，用模板，然后在需要设置title的页面使用<Title标签，会自动识别放到head里

export default defineNuxtConfig({
    
    
  app: {
    
    
    head: {
    
    
      // title: '我是title',   //  这样不行，不能固定写死了
      titleTemplate: '%s',  // 用模板，具体参考官网
      meta: [
        {
    
     charset: 'utf-8' },
        {
    
     name: 'renderer', content: 'webkit', 'data-n-head': true },
        {
    
     'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1' },
        {
    
     name: 'keywords', content: "xxx" },
        {
    
     name: 'description', content: "xxx" },
      ],
      link: [
        {
    
     rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ],
      script: [
        {
    
     src: 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js' }
      ]
    }
  }
// 在vue文件里使用<Title>
<template>
	<div class="about-page">
		<Title>{
    
    {
    
     obj.name}}</Title>    // 就是这个title
		<div>我与我们，暴富，暴富，暴富</div>
	</div>
</template>
<script lang="ts" setup >
  // useHead
 const getData = async () => {
    
    
	const {
    
     data } = await getInfo({
    
    id: id.value})
 	useHead({
    
    
      title: `${
      
      data.name}的页面`,
      meta: [
        {
    
     property: 'og:title', content: `${
      
      data.name}` }
      ],
    })
}

</script>

记得title标签也要放在根标签里哦，一个vue文件只能有一个根