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

梁小茹

于 2021-07-21 17:31:28 发布

阅读量724

点赞数

分类专栏： vue 文章标签：搜索引擎

本文链接：https://blog.csdn.net/weixin_46653486/article/details/118971408

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

很多页面都会加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
评论
页面增加＜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 na
复制链接

扫一扫

专栏目录