做好 SEO，可以增強網站的自然搜尋排名，不同的頁面通常會有不同的 title、關鍵字，Nuxt 可以幫我們做到這件事。

Global Settings

設定整個網站的 SEO，在這裡你可以定義所有的 meta

nuxt.config.js

head: {
  title: "一文前端大小事",
  htmlAttrs: {
    lang: "en"
  },
  meta: [
    { charset: "utf-8" },
    { name: "viewport", content: "width=device-width, initial-scale=1" },
    {
      hid: "description",
      name: "description",
      content: "一起鑽研前端技術吧^^"
    },
    { name: "format-detection", content: "telephone=no" }
  ],
  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
},

Local Settings

要設定每頁的 SEO 也很簡單，只要把 head 搬去要設定的頁面就可以了
pages/about.vue

export default {
  head: {
    title: '關於我們',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: '關於我們的頁面',
      },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
};

如果要利用 data 的資料，改變 head 的內容，可以把 head 變成函式的方式 return

data() {
  return {
    title: "data的關於我們",
  };
},
head() {
  return {
    title: this.title,
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: "關於我們的頁面",
      },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  };
},

SSR 設定

Nuxt 的 SSR 預設是開啟，實際上 Nuxt 也可以開發 SPA 模式，打包時就只會輸出 Client 端的部分

nuxt.config.js

1
2
3

export default {
  ssr: false, // 關閉 SSR，使用 SPA 開發模式
};

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala Code

Nuxt 的 SEO 設定