Nuxt3 实战 (十二):SEO 搜索引擎优化指南

简介: 这篇文章介绍了如何为Nuxt.js项目添加favicon图标和TDK(标题、描述、关键词),安装@nuxtjs/seo模块,以及如何设置Robots、Sitemap、OG Image、Schema.org、Experiments等。文章还提到了添加Google Analytics、Microsoft Clarity和Umami统计代码的方法。文章最后总结称,Nuxt.js 3集成了很多SEOModules,使开发者能够更加高效便捷地做好搜索引擎方面的优化。

添加 favicon 图标和 TDK(标题、描述、关键词)

  1. nuxt.config.ts 添加配置:
    export default defineNuxtConfig({
         
    app: {
         
     title:'Dream Site',
     meta: [
       {
          name: 'keywords', content: 'Nuxt.js,导航,网站' },
       {
          name: 'description', content: '致力于打造程序员的梦中情站' }
     ],
     link: [{
          rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],
     style: [],
     script: [],
     noscript: []
    }
    })
    
  2. 使用 useHead
    <script setup lang="ts">
    useHead({
          
    title:'Dream Site',
    link: [{
           rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],
    meta: [
      {
           name: 'keywords', content: 'Nuxt.js,导航,网站' },
      {
           name: 'description', content: '致力于打造程序员的梦中情站' }
    ]
    })
    </script>
    
  3. 使用 useSeoMeta 组合函数
    <script setup lang="ts">
    useSeoMeta({
          
    title: 'Dream Site',
    ogTitle: 'Dream Site',
    description: '致力于打造程序员的梦中情站',
    ogDescription: '致力于打造程序员的梦中情站',
    ogImage: 'https://example.com/image.png',
    twitterCard: 'summary_large_image',
    })
    </script>
    
  4. /pages/ 目录中可以使用 definePageMeta 来根据当前路由设置元数据
    <script setup lang="ts">
    definePageMeta({
          
    title: 'Dream Site'
    })
    </script>
    
  5. 动态标题
    <script setup lang="ts">
    useHead({
          
    // 作为字符串,
    // 其中`%s`会被标题替换
    titleTemplate: '%s - Dream Site',
    // ... 或者作为一个函数
    titleTemplate: (productCategory) => {
          
    return productCategory
      ? `${
            productCategory} - Dream Site`
      : 'Dream Site'
    }
    })
    </script>
    

官方文档:SEO和Meta

安装 @nuxtjs/seo 模块

我们需要安装 @nuxtjs/seo 插件,@nuxtjs/seo 是一个模块集合,它覆盖了搜索引擎中常用的模块:

具体使用方式:

  1. @nuxtjs/seo 插件:
    npx nuxi@latest module add seo
    
  2. nuxt.config.ts 中根据实际情况添加配置:
    export default defineNuxtConfig({
         
    // SEO 配置
    site: {
         
      url: 'https://dream-site.cn',
      name: 'Dream Site',
      description: '致力于打造程序员的梦中情站',
      defaultLocale: 'zh-cn',
      exclude: ['/admin/_components/**'], // 过滤不需要的 url
      cacheMaxAgeSeconds: 24 * 3600, // 缓存时间一天
      autoLastmod: true, // 自动检测每个 URL 的 lastmod 日期
    },
    routeRules: {
         
      // Don't add any /secret/** URLs to the sitemap.xml
      '/admin/_components/**': { robots: false },
    }
    })
    

现在你就能打开 sitemap.xmlrobots.txt 了,其他更加详细的配置可以参考官方文档:nuxt-seo

Robots

  1. 禁用网站索引
    export default defineNuxtConfig({
         
    site: {
          indexable: false }
    })
    
  2. 禁用页面索引
    <script lang="ts" setup>
    defineRouteRules({
          
    robots: false,
    })
    </script>
    
  3. 如果需要更精细的编程控制,可以使用 nuxt.config.ts 配置该模块
    export default defineNuxtConfig({
         
    robots: {
         
     disallow: ['/secret', '/admin'],
    }
    })
    

更加详细的配置可以参考官方文档:Robots

Sitemap

  1. 禁用 URL 模式的索引
    export default defineNuxtConfig({
         
    routeRules: {
         
    // Don't add any /secret/** URLs to the sitemap.xml
    '/secret/**': { robots: false },
    }
    })
    
  2. 对于所有其他情况,您可以使用 includeexclude 模块选项来过滤 url
    export default defineNuxtConfig({
         
    sitemap: {
         
    // exclude all URLs that start with /secret
    exclude: ['/secret/**'],
    // include all URLs that start with /public
    include: ['/public/**'],
    }
    })
    
  3. 设置 Lastmodchangefreqpriority

    <script setup>
    useSeoMeta({
          
    // will be inferred as the lastmod value in the sitemap
    articleModifiedTime: '2023-01-01'
    })
    
    defineRouteRules({
          
    sitemap: {
          
     changefreq: 'daily',
     priority: 0.3
    }
    })
    </script>
    
  4. 缓存时间

    export default defineNuxtConfig({
         
    sitemap: {
         
    cacheMaxAgeSeconds: 3600 // 1 hour
    }
    })
    
  5. 自定义样式

    export default defineNuxtConfig({
         
    sitemap: {
         
    xslColumns: [
      {
          label: 'URL', width: '50%' },
      {
          label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
      {
          label: 'Priority', select: 'sitemap:priority', width: '12.5%' },
      {
          label: 'Change Frequency', select: 'sitemap:changefreq', width: '12.5%' },
    ],
    },
    })
    

更加详细的配置可以参考官方文档:Sitemap

OG Image

  1. 使用可组合 defineOgImageComponent 来定义主页的 og:image
    <script lang="ts" setup>
    defineOgImageComponent('NuxtSeo')
    </script>
    
  2. 在浏览器中访问主页并打开 Nuxt DevTools (Shift + Alt + D)
    0cfab565q2w6en3x0lrwjn9wgpicott2.png

  3. 自定义模板

    <script lang="ts" setup>
    defineOgImageComponent('NuxtSeo', {
          
    title: 'Hello OG Image 👋',
    description: 'Look what at me in dark mode',
    theme: '#ff0000',
    colorMode: 'dark',
    })
    </script>
    

更加详细的配置可以参考官方文档:OG Image

Schema.org

  1. 配置默认值
    <script lang="ts" setup>
    useSchemaOrg([
    defineWebPage({
          
    name: 'My Page'
    }),
    defineWebSite({
          
    name: 'My Site'
    })
    ])
    </script>
    
  2. 如果你不想使用默认值
    export default defineNuxtConfig({
         
    schemaOrg: {
         
    default: false
    }
    })
    
  3. 设置身份类型
    export default defineNuxtConfig({
         
    schemaOrg: {
         
    identity: {
         
      type: 'Organization', // or 'Person'
      name: 'My Company',
      url: 'https://example.com',
      logo: 'https://example.com/logo.png'
    }
    }
    })
    
  4. 自定义节点
    <script lang="ts" setup>
    useSchemaOrg([
    {
          
    '@type': 'DefinedTerm',
    'name': 'Nuxt Schema.org',
    'description': 'Nuxt Schema.org is a Nuxt module for adding Schema.org to your Nuxt app.',
    'inDefinedTermSet': {
          
      '@type': 'DefinedTermSet',
      'name': 'Nuxt Modules',
    },
    }
    ])
    </script>
    

更加详细的配置可以参考官方文档:Schema.org

添加 Google Analytics 统计代码

  1. 安装 nuxt-gtag
    npx nuxi@latest module add gtag
    
  2. nuxt.config.ts 添加配置:

    export default defineNuxtConfig({
         
    modules: ['nuxt-gtag'],
    
    gtag: {
         
     id: 'G-XXXXXXXXXX'
    }
    })
    
  3. 或者在环境变量中添加 NUXT_PUBLIC_GTAG_ID
    NUXT_PUBLIC_GTAG_ID = G-XXXXXXXXXX
    

添加 Microsoft Clarity 统计代码

  1. 安装 nuxt-clarity-analytics
    pnpm add -D nuxt-clarity-analytics
    
  2. nuxt.config.ts 添加依赖:
    export default defineNuxtConfig({
         
    modules: [
     'nuxt-clarity-analytics'
    ]
    })
    
  3. 在环境变量中添加:
    MICROSOFT_CLARITY_ID = 'clarity ID'
    

添加 Umami 统计代码

  1. 安装 nuxt-umami
    pnpm add nuxt-umami
    
  2. nuxt.config.ts 添加配置:
    defineNuxtConfig({
         
    extends: ['github:ijkml/nuxt-umami']
    });
    
  3. app.config.ts 添加配置:
    export default defineAppConfig({
         
    umami: {
         
    id: '95653e90-7b8b-4541-b6de-ea5e544d8c2d',
    host: 'https://umami.baiwumm.com',
    useDirective: true,
    version: 2,
    domains: ['dream-site.cn'],
    ignoreLocalhost: true
    }
    });
    
  4. 跟踪事件

    <button v-umami="'Event-Name'">
    Event Button
    </button>
    
    <button v-umami="{name: 'Event-Name'}">
    as object
    </button>
    
    <button v-umami="{name: 'Event-Name', position: 'left', ...others}">
    with event details
    </button>
    

    详细文档:nuxt-umami

总结

Nuxt3 集成了很多 SEO Modules,使开发者能够更加高效便捷地做好搜索引擎方面的优化。

好了,这篇文章就到这了,希望对你有所帮助!

相关文章
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
1741 0
|
前端开发 应用服务中间件 网络安全
【Nuxt】Nuxt做官网要求适配PC&Mobile,我的解决方案
前言 项目终于进入了尾声,这段时间主要在忙公司官网的开发,前段时间我在忙另外一个项目的时候,官网这个项目就启动了,团队里的另外一个小伙伴居然用Vue-cli构建了一个项目去做官网,导致我很难李姐,所以我提出重构项目,由我主导开发,写篇文章记录一下项目信息以及部分关键点。
2152 0
|
应用服务中间件 nginx
Nuxt 获取当前域名
Nuxt 获取当前域名
|
存储 JavaScript 中间件
Nuxt3 实战 (一):初始化项目
这篇文章介绍了Nuxt框架的基本信息,包括什么是Nuxt以及Nuxt3的优点。文章还介绍了Nuxt3的一些特点,如服务端渲染和静态站点生成、模块化、文件系统路由等。此外,文章还提供了项目安装的步骤和目录结构。最后,文章提到了下一步计划,即配置 Eslint、Prettier、Husky、lint-staged、commitlit项目提交规范的过程。
366 3
Nuxt3 实战 (一):初始化项目
|
JavaScript 前端开发 搜索推荐
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
这篇文章介绍了作者使用Nuxt 4.0重构个性化站点导航网站的经历,阐述了Nuxt 4.0的新特性和优势,如更清晰的项目结构、更好的TypeScript体验、更快的CLI和开发速度等,并且分享了重构过程中的体验和项目完成效果。同时,作者还对比了Nuxt.js与Next.js两个框架的优劣,表达了自己对Nuxt.js的偏好。
180 0
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
Nuxt3 实战 (八):优雅的实现暗黑主题模式
这篇文章介绍了在Nuxt3中实现暗黑模式的过程。首先推荐使用color-mode库来轻易实现暗黑模式切换,并通过pnpm命令安装@nuxtjs/color-mode依赖。然后在nuxt.config.ts配置文件中注入依赖,并根据项目实际情况自定义配置。接着通过toggleDark函数实现切换动画,并在需要的地方加载组件<ColorMode/>,从而达到最终效果。
335 0
Nuxt3 实战 (八):优雅的实现暗黑主题模式
|
前端开发 JavaScript API
Nuxt3 实战 (十一):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Nuxt3框架中页面和布局的过渡效果设置方法,以及首屏加载动画的添加。通过配置nuxt.config.ts文件和添加CSS样式,可以实现页面过渡效果。同时,文章也提到了在页面中设置不同的过渡效果和为布局和页面同时设置过渡效果的方法。最后,文章以一个Github仓库链接和一个线上预览地址作为总结,表示遵循官方文档操作即可完成相关设置。
330 0
Nuxt3 实战 (十一):添加路由 Transition 过渡效果和 Loading 动画
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
446 0
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
安全 关系型数据库 API
Nuxt3 实战 (九):使用 Supabase 实现 Github 认证鉴权
这篇文章介绍了如何在Supabase中使用Github授权登录并实现用户身份验证。文章首先说明了Supabase采用postgresql的Row Level Security(RLS)机制来控制不同用户对数据表访问权限的重要性,然后详细介绍了配置Github OAuth Apps的过程,包括创建新的OAuth应用、填写项目信息、设置回调URL等步骤。接着,文章展示了在Nuxt3中实现登录界面的代码示例,最后总结了通过本教程可以学习到的技能,并预告了下一篇文章将介绍如何在Nuxt3中创建RESTful风格API并结合Supabase数据库完成CURD操作。
305 0
Nuxt3 实战 (九):使用 Supabase 实现 Github 认证鉴权
|
前端开发 程序员 项目管理
Nuxt3 实战 (二):配置 Eslint、Prettierrc、Husky等项目提交规范
这篇文章介绍了项目规范的重要性和如何配置一些工具来提高代码质量、团队协作、降低维护成本、提升软件可靠性和促进项目管理。工具介绍了Eslint和Prettier,并且提供了安装和配置的步骤。文章还提到了如何配置Husky和Commitlint来检查提交风格的规范性,并最后提到了需要使用 release-it 自动管理版本号和生成 CHANGELOG 的任务。
369 0
Nuxt3 实战 (二):配置 Eslint、Prettierrc、Husky等项目提交规范