文章详情 - 宏推科技

最近的项目都是使用vue3 为了坚持vue3的道路，选择了入坑nuxt3

前言

作为入坑nuxt3的新人希望和大家一起分享和学习. 以下是我在开发中碰到以及已解决的seo优化问题。页面的meta设置对于SEO优化非常重要；为了搜索引擎对关键词的收录，需要针对每个页面设置不同的keywords。

一、nuxt3创建项目

首先可以先跟着官网创建项目，做一些简单的配置和完成页面渲染：

New Image

nuxt3官网地址：Nuxt 3 - The Hybrid Vue FrameworkBuild your next application with Vue 3 and experience hybrid rendering, with an improved directory structure and new features Nuxt 3 is an open source framework making web development simple and powerful.https://v3.nuxtjs.org/

二、配置meta

1.全局配置meta

找到项目中的 nuxt.config.ts 代码如下：


import { defineNuxtConfig } from ''nuxt''
 
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: [''@nuxt/content''],
  meta: {
    title: ''1039'',
    meta: [
      { name: ''viewport'', content: ''width=device-width, initial-scale=1'' },
      { hid: ''keywords'', name: ''keywords'', content: ''前端, keywords'' }
    ],
   }
})

页面1效果：

New Image

页面2效果：

New Image

此时可以看到所有的页面meta中的关键词都相同。

2.动态配置每个页面的mate

页面1代码如下：


<script lang="ts" setup>
  useHead({
    title: ''index'',
    meta: [
      { hid: ''keywords'', name: ''keywords'', content: ''外贸, index'' }
    ]
  })
</script>

页面1效果：

New Image

页面2代码如下：


<script lang="ts" setup>
  useHead({
    title:''one'',
    meta: [
      { hid: ''keywords'', name: ''keywords'', content: ''前端, keywords'' }
    ]
  })
</script>