Nuxt js 之所以被採用作為前端框架的選項之一,很大一部分就是為了讓搜尋引擎的爬蟲能夠認得網頁。這邊筆記下一些與 SEO 相關的設定項目,會從多頁共用的 global 設定到單一頁面的設定來提供處理辦法。
項目
共同設定 – Nuxt.config.js
若你是使用 Nuxt 的官方專案產生器的話,那會先行填有一些 head 的預設設定。除了utf-8, viewport 這類的值之外,你也可以放入 link 和 meta。為了共用性方便,一般會放 open graph ( og ) 的設定。
產生不同頁面的設定檔範本
這邊寫成一個可以供各個頁面共用的 generateCustomHeader 函式
個別頁面
利用 header() 可以直接呼叫函式,並取得 generateCustomHeader 的回傳值