[筆記] Nuxt js 初探筆記 4 – SEO 相關的逐頁設定

Nuxt js 之所以被採用作為前端框架的選項之一,很大一部分就是為了讓搜尋引擎的爬蟲能夠認得網頁。這邊筆記下一些與 SEO 相關的設定項目,會從多頁共用的 global 設定到單一頁面的設定來提供處理辦法。

nuxt-js-logo


項目

共同設定 – Nuxt.config.js

若你是使用 Nuxt 的官方專案產生器的話,那會先行填有一些 head 的預設設定。除了utf-8, viewport 這類的值之外,你也可以放入 link 和 meta。為了共用性方便,一般會放 open graph ( og ) 的設定。

產生不同頁面的設定檔範本

這邊寫成一個可以供各個頁面共用的 generateCustomHeader 函式

個別頁面

利用 header() 可以直接呼叫函式,並取得 generateCustomHeader 的回傳值


程式碼

按讚加入粉絲團

延伸閱讀