Nuxt2项目实践——SEO

高台树色
545 阅读3分钟

在 Nuxt.js 项目中实践 SEO（搜索引擎优化）是非常重要的，因为 Nuxt.js 本身就是为了构建 SEO 友好的应用而设计的。以下是一些在 Nuxt.js 项目中实践 SEO 的关键步骤和技巧：

  1. 设置页面标题和 Meta 标签

利用 layout 与 vue-meta， 在路由中间件中获取seo信息，注意下架商品需要特殊处理

//layouts/default.vue
metaInfo() {
    return {
      title: `${this.$store.state.staticPage.configSeo?.commodityName || ''}${
        this.$store.state.staticPage.configSeo?.title || ''
      }`,
      meta: [
        {
          name: 'keywords',
          content: this.$store.state.staticPage.configSeo?.keywords || '',
        },
        {
          name: 'description',
          content: this.$store.state.staticPage.configSeo?.description || '',
        },
        { charset: 'utf-8' },
        {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no',
        },
        { name: 'format-detection', content: 'telephone=no' },
        { name: 'google-site-verification', content: 'xxxx' },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.$store.state.staticPage.configSeo?.canonical || this.$route.fullPath,
        },
      ],
    };
  },

  1. GTM

Google Tag Manager 可以帮助你更好地管理网站的跟踪代码和分析工具。

//plugins/gtm.js
export default function ({ app }) {
    if (process.client) {
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.charset = 'utf-8'
        script.async = true
        script.innerHTML = `xxxxx`
        document.head.appendChild(script)
    }
}

  1. PWA & Sitemap

PWA（渐进式网页应用）可以提升用户体验，并且对 SEO 也有帮助。

站点地图（Sitemap）有助于搜索引擎更好地索引你的网站。

//没上线 pwa功能不够完善 覆盖面小 sitemap不符合预期
export default {
  modules: [
    '@nuxtjs/pwa'，'@nuxtjs/sitemap'
  ],
  pwa: {
    manifest: {
      name: 'My Awesome App',
      lang: 'en',
    },
  },
}
export default {
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: 'https://yourwebsite.com', // 替换为你的网站域名
    routes: [
      '/page1',
      '/page2',
      // 其他路由
    ]
  },
}

  1. 语义化URL

语义化 URL（Semantic URL）是指使用有意义、易读且描述性强的 URL 结构，能够清晰地传达页面内容。语义化 URL 不仅对用户体验友好，还能显著提升 SEO 效果

假设 /mypage 需要优化成 /home/seo/mypage

  • 在nuxt工程中，pages/mypage/index.vue，会自动生成mypage路由，对于SEO Url需要利用别名，在路由中间件中，将/mypage重定向到 /home/seo/mypage（兼容重定向已配置已提供的旧链接）

    • {
      name: `${cur.name}`,
      path: `${cur.path}`,
      component: resolve(cur.component),
      alias: cur.alias,
 }
 // redirect

  • 动态路由配置的静态页面

  • 嵌套路由

  1. Image alt & a 标签 href

  • alt 属性是 HTML 中 <img> 标签的一个重要属性，用于描述图片的内容。它对 SEO 和用户体验都有重要作用：

    • SEO：帮助搜索引擎理解图片内容，提升图片在图片搜索中的排名。
    • 可访问性：为视觉障碍用户提供文字描述，方便屏幕阅读器读取。
    • 用户体验：当图片无法加载时，显示 alt 文本作为替代内容。

  • <a> 标签的 href 属性用于定义链接的目标地址。它对 SEO 和用户体验至关重要：

    • SEO：帮助搜索引擎爬虫发现和索引页面。
    • 用户体验：提供导航功能，方便用户跳转到其他页面。

  • 实现：公用components组件

//使用
<component :is="`ALabel`"  class="class" @click.stop="xxx">
{{ xxx }}
</component>
//定义   注意：没有href不渲染a标签，逻辑没贴
<a v-on="$listeners" v-bind="$attrs" :href="getHref()">
    <slot></slot>
</a>

  1. 404

404 页面是用户访问不存在的页面时显示的页面。正确处理 404 页面可以提升用户体验和 SEO：

  • 用户体验：友好的 404 页面可以减少用户流失。
  • SEO：避免搜索引擎索引无效页面，减少对网站排名的影响。
//1. 静态页面404会到 错误页面  layouts/error.vue
 async validate({ store, params, $ssrApi, error }) {
    return flag;
  }
//2. 单独的404页面
async asyncData({ res }) {
    try {
      res.statusCode = 404; // 定义404状态码，能被正确拦截
    } catch (e) {
      console.log(e);
    }
 },
 //3. 没有被匹配的404页面 router/index.js
 result.push({
    path: '/:pathMatch(.*)',
    component: resolve('pages/404.vue'),
    name: 'pages404',
  });

  1. SEO 检查工具

  2. 屏蔽SEO

  • 使用rel="nofollow"属性**

    这是最常见的方法之一，用于告诉搜索引擎不要跟随这个链接。这不会阻止链接在页面上显示，但会告诉搜索引擎不要传递权重（即不通过这个链接传递PageRank）：

    <a href="http://example.com" rel="nofollow">访问示例网站</a>

  • 使用meta标签阻止整个页面被索引**

    如果你希望整个页面不被搜索引擎索引，可以使用meta标签：

    <meta name="robots" content="noindex">

    这将阻止搜索引擎索引当前页面。

avatar
文章
阅读
粉丝