H5页面在QQ和QQ空间内分享设置摘要和缩略图.webp


上一次也是分享过QQ分享网站地址显示自定义的缩略图标题和介绍


这次主要介绍H5页面在QQ和QQ空间内分享设置摘要和缩略图


H5页面在手机QQ和QQ空间内分享时,分享出去的只有链接,没有摘要和缩略图,使用微信的JS-SDK并没有得到想要的效果,后来查资料,看到有人通过给H5页面设置meta标签实现了这一功能;需要设置的meta标签如下:

<meta itemprop="name" content="网页标题">
<meta itemprop="description" content="网页描述">
<meta itemprop="image" content="缩略图">

后来自己尝试,发现这样确实可以达到想要的效果,可是问题是我的项目是基于vue-cli开发的,并且,我要分享的文章内容是动态获取的,这就需要动态的设置摘要和缩略图,后来,我找到了动态设置meta标签的方法;需要借助vue-mate来实现;具体步骤如下:

1.安装vue-mate

npm install vue-meta --save

2.在main.js引入

import Meta from 'vue-meta'
Vue.use(Meta)

3.为需要分享的页面meta

export default {
    metaInfo: {
      title: 'This is the test',
      meta: [
        { itemprop: 'name', content: this.shareTitle },
        { itemprop: 'image', content: this.shareImg },
        { name: 'description',itemprop:"description", content: this.shareDesc||this.shareUrl }
      ]
    }
}

另外,使用异步请求的信息设置mate时,可使用 metaInfo() 方法。

<template>
  <div>
    <h1>{{{ shareTitle }}}</h1>
  </div>
</template>
 
<script>
  export default {
    name: 'post',
    data () {
      return {
        shareTitle : '',
        shareImg :'',
        shareDesc: ''
      }
    },
    metaInfo () {
      return {
        meta: [
          { itemprop: 'name', content: this.shareTitle },
          { itemprop: 'image', content: this.shareImg },
          { name: 'description',itemprop:"description", content: this.shareDesc||this.shareUrl },
        ]
      }
  },
    created () {
      this.initData()
    },
    methods: {
      initData () {
        axios.get('some/url').then((resp) => {
          // 设置title时 metaInfo 会同时更新
          this.shareTitle = resp.title
          this.shareImg=resp.img;
          this.shareDesc= resp.decription
        })
      }
    }
  }
</script>
最后修改:2022 年 05 月 06 日
如果觉得我的文章对你有用,请随意赞赏