天天看點

nuxt.js 設定meta标簽,動态設定title

全局設定meta在nuxt.config.js中

在nuxt.config.js配置檔案中,有個head屬性可以設定全局的title,content和keywords等屬性

nuxt.js 設定meta标簽,動态設定title

局部設定

設定某個單獨頁面的title和關鍵字等,首先要找到這個頁面的JS代碼有一個head()方法,同樣可以進行一些類似的設定:

<script>
  data() {
    return {
      title: this.$route.params.routers,
    };
  },
  head() {
    // 優化seo:動态設定title,keywords 和 description
    return {
      title: this.title,
      meta: [
        {
          name: "keywords",
          content:
            "淘寶,西瓜視訊,抖音,今日頭條,懂球帝,微信,微網誌",
        },
        // hid是一個唯一辨別
        {
            hid: 'description', name: 'names', content: '應用大全'
        },
      ],
    };
  },
};
</script>