.nuxt 添加标题描述和关键词

最新推荐文章于 2025-01-07 17:26:00 发布

hqjuic16

最新推荐文章于 2025-01-07 17:26:00 发布

阅读量554

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_50678132/article/details/120435805

版权

本文介绍如何在Nuxt.js项目中实现SEO优化，包括动态设置页面标题、描述及关键词，以及集成百度统计代码的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.nuxt 添加标题描述和关键词

export default {
  //与data(){},同级
  head() {
    return {
      title: "标题", //需要动态添加标题可以直接赋值如:this.title
      meta: [
        {
          name: "keywords",
          hid: "newd",
          content: "关键字内容",
        },
        {
          name: "description",
          hid: "index",
          content: "当前页面简述内容",
        },
      ],
    };
  },
}

添加百度seo搜索

baidu.js 应该不是通用的，具体根据自己公司运营人员给的数据配置，以下只作参考

export default ({ app: { router }, store }) => {
  router.afterEach((to, from) => {
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?8b756456fcd5252b10b3e8e84fb43080";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
  })
}

nuxt.config.js

 head: {
    script: [
      {src: https://hm.baidu.com/hm.js?8b756456fcd5252b10b3e8e84fb43080}
    ]
  },
 //并把百度文件打包到静态文件下
  plugins: [
    {
      src: "./plugins/baidu.js",
      ssr: false
    },
  ],