VuePress 部落格之 SEO 優化（三）標題、連結優化

冴羽發表於2022-03-18
Vue優化

前言

在 《一篇帶你用 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 使用英文逗號分隔，中文逗號則會被認為是長句。

我們直接看一個百度百科詞條的設定：

image.png

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 的官方文件，我們知道：

image.png

VuePress 部落格預設的連結屬性是 noopener noreferrer，我們修改下 config.js，新增上 nofollow:

    
module.exports = {
  	markdown: {
      externalLinks: { target: '_blank', rel: 'nofollow noopener noreferrer' }
    }
}

我們再檢查下 DOM 元素，就會發現帶上了 nofollow 屬性：

image.png

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 頁面預設用的是騰訊公益：

image.png

如果你想關閉：

module.exports = {
  theme: 'reco',
  themeConfig: {
    noFoundPageByTencent: false
  }  
}

樣式會變成這樣：

image.png

如果你想要修改這裡的文案，可以直接在原始碼裡修改，目錄為 node_modules/vuepress-theme-reco/layouts/404.vue：

image.png

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」：

image.png

等待一段時間，就會生成一個報告：

image.png

我們可以檢視 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/

輸入地址後，就可以進行分析，會出現分數和優化建議：

image.png

系列文章

部落格搭建系列是我至今寫的唯一一個偏實戰的系列教程，預計 20 篇左右，講解如何使用 VuePress 搭建、優化部落格，並部署到 GitHub、Gitee、私有伺服器等平臺。本篇為第 29 篇，全系列文章地址：https://github.com/mqyqingfeng/Blog

微信：「mqyqingfeng」，加我進冴羽唯一的讀者群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章