vue框架做SEO优化方案

使用nuxt框架：仓库地址https://gitee.com/it-alien/nuxt-starter-v2

一、匹配路由要求：

 一级路由：https://xxxxx.com/k-j-g

二级路由：https://xxxxx.com/blog/k-j-g

二、代码实现：

blog页面跳转详情页面（item.keywords === /k-j-g）

godetail(item) {
      this.$router.push({
        path: `/blog/${item.keywords}`,
      });
   },

文件命名：_id

二、SEO之自定义页面源代码中的title、description、keywords

获取seo数据：

  async asyncData({ store, route }) {
    const params = {
      keywords: route.params?.id || route.params?.pages,
    };
    const res = await getNewdetailApi(params);
    return {
      textdetail: res.data,
      seokeydata: res.data?.seo?.keywords,
      seodisdata: res.data?.seo?.desc,
      seotitle: res.data?.seo?.title,
    };
  },

三、给按钮添加数据追踪，除了处理正常的流程外, 增加一个触发动作, 将数据发送给Google tag manager

btnClick(){
  //追踪代码
    if (dataLayer) {
        dataLayer.push({
          event: "add_to_cart",
          quantity: inNum, // 本次加购的产品数量
          name: item?.title, // 本次加购的产品标题
          price: item?.price, // 本次加入购物车的总价格
        });
      }
}

四、给页面添加link指向页面的url

​
  head() {
    const host = process.server
      ? this.$nuxt.context.req.headers.host
      : window.location.hostname;
    const protocol =
      process.server && this.$nuxt.context.req.headers["x-forwarded-proto"]
        ? this.$nuxt.context.req.headers["x-forwarded-proto"]
        : "http";
    return {
      title: "winofficekey",
      // hid是一个唯一标识
      meta: [{ name: "description", content: "Home" }],
      link: [
        {
          rel: "canonical",
          href: `${protocol}://${host}/`,
        },
      ],
    };
  },

​