Nuxt 加入JSON-LD 結構化資料

"addressRegion": "台灣", "addressCountry": "TW" } }, "webpage": { "@context": "http://schema.org", "@id": "公司網址/#webpage", 0%前言一切都是為了站上搜尋排行榜的龍頭，反正SEO的前言已經懶的想了@@參考資料:google說明schema.org:共用詞彙庫StructuredDataTestingTool:測試網頁結構安裝套件nuxt-jsonld1npminstallnuxt-jsonld在plugins底下新增一個jsonld.js檔案，並引入套件1234importVuefrom'vue';importNuxtJsonldfrom'nuxt-jsonld';Vue.use(NuxtJsonld);配置設定檔在nuxt.conig.js的plugins加入上一步建立的jsonld.js檔12345678exportdefault{plugins:[{src:'@/plugins/jsonld.js',ssr:true,},],}新增JSON-LD檔案在static中建立jsonld.json內容要搭配schema.org來寫，看個幾遍就應該可以知道該怎麼撰寫網站的JSON-LD囉!!參考範例:12345678910111213141516171819202122232425262728293031323334353637383940414243444546{"organization":{"@context":"http://schema.org","@id":"公司網址/#organization","@type":"Organization","name":"公司名稱","description":"公司描述","url":"公司網址","contactPoint":[{"@type":"ContactPoint","telephone":"+886-02-xxxx-xxxx","areaServed":"TW","contactType":"CustomerService","availableLanguage":"Chinese"}],"address":{"@type":"PostalAddress","streetAddress":"公司地址","addressLocality":"台北市xx區","addressRegion":"台灣","addressCountry":"TW"}},"webpage":{"@context":"http://schema.org","@id":"公司網址/#webpage","@type":"WebPage","name":"頁面名稱","description":"頁面敘述","url":"網址","publisher":{"@type":"Organization","name":"xxx公司"}},"website":{"@context":"http://schema.org","@id":"公司網址/#website","@type":"WebSite","name":"頁面名稱","description":"頁面敘述","url":"公司網址"}}各頁面引入在.vue檔中importjsonLd註:eslint可能會報錯，把rules加入'import/no-unresolved':'off'就可以解決囉，雖然不是很優雅。

使用asyncData取出JSONLD資料，必須是return物件喔。

使用jsonld(){}來製作該頁專屬的JSONLD資料，ex:產品詳細頁的麵包屑就需要這麼做，這邊要return陣列，才不會結構出錯。

測試執行npmrundev後，檢視原始碼就可以看到以下畫面囉!!也可以將JSONLD的script段落複製下來，貼到StructuredDataTestingTool，就可以看到結構是否有誤或是缺少一些屬性囉!!文章目錄本站概要1.前言2.安裝套件3.配置設定檔4.新增JSON-LD檔案5.各頁面引入6.測試CloudFrontEndEngineer152文章17分類39標籤GitHubE-Mail友情連結Ray'sBlog