Nuxt.js 3.x 替網站增加 Sitemap 網站地圖

本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案

Sitemap 是一種用來提供網站資訊的檔案,記錄網站內的網頁、圖片等,主要功用為協助搜尋引擎快速了解我們的網頁

新網站上線後,雖然搜尋引擎爬蟲會自動讀取網站內容並收錄,不過當網站規模較大、架構較複雜、彼此間連結性較低,可能需要花較長的時間才能完整收錄,透過 Sitemap,直接告訴搜尋引擎網頁資訊,能有效加快網頁收錄的速度。

接下來說明如何在 Nuxt3 專案內加入 Sitemap 網站地圖:

套件安裝

安裝 Nuxt3 整合模組 nuxt-simple-sitemap,本篇搭配版本 v.3.3.2

npm i -D nuxt-simple-sitemap

nuxt.config 配置模組

// nuxt.config.js
export default defineNuxtConfig({
modules: [
'nuxt-simple-sitemap'
]
});

標準網址定義

Canonical URL(標準網址)定義對於 SEO 很重要,用來告訴搜尋引擎標準的網址,解決重複內容網頁問題(ex:www.example.com 以及 example.com

標準網址對 SEO 到底有多重要?這裡推薦一篇 文章

// nuxt.config.js
export default defineNuxtConfig({
site: {
url: 'http://example.com'
}
});

建立 Sitemap

假設專案 pages/ 頁面結構如下

pages/
|—— index.vue
|—— hello.vue
|—— about.vue
|—— user/
|—— [id].vue
|—— post/
|—— [id].vue

執行 nuxt dev 編譯後,瀏覽器輸入 http://localhost:3000/sitemap.xml,可以看到靜態路徑自動被加入 Sitemap

點選 /sitemap.xml?cancical,可以看到 URL 調整為前面定義的標準網址

自動加入的靜態頁預設沒有帶上 prioritychangefreq 參數,需在設定檔 defaults 加入

// nuxt.config.js
export default defineNuxtConfig({
sitemap: {
defaults: {
changefreq: 'daily',
priority: 0.8
}
}
});

sitemap configure 相關參數與預設值,請參考 官方文件


Sitemap 加入動態路徑

靜態路徑執行編譯時會自動產生,動態路徑則需要結合後端 API 取得

需先具備 Nuxt3 data fetching 相關觀念,可以參考 這篇文章

Step1:新增 _sitemap-urls.js

預設路徑結構如下:

server/
|—— api/
|—— _sitemap-urls.js

預設路徑為 server/api/_sitemap-urls.js,可以透過 dynamicUrlsApiEndpoint 參數調整路徑

// nuxt.config.js
export default defineNuxtConfig({
sitemap: {
dynamicUrlsApiEndpoint: '/_sitemap'
}
});

Step2:透過 API 取得動態路由

範例:

假設 API 如下

// server/api/users.js
export default defineEventHandler(() => {
return [ '/user/1', '/user/2' ];
});

server/api/_sitemap-urls.js 發出請求並回傳 URL 內容

Nuxt3 $fetch 方法,可以參考 這篇文章

// server/api/_sitemap-urls.js
export default defineEventHandler(async () => {
const [
users,
posts
] = await Promise.all([
$fetch('/api/users'),
$fetch('/api/posts')
]);
return [ ...users, ...posts ].map(url => {
return {
loc: url,
lastmod: new Date()
};
});
});

執行 nuxt dev 編譯後,可以看到動態路由也被加入 Sitemap


Sitemap 整合 I18n

搭配 Nuxt3 I18n 整合模組 @nuxtjs/i18n 開發,nuxt-simple-sitemap 會自動整合,產出各語系 sitemap 檔

@nuxtjs/i18n 套件安裝參考 這篇文章

範例:語系分為英文繁中

預設會產出一個 index sitemap(ex:sitemap_index.xml)作為各語系 sitemap 索引

點擊查看英文版 sitemap http://localhost:3000/en-sitemap.xml

如果想合併語系檔,將 sitemaps 設為 false 即可

// nuxt.config.js
export default defineNuxtConfig({
sitemap: {
sitemaps: false
}
});

看到這裡,或許有人會納悶為什麼 sitemap 缺少了重要的 hreflang 語系標籤,其實
hreflang 是存在的,上面看到的只是閱覽用的 XSL 檔,要查看原始的 sitemap.xml,請見下一段說明


調整 Sitemap UI

前面看到的 sitemap 只是方面我們閱覽用的 XSL 檔,搜尋引擎真實讀取到的 sitemap.xml 是沒有 CSS 樣式的檔案

查看原始 Sitemap

如果想確認原始 sitemap.xml,將 xsl 設為 false

// nuxt.config.js
export default defineNuxtConfig({
sitemap: {
xsl: false
}
});

sitemap 如果有 <xhtml:link /> 屬性,像是多國語系搭配 hreflang 標籤,瀏覽器畫面渲染會異常,如下圖所示。這只是瀏覽器渲染問題,並不影響 Sitemap 本身功能,搜尋引擎爬蟲一樣可以正常讀取,詳細說明可以參考 討論串

調整欄位顯示內容

透過 xslColumns 調整欄位

// nuxt.config.js
export default defineNuxtConfig({
sitemap: {
xslColumns: [
{ label: 'URL', width: '25%' }, // URL 欄位必填
{ label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
{ label: 'Change Frequency', select: 'sitemap:changefreq', width: '25%' },
{ label: 'Priority', select: 'sitemap:priority', width: '12.5%' },
{ label: 'Hreflangs', select: 'count(xhtml:link)', width: '12.5%' }
]
}
});

Hreflangs 屬性,必須要搭配 nuxt-simple-sitemap v3.3.2 以上版本才能使用

來看一下調整後的畫面


參考資源:

https://nuxtseo.com/
https://nuxt.com/docs/getting-started/deployment#selective-pre-rendering
https://stackblitz.com/edit/nuxt-starter-umyso3?file=nuxt.config.ts

Nuxt.js 3.x Assets vs Public 目錄-靜態資源管理 Nuxt.js 3.x Server API 整合 MongoDB 實作,邁向全端第一步

評論

廣告
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×