# 第五章：技術 SEO
#### 基本技術知識，將幫助你根據搜尋引擎優化網站，並與開發者建立信賴。

###### tags: `SEO 初學者指南`

---

本文翻譯自：[TECHNICAL SEO:Basic technical knowledge will help you optimize your site for search engines and establish credibility with developers.
](https://moz.com/beginners-guide-to-seo/technical-seo)

---

現在，你已經在扎實的關鍵字研究基礎下，打造出有價值的內容。

因此，我們要確保不只使用者會閱讀內容，搜尋引擎同樣也需理解才行。

你不需要深度了解這些技術層面的概念，但掌握這些技術資產的用途，可以幫助你更有智慧地與開發者構通。

以開發者聽得懂的語言交談很重要，因為你將會需要他們，幫忙分擔一些優化項目。

如果你提出的要求對方聽不懂、無法了解其重要性，就無法執行優化項目。

當你與開發者之間建立信賴，你就可以擺脫各種繁文縟節，讓真正重要的工作順利完成。

---

#### 那個字是什麼意思？

閱讀時，在手邊準備好一本 SEO 字彙表，確保你能理解本章節，所有的新概念。

[查看第五章的定義](https://moz.com/beginners-guide-to-seo/seo-glossary#chapter5)

---

#### SEO 人員需要跨團隊合作，才會有效

若你想成功處理 SEO 帶來的挑戰，與自己的開發者，建立一個健康的關係很重要。

千萬不要等到技術問題，導致開發者需一同承受負面的後果，才開始建立聯繫。

相反的，我們應以避免相關問題為目標，以此相互合作並制定計畫。

如果你無法這麼做，它將在往日子花費你的時間與金錢。

---

如果你希望自己的網站架構，能滿足使用者與爬蟲需求。跨團隊互相幫助、了解 SEO 的技術優化方法非常重要。

因此，我們將此章節分成三個區況：

1. 網站如何運作
2. 搜尋引擎如何理解網站
3. 使用者如何與網站互動

由於網站的技術架構，對網站表現有巨大的影響。因此，網站相關人員，都應該理解這些準則。

同時，我們將本章節的內容，分享給工程師、文案、設計師等人員，也是個好主意。

這樣可以網站架構牽扯到的相關人員，都有一個基本共同認知。

---

#### 免費試用 Moz Pro

找到並修正讓你網站遠離 SERP 的關鍵技術。

免費試用 30 天 Moz Pro，了解為何這麼多行銷人員，信任我們的 SEO 工具！

[開始我的免費試用](https://moz.com/checkout/freetrial)

---

## 網站如何運作

如果搜尋引擎優化，是將網站優化成適合被搜尋到的過程，SEO 人員至少需要知道，他要優化的東西是什麼。

下面，我們描繪出一個「網站旅程」(website’s journey)，從網域名稱購買，到網頁在瀏覽器中被完整渲染。

在網站旅程中，其中一個重要的部分是關鍵渲染路徑。

它是瀏覽器將網站程式碼，轉換成一般可閱讀網頁的過程。

了解此步驟的重要性，在於它能幫助 SEO 人員理解以下幾點內容：

- 這個網頁組裝的步驟，會影響網頁的載入時間。

此外，時間長短會決定使用者是否願意停留在網站，它同時還是 Google 排名的因素之一。

- Google 會在「第二次通過」網頁時，才會渲染特定資源。

Google 會先查看無 JavaScript 版本的網頁。幾天或幾周後，他才會渲染 JS。

此意味著，當 SEO 重要的元素被放在 JavaScript 檔案中，它們可能不會被收錄。

假想網站載入的過程，是你上班通勤的路徑。

你在家中準備出發，帶好要拿去辦公室的東西，接著挑選從家到公司最快速的路徑。

若你只穿一邊的鞋子，挑選較遠的路程、在辦公室掉東掉西，並立刻跑回家拿另一雙鞋子，將會是非常愚蠢的事。

上述情況就是缺乏效率的網站，會做的事情。

本章節將會教你如何診斷，網戰潛在低效率的問題，以及你可以做什麼加以精簡，並對排名與使用者體驗產生積極的結果。

## 在網站可以使用前，它需要被設定完成。

1. 網域名稱已購買

網域名稱如 moz.com ，需要從網域名稱註冊商溝賣，例：GoDaddy 或 HostGator 等廠商。

這些註冊商，只負責管理網域名稱的留存。

2. 網域名稱已連至 ip 位置

若網域名稱沒有域名伺服器（DNS）的幫忙，網際網路無法了解如「moz.com」等文字意涵。

當識別一個網站，網際網路是使用 IP 標示其位置，它是由一系列數字組成。

但對於使用者來說，我們會希望使用如 moz.com 等名稱，因為它更容易讓人記得。

因此，我們需要使用 DNS，將人類可讀的名稱與機器可讀的數字，連接串連一起。

## 網站資料如何將從伺服器至瀏覽器

1. 使用者要求網域

現在，網域經由 DNS，已經與 IP 位置連在一起。

人們可以直接在瀏覽器輸入域名，或直接點擊網站的連結，即可對該網站發出資源請求。

2. 瀏覽器發出請求

此則對網頁的請求，促使瀏覽器發出 DNS 查詢請求，用以將網域名稱轉換成 IP 位置。

接著，瀏覽器再對伺服器發出請求，希望取得該網頁的程式碼，例如 HTML、CSS、JavaScript.

3. 伺服器傳送資源

一旦伺服器接收到網站請求，它就會寄送網站的檔案，讓搜尋者的瀏覽器重新組裝。

4. 瀏覽器重組頁面

瀏覽器現在從伺服器取得資源，但它仍需要將資源組裝妥當與渲染，使用者才能再瀏覽器查看內容。

當瀏覽器解析與組織這些網頁資源，它會創造一個檔案目標模型（DOM）。

DOM 就是當你點選右鍵按「檢查」時，會顯示在畫面上的額外資訊。（學習如何[在其他瀏覽器檢視元素](https://www.thoughtco.com/get-inspect-element-tool-for-browser-756549)）

5. 瀏覽器發出最後請求

瀏覽器只會在網頁所需的所有程式碼下載完成後，才會執行、顯示在畫面上。

因此，若瀏覽器需要其他額外程式碼，它將會對伺服器，發出額外的資源請求。

6. 網站出現在瀏覽器

在完成上述步驟後，你的網站就從程式碼，轉變（渲染）成使用者在瀏覽器可查看的內容。

---

### 告訴你的開發人員關於非同步

有時候你可以提供給開發人員的建議，是縮短重要渲染路徑。

當有些內容不需要呈現在網頁頭版時，我們可以藉由設定「非同步」腳本，用以加速網頁載入速度。

非同步會告訴 DOM，當它在獲取需呈現在網頁上互動腳本時，仍可以持續組裝網頁資源。

如果 DOM 每次獲取一個互動腳本時（稱為「渲染阻擋腳本」），都必須停止組裝網頁，它會造成實質上網站載入速度變慢。

這就好比你和朋友出去吃飯，每次對話到一半時，都必須中斷以進行點菜，並結束點菜後才能繼續談話。

藉由非同步的幫忙，即使你必須加點菜色，你還是能和你的朋友持續地聊天。

除了非同步功能外，你可能也能提供公司技術人員其他建議，幫助縮短重要渲染路徑。

例如移除不必要的腳本，像是舊有的網站追蹤碼。

---

現在你已經知道，一個網站是如何顯示在瀏覽器上。

我們接著要專注在網站是怎麼構成的。換句話說，網頁是使用哪些程式碼構成。

建構網頁最常見的三個程式語言，包含：

- HTML：網站在說什麼（標題、主體內容等等）
- CSS：網站看起來如何（顏色、字體等等）
- JavaScript：網站如何呈現（互動、動態效果等等）


此圖片是在 [JavaScipt & SEO：使你的機器人體驗到跟讀者相同](https://moz.com/blog/javascript-seo)，此文中，受到 Alexis Sanders 的範例啟發，

---

## HTML：網站在說什麼

HTML 是 HyperText Markup Language 的縮寫，它被作為網站的骨架。

網站元素如標題、段落、列點與內容，全部都是由 HTML 定義完成。

以下是一個範例網頁，以及它所對應的 HTML：


此圖是 [W3school.com](https://www.w3schools.com/) 網站的截圖，我們學習與練習 HTML、CSS、JavaScript 最喜歡的地方。

HTML 對 SEO 人員很重要，因為這是他們創造、調整任何網頁的技術本質。

雖然你的 CMS 系統不需要你創建任何 HTML 文件。（例如新增一個超連結，需要輸入「a href=""」語法）

但其實你每次針對網頁，新增內容、改變超連結文字等動作，就是在修改 HTML 檔案。

Google 會爬取這些 HTML 元素，用以決定你的檔案，與特定關鍵字的相關性。

換句話說，你的 HTML 填寫的內容，就會決定網頁要競爭怎樣的自然搜尋流量。

## CSS：網站看起來如何

CSS 是階層式樣式表（Cascading Style Sheets）簡寫，它使你的網頁採用特定字體、顏色與排版。

HTML 是用來創造內容而非裝飾內容，因此當 CSS 涉入其中， 它改變了遊戲規則。

透過 CSS，網頁不須在每個 HTML 頁面，都手動輸入程式碼，就可以被美化。

對於大型網站，更可以去除繁瑣的撰寫過程。

直到 2014 年，Google 的索引系統，開始像真正的瀏覽器，渲染網頁，而非純文字瀏覽器。

有一種黑帽 SEO 的方式，是利用 Google 舊有的檢索系統，將文字與連結，隱藏在 CSS 程式碼中，用以操作搜尋排名。

上述「隱藏文字與連結」的做法，就違反了 Google 品質指南。

若想滿足 SEO 的 CSS，應該特別注重以下幾點：

- 因為樣式指令碼，可以存在於外部樣式檔案（CSS 檔案），而非包含在網頁的 HTML 內。

它可以使你的網頁代碼量更少，檔案在傳送的尺寸也更小，促使網頁載入速度更快。

- 由於瀏覽器，仍需下載你的 CSS 檔案資源，因此壓縮那些檔案，可使你的網頁載入更快，畢竟網頁速度是排名指標之一。

- 讓你的網頁內容量更多，而非代碼量，可以使網頁內容更容易被索引。

## JavaScript：網站如何呈現

在早期的網際網路，網頁是由 HTML 建立。

伴隨著 CSS 出現後，網頁的內容開始有能力具備一些樣式。

最後，藉由程式語言 JavaScript 引入，現在網頁不只擁有架構與樣式，更具備動態元素。

JavaScript 提供了許多，創造非靜態網頁的機會。

當有人想要使用具備 JS 語法的網頁，使用者的瀏覽器，在接收到伺服器回傳 HTML 檔後，會針對該檔案執行 JS 語法，進而產生某些互動性。

你絕對看過 JavaScript 運作，只是不認識該語法而已。

這是因為 JavaScript 可以在網頁上做任何事情。

他可以創造一個彈出視窗，例如詢問訪客是否接受第三方資源（如廣告），展示在你的網頁上。

### 客戶端渲染 vs 伺服器端渲染

JavaScript 可以導致一些 SEO 問題，因為搜尋引擎並不會如人類訪客一般，以相同的方式查看此語言。

原因是因為客戶端與伺服器端，這兩者的渲染方式不同。

大多數的 JavaScript 是在客戶端的瀏覽器執行。

另一方面，伺服器端的渲染，則是檔案會在伺服器執行，並將完整渲染的檔案傳給瀏覽器。

這表示 SEO 一些重要的頁面元素如：文字、連結與標籤，將會加載在 JavaScript 上，而非單純提交 HTML 檔。

因此在 JavaScript 完整渲染前，將無法查看你的網頁程式碼，導致搜尋爬蟲無法讀取網頁內容。

Google 表示，只要你不阻擋 Googlebot 爬取你的 JavaScript 檔，他們普遍能夠如瀏覽器般，渲染並了解你的網頁。

意味著， Googlebot 應該能看到，與使用者相同的瀏覽器畫面。

然而，由於客戶端 JavaScript 的 「第二波檢索」，有些只有當 JavaScript 執行才會產生的特定元素，會使 Google 遺漏檢索。

此外，當 Googlebot 處理渲染的過程中，可能出現某些錯誤，導致 Google 無法了解，你的 JavaScript 包含的內容：

- 你阻擋 Googlebot 爬取 JavaScript 資源（例如我們在第二章學到的 robot.txt 檔）
- 你的伺服器無法處理，所有網站爬取的要求。
- 此 JavaScript 檔過於複雜、過於老舊，讓 Googlenot 難以理解。
- 在機器人爬完網頁前，Javascript 不會「延遲載入」網頁內容。

不用多說，雖然 JavaScript 為網頁設計開啟了許多可能性，但如果不小心，它同樣匯兌你的 SEO 造成一些嚴重後果。

幸好，這裡有一種方式，能查看 Google 是否能看到與使用者一樣的內容。

你可以使用 Google Search Console 的「網址檢查」工具，用來了解 Google 如何查看該網頁。

只需將你的頁面網址，貼到 GSC 搜尋欄：


從這裡，點擊「測試線上網址」。


在 Googlebot 爬取完成你的網址後，點擊「查看已測試的網頁」，以了解你的頁面如何被爬取與渲染。


點擊鄰近「HTML」旁的「螢幕截圖」按鈕，展現出 Google 如何在你的手機渲染。


從回傳畫面，你將會知道 Googlebot 如何查看你的網頁，並比對使用者(或你)可能看到的頁面。

點擊「更多資訊」鈕，Google 還會條列出一串資源，指出爬蟲無法從該網址相關檔案。

了解網站如何運作，會為我們接下來要討論的內容，奠定一個良好的基礎：技術優化以幫助 Google 更容易了解你的網站。

---

## 搜尋引擎如何理解網站

設想一個搜尋爬蟲掃描完，一篇 10,000 字如何烤蛋糕的文章。

它該如何認定此文的作者、食譜、食材或烘焙的步驟呢？

「[結構標記](https://schema.org/)」（schema markup）此時就會派上用場。

它允許你提供搜尋引擎，更多關於網頁內容的具體分類。

「結構」是一種組織、標記內容的方法，讓搜尋引擎更好了解，你的網頁內的特定元素。

此程式碼為你的數據提供架構，也就是「結構」通常被稱為「結構化資料」。

組織數據的過程，通常被稱為「標記」，因為你通常會透過組織代碼，標示你的內容

[JSON-LD](https://www.portent.com/blog/seo/json-ld-implementation-guide.htm) 是 Google's 偏好的結構標記（發布在 5/16），同時也是 Bing 支援的語法。

若想查看上千種可用結構標記語法的列表，造訪 [Schema.org](https://schema.org/)，或查看 [Google 開發者結構化資料簡介](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data)，以此取得，如何執行結構化資料的更多消息。

挑選最適合網頁的標記語法，並執行完結構化資料後，你可以使用 Google 的[結構化資料測試工具](https://developers.google.com/search/docs/advanced/structured-data)，測試你的成果。

為了幫助如 Googlebots 等爬蟲，了解特定片段的內容什麼。

結構標記同樣可以幫助你的網頁，在搜尋結果頁出現特別功能。

這些特別功能稱為「複合式摘要」，且你可能已經看過它們。

它們有：

- 新聞輪播
- 評論星數
- 站內搜尋框
- 食譜

記得，使用結構化資料，可能會幫助網站出現複合式摘要，但並非保證出現。

其他類型的複合式資料，將隨著增加更多結構化標記而出現。

最後，這裡提供一些，成功使用結構語法的建議：

- 你可以使用多種類型的結構式語法在同一頁。

然而，如果你標記其中一個元素，例如一個產品。

若同時有其他的產品條列在此頁面上，你也必須標註這些產品。

- 不要標註無法給使用者查看的內容，並遵循 [Google 的品質指南](https://developers.google.com/search/docs/advanced/guidelines/webmaster-guidelines?hl=en&visit_id=637787572013990380-819009884&rd=1)

舉例來說，如果你增加評論結構標籤在網頁上，確保這些評論真的可以在網頁上查看。

- 如果你擁有重複頁面，Google 會要求你替每個重複頁面都加上結構標記，不能只有原始版增添。

- 結構標籤應該正確的反應你的網頁。

- 試著為你的內容，使用最精準的結構標籤標記。

- 標記化的評論，不應該是付費請人撰寫。

它們應該由未收費的真實使用者撰寫。

## 藉由規範，告訴搜尋引擎哪個是你首選頁面

當 Google 在不同的網頁爬取到相同的內容，它有時候會不知道，該檢索哪個頁面到搜尋結果頁上。

這就是為什麼「rel="canonical"」標籤被發明的原因：用來幫助搜尋引擎，更容易檢索首選版本的內容，而非所有重複頁面。

「rel="canonical"」讓你能告訴搜尋引擎，原始、主要的內容位於網站哪裡。

換句話說，你在說：「嘿，搜尋引擎！不要檢索那個頁面，而是要檢索這個資源頁面。」

因此，如果你想要重新發布一個內容，不論是微調或改版，都可以使用 canonical 標籤，讓你不用冒著被判定重複內容的風險。


適當的規範化，確保網站中的每個獨一無二內容，都只有一個網址。

Google 建議你的網站中，每個網頁中要擁有一個自我參照的 canonical 標籤。

若沒有藉由該標籤，告訴 Google 哪個網頁是你的首選。

- https://www.example.com
- https://example.com

同一個網站，可能就會因網址不同被判定重複內容。

「避免重複內容」是一個網際網路的真理，並有著非常好的道理！

Google 希望獎賞擁有獨特、有價值內容的網站，而非拿取別人資源並重複貼上在不同網頁的網站。

由於搜尋引擎希望提供最佳的搜尋者體驗，他們減少顯示相同內容的網頁，只顯示規範化後的唯一版本。

如果網頁沒有 canonical 標籤不存在，它將自己判定哪個網頁，最有可能是原始內容。

---

### 區分內容過濾與內容懲罰的差異

沒有一種東西叫重複內容懲罰。

但是，你應該盡可能藉著使用「rel="canonical"」標籤，避免重複內容被檢索。

當重複內容的頁面存在，Google 將選擇有 canonical 標籤的文章，並將其他內容從搜尋結果頁過濾。

這並不表示你已經被懲罰，只是意味著 Google 只想要顯示，你其中一個版本的內容。

---

由於排序與過濾的功能，許多網站常會有多個重複內容頁面。

例如，在一個店商網站，你可能擁有一個多面向導覽功能，讓使用者限縮產品選項，用以精準找到他們想要的東西。

像是「排序方式」功能，將產品的搜尋結果頁面，將價格由低到高重新排序。

此功能會讓網址看起來如此：example.com/mens-shirts?sort=price_ascending

試想再增添更多排序、篩選器功能如：顏色、尺寸、材質、品牌等等，這將會在你的產品分類頁，產生多少不同的網址。

若想了解更多不同形式的重複內容，這則由[皮特博士撰寫的文章](https://moz.com/blog/duplicate-content-in-a-post-panda-world)，能幫助你從中提煉出不同的細微差異。

---

#### 藉由 Moz Pro ，確保你的網站技術架構健全

Moz Pro 會自動爬取你的網站，並在情況失控前，提前通知你最新消息與重大問題回復。

從重複內容到 caononicals 標籤，再到 404 錯誤網址以及更多，Moz Pro 更快找到重要關鍵。

試一試並親自見證：

[開始我的免費試用](https://moz.com/checkout/freetrial)

---

## 使用者如何與網站互動

在第一章，儘管我們說到 SEO 代表搜尋引擎優化，但 SE0 與使用者的關係，和搜尋引擎同樣重要。

這是因為，搜尋引擎是為了服務搜尋者而存在。

這個目標幫助我們解釋，為什麼 Google 的演算法會獎勵那些，提供最好使用者體驗的網站。

以及，為何有些網站儘管擁有，高品質強大的反向連結檔案，卻可能在搜尋結果頁表現不佳。

當我們了解，什麼內容使他們的網站瀏覽體驗，達到最佳狀態後，我們就可以試圖創造相關內容，用以最大化搜尋效能。

---

## 確保手機使用者有良好的體驗

現今，有超過一半以上的網站流量來自手機，可以保證的說：你的網站應該讓手機訪客，能夠無障礙並輕易的瀏覽。

在 2015 年 4 月，Google 推出一項演算法更新，使手機友善的頁面更容易受到推廣。

因此，你該如何確保你的網站是行動裝置友善？

雖然下方列出了三個主要方式，作為手機版網站的配置，你仍然可以參考，[Google 建議的響應式網站設計](https://developers.google.com/search/mobile-sites/mobile-seo/)

### 響應式設計

響應式網站是用來滿足，使用者各式各樣螢幕尺寸。你可以使用 CSS 讓網頁「回應」裝置的尺寸。

此設計非常理想的原因，在於它讓使用者不需要雙擊、縮放，才能查看網頁的內容。

不確定你的網頁是否行動裝置友善？你可以使用 Google 的[行動裝置相容性測試](https://search.google.com/test/mobile-friendly)查看。

### AMP

AMP 是手機加速頁面（Accelerated Mobile Pages）的縮寫。

若使用它傳遞網頁內容給手機使用者，將比「非 AMP」網頁的傳遞速度快上許多。

原因在於，它傳遞的內容源於站存它的伺服器（非原始網站），以及使用一種 AMP 版本的 HTML 與 JavaScript。

[了解更多 AMP 相關內容](https://amp.dev/about/how-amp-works/?referrer=ampproject.org)

### 行動內容優先索引

自 2018 年起，Google 開始轉為索引行動優先的網站。

這個改變在「行動優先」與「行動友善」兩者間，引起一些疑惑。

因此，消除此疑問將很有幫助。

藉由行動優先索引，Google 會檢索與爬取你的網站的手機版本，確保你的網站與手機螢幕相容。

這將會對使用者與搜尋成效，相當有幫助。

[但「行動優先索引」與「行動友善」並不相同。](https://www.ctkpro.com/blog/mobile-first-versus-rwd/)


這項改變，會使一些缺乏手機、平板版本的網站，產生擔憂。

例如手機板的網站，會提供不同的內容、選單、連結等等。

當手機網站有不同的連結，將會使 Google 爬蟲以爬取那些連結，並傳送連結權重給你的其他頁面。

## 提高網頁速度減少訪客失落感

Google 希望提供給搜尋者，載入輕量快速的內容。

使用者已經預期會有載入快速的結果，因此當網頁沒有達到要求，我們將快速返回 SERP 頁，尋找更好、更快的網頁。

這就是為什麼網頁速度，是網站內部 SEO 的重要環節。

我們可以利用下方提到的工具，改善網站的速度。

點擊連結以查看更詳細的資料。

- [Google 網頁速度洞察工具](https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect) & [最佳實踐檔案](https://developers.google.com/speed/docs/insights/rules)
- [如何思考網頁速度工具](https://developers.google.com/web/fundamentals/performance/speed-tools/)
- [GTMetreix](https://gtmetrix.com/)
- [Google 的手機網站速度與表現測試](https://www.thinkwithgoogle.com/feature/testmysite/)
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse/)
- [Chrome DevTools](https://developer.chrome.com/docs/devtools/) & [Tutorial](https://developer.chrome.com/docs/devtools/speed/get-started/)

## 圖片是拖慢網站速度的罪魁禍首

如同第四章討論的內容，照片是拖慢網頁仔入的第一大原因之一。

除了壓縮圖片，優化照片 alt 文字、選擇正確的圖片格式、提將圖片網站地圖，還有其他改善圖片傳送速度的優化方式。

以下為一些主要的方法：

### 1. SRCSET：如何傳送最佳家的圖片尺寸給每個裝置

SRCSET 屬性讓你的圖片，能夠擁有多個版本的尺寸，並套用在不同情況下。

這個程式碼片段可以增添在 <img> 標籤中（圖片在 HTML 放置的程式碼） ，提供客製化的圖片的個別裝置。

這就是我們先前討論的響應式設計，特別針對圖片！

此方法不只加速網頁載入時間。它藉由在不同的裝置類型，提供最適當的照片。

讓你的網站，能提供更好的使用者體驗。


---

#### 網頁圖片不僅僅只有三種圖片尺寸！

有一種常見的錯誤理解，是你網站圖片只需要一個桌機、平板與手機的尺寸。

其實還有非常多的螢幕尺寸與解析度。

[了解更多關於 SRCSET](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images#enhance_imgs_with_srcset_for_high_dpi_devices)

---

### 2. 延遲載入圖片給網頁訪客

延遲載入是當你到達某個網頁時，你將不會看到原圖所在位置的空白區塊，反而是一張模糊清亮版本的圖片。

或是當周圍文字載入時，會有上色的色塊預先顯示在那裏。

幾秒後，清楚的圖片就會取代模糊版本。

熱門的部落格平台 Medium 在這方面，就做得非常不錯。

低解析度的版本先被載入，接著才是高解析度版本。

此外，這同樣也能幫助你優化「重要渲染路徑」。

當你頁面上的所有資源正在載入時，你會顯示一個低解析度預告圖片，告訴使用者相關內容載入中。

想了解更多關於延遲仔入的資訊，查看 [Google 的延遲載入指南](https://web.dev/fast/#lazy-load-images-and-video)

## 透過壓縮與打包你的檔案，改善網站速度

網頁速度查核工具，經常會提出以下建議：「最小化資源」。但它到底是什麼意思？

它是指，藉由斷行符號與空格，壓縮程式碼的檔案，或是盡可能簡寫程式碼變數的名稱。

「打包」則是另一個你在改善網頁速度時，可能常常聽見的另一個詞。

打包的流程，是將一堆相同程式語言的檔案，變成單一檔案。

例如，一堆 JavaScript 檔案，可能會被放到一個更大的檔案中，為瀏覽器減少 JavaScript 檔案的總數量。

藉由壓縮與打包你的網頁檔案，你將提升網站的速度，並減少 HTTP 請求檔案的次數。

## 改善國外訪客的使用體驗

若網站的目標對象，是以多個國家的訪客為主，應該熟悉[國際 SEO ](https://moz.com/learn/seo/international-seo)的最佳作法，才能提供最相關的使用體驗。

如果沒有這些優化方式，國際訪客可能很難找到，你為了他們而製作的該國網站版本。

有兩種主要方式，可以讓網站走向國際化：

- 語言

瞄準多種語言訪客的網站，會被視為多語系網站。

這些網站應該增添一個名為 hreflang 的標籤，讓 Google 知道你的頁面有另一個語言的版本。

[了解更多 hreflang](https://moz.com/learn/seo/hreflang-tag)

- 國家

瞄準多國受眾的網站稱為多地區網站，它應該讓網址結構，容易被定位到使用者所處的特定國家。

其中需要技巧，包含使用一個國家代碼的最高域名（ccTLD），例如「ca」表示加拿大。

或是使用通用最高域名（ccTLD），搭配一個特定國家的子夾層，例如：example.com/ca

[了解更多特定語言環境的 URL](https://developers.google.com/search/docs/advanced/crawling/managing-multi-regional-sites?hl=en&visit_id=637805717912968198-3520631440&rd=1)

---

現在你已經研究、撰寫，並針對搜尋引擎與使用者體驗，優化你的網站架構。

下一個 SEO 的拼圖是很大一片：建立權重讓你的網頁在蒐鄩結果頁有高排名。

向前邁進，到第六章（建立連結 & 搭建權重）

---

此文由 [Britney Muller](https://moz.com/community/q/user/britneymuller) 與 Moz 員工撰寫