nuxt - 個性meta設置 seo

頁面的meta對于seo的設置非常重要,默認的配置在nuxt.config.js ,不同的頁面一般都有不同的title和meta設置,個性化配置再去每個頁面直接加入head() 方法。

head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content:this.content }
      ]
    }
  }

!!!注意:為了避免子組件中的meta標簽不能正確覆蓋父組件中相同的標簽而產生重復的現象,建議利用 hid 鍵為meta標簽配一個唯一的標識編號。

相關配置詳細:
https://zh.nuxtjs.org/guide/views#html-%E5%A4%B4%E9%83%A8

https://zh.nuxtjs.org/api/pages-head/

https://zh.nuxtjs.org/faq/duplicated-meta-tags

https://github.com/declandewet/vue-meta#lists-of-tags

贊贊哇.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 基于Vue的一些資料 內容 UI組件 開發框架 實用庫 服務端 輔助工具 應用實例 Demo示例 element★...
    嘗了又嘗閱讀 1,175評論 0 1
  • Vue開源項目庫 Vue.js開源項目速查表:https://www.ctolib.com/cheatsheets...
    cctN閱讀 1,034評論 0 13
  • Vue相關網站參考: Vue中文幫助網站:http://cn.vuejs.org/ Vue github開源地址:...
    情話_2ee5閱讀 728評論 0 7
  • 一、簡介 像vue之類的框架都提供了一種動態改變頁面的內容,無需每次向服務端發送請求。當開始加載網站時,瀏覽器收到...
    Alvin_9d9c閱讀 6,410評論 0 7
  • 在我讀高中時,這書已經挺火的了,但那個時候的我顯然不會看這么高端的書,而且也沒有時間看這樣的書。 最近...
    再小的螢火蟲也發光閱讀 405評論 0 1