页面增加<meta>标签,方便被爬虫搜索,网站埋点,加入百度网站统计功能

很多页面都会加meta标签,方便被搜索引擎爬虫搜索(动态显示)请看代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="all"/>
    <link rel="icon" href="./favicon.ico">
    <title>写自己得网站名称</title>
    <!-- 百度统计代码 -->
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?da17cf5c03ad62a9788dbd263bc7e7ae";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
  </head>
  <body>
    
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
<script src=""></script>

在想要展示的路径下写meta:
在这里插入图片描述

在router.js里面加路由导航守卫

/**
 * 页面埋点
 * trackPageView(用于发送某个指定URL的PV统计)
 * 语法:_hmt.push([’_trackPageview’, pageURL]);
 * 参数:pageURL : 指定要统计PV的页面URL( 必须是以"/"(斜杠)开头的相对路径)
 * 例:_hmt.push([’_trackPageview’, ‘/virtual/login’]);
*/
router.beforeEach((to, from, next) => {
    console.log('to',to)
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title
    }
    //修改页面中meta标签的keywords,description内容
    if(to.meta.content){
        let head = document.getElementsByTagName('head');
        let meta = document.createElement('meta');
        document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)
        document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
    }

    //页面埋点
    if (to.path) {
        _hmt.push(['_trackPageview', to.fullPath]);
    }
    next();
})

这样就可以了✌
在积累得路上渐行渐远…

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值