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,使开发者能够更加高效便捷地做好搜索引擎方面的优化。

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

相关文章
|
前端开发 搜索推荐 UED
前端需要注意哪些 SEO (详细)
前端需要注意哪些 SEO (详细)
|
搜索推荐 前端开发 JavaScript
前端SEO的知识,你get到了吗
seo是前端工程师需要掌握的一些知识,但是现在都是前后端分离开发,客户端渲染,而国内百度的搜索引擎又不太能打,因此,对这方面没怎么深入,后来因为学习了一些服务端渲染框架next/nuxt,才重新进行了一些了解
|
SEO
SEO笔记
SEO笔记
87 0
|
数据采集 JavaScript 前端开发
前端面试题Vue 项目如何进行 SEO 优化
前端面试题Vue 项目如何进行 SEO 优化
398 0
|
数据采集 网络协议 搜索推荐
|
JavaScript 搜索推荐 前端开发
VuePress 博客之 SEO 优化(二)重定向
本篇讲讲 SEO 与重定向。
214 0
VuePress 博客之 SEO 优化(二)重定向
|
搜索推荐 定位技术 SEO
SEO入门教程
大家口中的SEO(Search Engine Optimization),中文翻译为“搜索引擎优化”
378 0
SEO入门教程
|
搜索推荐 数据安全/隐私保护 SEO
关于SEO书籍的推荐,这六本SEO书籍值得入门选择
本篇不讲SEO、推广或运营,最近买了几本书看,推荐一下大家,感兴趣考虑是否选购。其实很多书都有电子版,但重庆SEO本身更喜欢纸质版,你呢? 第一本 《SEO实战密码》 版本:第三版 归属:SEO 作者:ZAC (昝辉)
511 0
|
搜索推荐 数据挖掘 SEO
说说我为什么要做SEO实战培训
今天大宝要给大家分享的主题是我为什么要做SEO实战培训,在17年的年底的时候,很多朋友就让我开培训,把自己的SEO经验分享给大家,因为自己当时还不太成熟,为了让自己的能力提升并最终能给大家带来更 丰富的SEO实战经验和更系统的知识,在接下来的一年中自己阅读了各种关于搜索引擎原理的书籍,并将了解到的理论以至于到现在深入研究排名规则和算法,并将了解到的理论知识一一付诸实战,在多种类型网站上进行 多种方式的实践。
1140 0