聯繫我們

課程簡介

第 1 節:渲染策略

  • 問題: 為什麼 Googlebot 常無法「看到」JavaScript 內容。
  • 解決方案: 配置 nuxt.config.ts 以啟用混合渲染。我們將設定特定的路由規則(ISR 與 SWR),確保產品頁面以靜態 HTML 格式為機器人提供服務。
  • 成果: 透過 Curl 驗證的可爬取頁面原始碼。

第 2 節:元數據與可見性

  • 問題: 單頁應用 (SPA) 常為整個網站共用一個標題標籤。
  • 解決方案: 實施 useSeoMeta 和 useServerSeoMeta,以程式化方式生成動態標題、描述和規範化連結。
  • 社交媒體優化: 修復損壞的 Open Graph (OG) 標籤,使連結在 WhatsApp/LinkedIn 上顯示正確。

第 3 節:技術基礎與索引

  • 問題: 搜尋引擎無法找到的孤立頁面。
  • 解決方案: 安裝並配置 @nuxtjs/sitemap,為動態路由自動生成 XML 網站地圖。
  • 效能優化: 實施 <NuxtImg> 並定義明確的尺寸,以解決累計版面配置偏移 (CLS) 問題,並加快索引速度。

第 4 節:稽核、防護與水合

  • 深入探討: 除錯「水合不匹配」現象,這是影響 Nuxt 效能的第 1 大錯誤。
  • 專案稽核: 對已修復的項目運行實時 Lighthouse 稽核。
  • Schema.org: 注入 JSON-LD 結構化數據,以獲得「豐富摘要」(搜尋結果中的星級/評論)。

最低要求

  • 參與者必須具備 Vue.js 與 Nuxt 基礎知識。

受眾

  • 開發人員
 7 小時

客戶評論 (2)

課程分類