­

VuePress 博客之 SEO 優化（三）標題、鏈接優化

前言

在 《一篇帶你用 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 新手指南》：

簡潔網址易於傳達內容信息

為網站上的文檔創建描述準確的類別和文件名，不僅可以幫助您更好地組織網站，而且可以為希望鏈接到您的內容的用戶創建更簡單、易於使用的網址。如果網址極為冗長、含義模糊，並且包含很少的可識別字詞，訪問者可能會望而卻步。

下面的網址可能會造成困惑且不易於使用：
//www.brandonsbaseballcards.com/folder1/22447478/x2/14032015.html

如果您的網址有明確的含義，則該網址在不同上下文中都可能會更實用且更易於理解。
//www.brandonsbaseballcards.com/article/ten-rarest-baseball-cards.html

像我文檔的地址是：//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/(.*)$ //yayujs.com/$1 permanent;
    				alias /home/www/website/ts/;
        }
  			// ...
   }

此時你再訪問 //ts.yayujs.com/learn-typescript/handbook/EverydayType.html，就會跳轉到 //yayujs.com/handbook/EverydayType.html

5. 鏈接加上 nofollow

搜索引擎基本的 PageRank 算法，其基本假設是：更重要的頁面往往更多地被其他頁面引用。所以我們可以使用 nofollow 來告知 Google 不要跟蹤鏈接到的網頁，這樣就不會分走我們頁面的權重。

那為什麼會有 nofollow 這種方法存在呢？這也很好理解，就比如一些你在你的博客發表了一個垃圾網站的評論，為了提醒他人，加了這個網站的鏈接，你當然不希望這個網站因為你的聲譽而獲益。這時候就非常適合使用 nofollow。

使用 nofollow，我們只用在鏈接上加上 nofollow 屬性即可：

<a href="//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: //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

官網地址：//web.dev/measure/，你可以理解為網頁版的 Lighthouse，只用在網頁上輸出你的地址就行，背後還是用的 Lighthouse

10.3 Page Speed Insights

Google 提供的頁面速度測試工具，地址：//pagespeed.web.dev/

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

image.png

系列文章

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

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

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

Tags:

VirMach 便宜 VPS

QNews

QNews