nuxt下的seo处理

为什么SFC不利于SEO

如图直接访问SFC网站返回的html文档中是没有内容的，因为内容都是vue渲染的，搜索引擎无法获取内容。

下面是nuxt返回的

所以nuxt之所以有利于seo，是因为直接访问url是可以返回页面内容的，和元素html相比,nuxt直接请求链接相当于首屏渲染(整体)，在页面中点击链接则只进行路由切换（部分）。nuxt既保证了搜索引擎的优化，也保留了路由切换的效率。

seo

前端所需要处理技术方面的seo问题包括以下方面

• 页面title、keywords、description
• 页面内容
• 页面资源加title、alt
• 使用语义化标签h1、article、section

next3的处理方法

nuxt的seo语法特别灵活我只给出一部分，详情可点击链接

nuxt-seo

// nuxt.config.ts
export default defineNuxtConfig({
    // 页面路由
    pages: true,

    // app
    app: {
        // 网站标题、关键字、描述
        head: {
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
            meta: [
                { name:'keywords',content:'关键词1|关键词2|关键词3' },
                { name: 'description', content: '这里写网站的描述信息' }
            ],
        },
    },
})

// app.vue
// 网站导航模板
  useHead({
    titleTemplate: (titleChunk) => {
      return titleChunk ? `${titleChunk} - 网站标题` : '网站标题';
    }
  })

// /pages/about.vue
// 关于我们页面的标题
  useHead({
    title: "关于我们",
  })

设置后访问index时显示标题为网站标题访问/about时显示标题为关于我们-网站标题