加强SEO的7种方案，以及Nuxt框架如何处理与实践-烟雨网

一. 个人看法

2022年的今天，SEO的概念，给人的感觉，貌似已经是一种“古老”的网络营销技术之一。

貌似很多大的企业，都已经放弃了SEO。然后中小企业，还是热衷于这玩意。

当然，对于一些无法大量烧钱去做广告和运营以及推广的中小企业，SEO仍然是一个有效的方案。只是流量的趋势，SEO的确逐渐被边缘化。就例如：

百度都有自己的内部排名，只要充钱，无需你做好seo，黑* 医院都能帮你置顶。
淘宝也有自己的直通车。只要充钱，别说adidas，就adisss都能冲量。
抖音，小红书也可以花钱买流量。人家压根都不需要seo。

所以，在笔者心中，SEO地位已经不再像当年那么高。

只是，只是我只是个程序员，谈什么战略，好好完成你的实现。

正好有SEO的需求，还是专注一下自己的职业，还是好好给自己汇总一下SEO的实现过程，基于nuxt的实践。

二. 文章内容

本章就不再分享nuxt框架的搭建。对nuxt不熟悉的，可以参考一下笔者年轻时写的：《Nuxt.js 从入门与分析，实践后的近万字总结》

本章主要分享如何利用nuxt完成seo。

三. 技术方案与实现

1）关键词, TKD

所谓的TKD，就是title，keywords，description三剑客，依然是SEO较强的比重。

例如掘金的TKD：

<title>稀土掘金</title>
<meta name="keywords" content="掘金,稀土,Vue.js,前端面试题,Kotlin,ReactNative,Python">
<meta name="description" content="掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。">

这个nuxt如实现：我们直接看代码：

如果是全局，我们可以再nuxt.config.js配置：

export default {

  ...,//其他配置
    
  head: {
    title: "稀土掘金",
    meta: [
     {
         name: "Keywords",
         content: "掘金,稀土,Vue.js,前端面试题,Kotlin,ReactNative,Python"
     },
     {
         name: "description",
         content: "掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。"
     }
    ]
  },
}

如果是页面，我们可以同样可以用head去声明，将会覆盖全局的声明。

有两点值得注意的是：

(1) 如果页面用到动态的数据，那就需要结合nuxt提供的asyncData声明周期去实现：

 export default {
       ...,//其他配置
       
       head() {
          return {
            title: this.head.title,
            meta: [
              {
                Keywords: this.head.keywords
              }
            ]
          };
        },
       async asyncData({ query }) {
         const title = "稀土掘金"
          return {
            head: {
              title: title,
              Keywords: "关键字"
            }
          };
        },  
 }

(2) 此时还要观察页面变化，完成动态的SEO，需借助watchQuery声明周期

watchQuery() {
  return {
    head: {
      title: `稀土掘金第二版`
    }
  };
},

2）简洁的短链接

有个小细节，URL太过冗余或者难以理解，不旦会影响用户的体验，也会影响SEO的推广。

这时候就有一个不成文的规矩，使用”短链接”来解决这个问题。

如果你经常打开一些网站，需要推广的那些。你会发现有一些链接，带着各类的不可理解的参数。

例如下方的中关村：
https://detail.zol.com.cn/vga/sapphire/500_s2235_s2465/

所谓的500_s2235_s2465，其实就是3个附带参数的缩写。

我们可以利用nuxt来实现转发。

首先nuxt框架是默认生成路由，此时我们需要自定义路由，则需要额外的配置：

新建routerConfig.js文件：

const path = require("path");
export default [
  {
    name: "list",
    path: "/list/:parameter?",
    component: path.resolve(__dirname, "../pages/list")
  }
]

在nuxt.config.js引入：

  router: {
    extendRoutes(routes, resolve) {
      routerConfig.forEach((item) => {
        routes.push(item);
      });
    }
  },

此时，我们就可以在对应的页面的asyncData生命周期，进行短链接切割：

  async asyncData({ params }) {
      // 此时的params.parameter，就是500_s2235_s2465。具体切割规则由页面去做决定。
  }）

3）超链接a标签

只能评价为，小小的a标签，有着大大的力量。日常的开发习惯，还是要把click事件逐步修改成a标签的习惯。

更有一些网站，连分页都是使用超链接（是的，看了一圈，各大成熟网站都没做，各种组件库都不支持，但公司的需求就是如此！）

这里分享一个a标签的细节：

(1) 超链接logo

没想到吧，以jd为例子的logo，都是使用a标签。这是一个提高网站权重的秘密武器。

(2) rel=”nofollow”

超链接的确就是增加链接比重的方式。然而不免网站中，有许多第三方，或者不重要的链接。那就要降低他们的比重。那就< a rel=”nofollow” />走起来了。

4）Html语义化

html的语义化，不仅可以让读者快速区分源码的位置，而且是可以提高SEO的比重的。

这里简单列举一下，常用的一些语义化标签：

此外，语义化也可以适当加一些属性来提高权重，如img的alt属性

5）网站数据服务端渲染

如今单页面架构的流行，解决不了的痛点，就是生成html输出。而nuxt活着next等框架，最大的优势，就是可以解决该问题。

直接来看jd的案例：

这里，我们只需要记住，哪里需要服务端渲染，就把数据在asyncData请求完return即可，此时nuxt将自动帮我们编译好再输出浏览器。

6）sitemap.xml地图

Sitemaps协议使网站能够告知搜索引擎网站中可供抓取的网址，以便于搜索引擎google等更方便地抓取网站。而sitemap.xml是遵守该协议的包含了一个网站所有链接的xml格式文件。

这里后续笔者可能会写一个cli，来动态生成。这里风险一个手工生成网站：https://www.xml-sitemaps.com/

7）获取更多的外链

看到这个，你是否想起有些的人博客，在掘金发一次，在github发一次，在csdn发一次等等。

然后分别在文章，指出。

这某种意义，就是获取到更多的外链。间距影响SEO。

结尾

还有其他加强SEO的方式，欢迎补充。

当然，最靠谱的，还是花点rmb。。

文章版权归作者所有，未经允许请勿转载。

THE END

资讯

加强SEO的7种方案，以及Nuxt框架如何处理与实践