前言
在 《一篇帶你用 VuePress + Github Pages 搭建部落格》中，我們使用 VuePress 搭建了一個部落格，最終的效果檢視：TypeScript 中文文檔。
本篇講講 SEO 中的一些細節優化。
1. 設定全局的 title、description、keywords
// config.js
module.exports = {
title: "title",
description: 'description',
head: [
['meta', { name: 'keywords', content: 'keywords'}]
]
}
關于标題如何寫，參照老舊的 《百度搜尋引擎優化指南2.0》:
我們建議網頁标題可以這樣描述：
首頁：網站名稱 或者 網站名稱_提供服務介紹or産品介紹
頻道頁：頻道名稱_網站名稱
文章頁：文章title_頻道名稱_網站名稱
也可以參考這篇《百度搜尋網頁标題規範》裡的規範。
關于描述：
Meta description是對網頁内容的精練概括。如果description描述與網頁内容相符，百度會把description當做摘要的選擇目标之一，一個好的description會幫助使用者更友善的從搜尋結果中判斷你的網頁内容是否和需求相符。Meta description不是權值計算的參考因素，這個标簽存在與否不影響網頁權值，隻會用做搜尋結果摘要的一個選擇目标。
關于關鍵詞，注意 keywords 使用英文逗号分隔，中文逗号則會被認為是長句。
我們直接看一個百度百科詞條的設定：
2. 自定義頁面 title、description、keywords
通過 Front Matter 自定義：
---
title: title
description: description
meta:
- name: keywords
content: super duper SEO
---
3. 圖檔添加 alt 屬性
根據 Google 的新手 SEO 指南：
使用 alt 屬性
為圖檔提供說明性檔案名和 alt 屬性說明。alt 屬性使您能夠為圖檔指定替代文本，在圖檔由于某種原因不能顯示時起到救場的作用。
為什麼使用此屬性？如果使用者使用螢幕閱讀器等輔助技術檢視您的網站，則 alt 屬性的内容會提供關于照片的資訊。
另一個原因是，如果您将圖檔用作連結，則該圖檔的替代文本會等同于文字連結的定位文字。但是，如果文字連結可以起到相同的作用，我們建議不要在網站的導航中使用太多圖檔作為連結。最後，優化圖檔檔案名和替代文本可使圖檔搜尋項目（如 Google 圖檔）更好地了解您的圖檔。
4. 精簡 url
參照《百度搜尋引擎優化指南2.0》：
URL盡量短，長URL不僅不美觀，使用者還很難從中擷取額外有用的資訊。另一方面，短url還有助于減小頁面體積，加快網頁打開速度，提升使用者體驗。
參照 Google 搜尋中心的《SEO 新手指南》：
簡潔網址易于傳達内容資訊
為網站上的文檔建立描述準确的類别和檔案名，不僅可以幫助您更好地組織網站，而且可以為希望連結到您的内容的使用者建立更簡單、易于使用的網址。如果網址極為冗長、含義模糊，并且包含很少的可識别字詞，通路者可能會望而卻步。
下面的網址可能會造成困惑且不易于使用：
https://www.brandonsbaseballcards.com/folder1/22447478/x2/14032015.html
如果您的網址有明确的含義，則該網址在不同上下文中都可能會更實用且更易于了解。
https://www.brandonsbaseballcards.com/article/ten-rarest-baseball-cards.html
像我文檔的位址是：https://ts.yayujs.com/learn-typescript/handbook/TheBasics.html
其實其中的 learn-typescript 就是沒有必要的，之是以會有這個，是因為之前使用 GitHub Pages，這是我對應的 GitHub 的倉庫名，但如果是自己建站，其實就沒有必要寫這個了，我們直接修改 config.js 中的 base 配置：
module.exports = {
base: ''
}
但是如果你的位址已經對外發出去了呢？亦或者已經被收錄了，這個時候你可以通過 Nginx 的 301 重定向來實作：
server {
listen 443 ssl;
server_name ts.yayujs.com;
// ...
location ^~ /learn-typescript/ {
rewrite ^/learn-typescript/(.*)$ https://yayujs.com/$1 permanent;
alias /home/www/website/ts/;
}
// ...
}
此時你再通路 https://ts.yayujs.com/learn-typescript/handbook/EverydayType.html，就會跳轉到 https://yayujs.com/handbook/EverydayType.html
5. 連結加上 nofollow
搜尋引擎基本的 PageRank 算法，其基本假設是：更重要的頁面往往更多地被其他頁面引用。是以我們可以使用 nofollow 來告知 Google 不要跟蹤連結到的網頁，這樣就不會分走我們頁面的權重。
那為什麼會有 nofollow 這種方法存在呢？這也很好了解，就比如一些你在你的部落格發表了一個垃圾網站的評論，為了提醒他人，加了這個網站的連結，你當然不希望這個網站因為你的聲譽而獲益。這時候就非常适合使用 nofollow。
使用 nofollow，我們隻用在連結上加上 nofollow 屬性即可：
<a href="http://www.example.com" rel="nofollow">Anchor text here</a>
根據 VuePress 的官方文檔，我們知道：
VuePress 部落格預設的連結屬性是 noopener noreferrer，我們修改下 config.js，添加上 nofollow:
module.exports = {
markdown: {
externalLinks: { target: '_blank', rel: 'nofollow noopener noreferrer' }
}
}
我們再檢查下 DOM 元素，就會發現帶上了 nofollow 屬性：
6. 多頁文章
參考 Google 搜尋中心的“遵循抓取和索引編制最佳做法”：
多頁文章：如果您的文章分為幾個頁面，請確定有可供使用者點選的下一頁和上一頁連結，并且這些連結是可抓取的連結。您隻需這樣做，Google 就可以抓取這種網頁集。
這裡不需要我們特别做什麼，别覺得有了側邊欄，就把上下篇文章的連結幹掉就行。
7. robots.txt
robots.txt 檔案規定了搜尋引擎抓取工具可以通路你網站上的哪些網址， 此檔案主要用于避免網站收到過多請求。
但是要注意：robots.txt 不是一個好的阻止搜尋引擎抓取某個網頁的機制，假如 robots.txt 規定了某個檔案不應該被通路，但是否被執行，完全看搜尋引擎是否按照 robots.txt 的規範來執行，當然像 Google 等搜尋引擎會按照規範正規抓取，其他的搜尋引擎就不一定了。又比如網頁被其他公開的網頁引用了，仍可能會找到該網頁并收錄。
若要正确阻止網址出現在 Google 搜尋結果中，應該為伺服器上的檔案設定密碼保護、使用 noindex 元标記或響應标頭，或者徹底移除網頁。
對于我這樣一個允許完全通路的站點來說，更多的作用是告訴搜尋引擎我的 sitemap 位址。
由于 robots.txt 檔案應該位于網站的根目錄下，是以，我們可以直接在
.vupress/public
下建立一個 robots.txt 檔案，檔案内容寫入：
Sitemap: https://ts.yayujs.com/sitemap.xml
User-agent: *
具體 robots.txt 可以設定的字段可以參閱「建立 robots.txt 檔案」。
除了直接建立，也可以使用 vuepress-plugin-robots 插件，這裡就不多叙述了。
8. 404 頁面
參照 「搜尋引擎優化 (SEO) 新手指南」：
顯示實用的 404 頁面
使用者偶爾會因點選損壞的連結或輸入錯誤的網址而轉到您網站上不存在的網頁。使用自定義 404 頁面能夠有效引導使用者傳回到您網站上的正常網頁，進而大幅提升使用者的體驗。不妨考慮添加傳回根網頁的連結，并提供指向您網站上熱門内容或相關内容的連結。您可以使用 Google Search Console 找出導緻“未找到”錯誤的網址來源。
vuepress-theme-reco
這個主題的 404 頁面預設用的是騰訊公益：
如果你想關閉：
module.exports = {
theme: 'reco',
themeConfig: {
noFoundPageByTencent: false
}
}
樣式會變成這樣：
如果你想要修改這裡的文案，可以直接在源碼裡修改，目錄為
node_modules/vuepress-theme-reco/layouts/404.vue
：
9. 移動端設定
module.exports = {
head: [
['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
]
}
此标記可告知浏覽器如何在移動裝置上呈現網頁。該标記的存在可向 Google 表明該網頁适合移動裝置。
10. 測試與優化工具
10.1 Lighthouse
Google Lighthouse 是一種用于衡量網頁品質的開源自動化工具。它可以針對任何公共或要求身份驗證的網頁運作。Google Lighthouse 會對網頁的性能，可通路性和搜尋引擎優化進行稽核。它還包括測試漸進式 Web 應用程式是否符合标準和最佳實踐的功能。
我們安裝下 Lighthouse 擴充程式，然後在需要審查的網站上，點選 Lighthouse 插件，再點選「Generate report」：
等待一段時間，就會生成一個報告：
我們可以檢視 Performance、Accessibility、Best Practices、SEO、PWA 五個方面的分數和修改建議，根據這個建議進行調整，盡可能的優化就好了。
10.2 web.dev
官網位址：https://web.dev/measure/，你可以了解為網頁版的 Lighthouse，隻用在網頁上輸出你的位址就行，背後還是用的 Lighthouse
10.3 Page Speed Insights
Google 提供的頁面速度測試工具，位址：https://pagespeed.web.dev/
輸入位址後，就可以進行分析，會出現分數和優化建議：
系列文章
部落格搭建系列是我至今寫的唯一一個偏實戰的系列教程，預計 20 篇左右，講解如何使用 VuePress 搭建、優化部落格，并部署到 GitHub、Gitee、私有伺服器等平台。本篇為第 29 篇，全系列文章位址：https://github.com/mqyqingfeng/Blog
微信：「mqyqingfeng」，加我進冴羽唯一的讀者群。
如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。