為了幫助大家更好的了解技術層面SEO的知識，今天的內容主要分為3個部分

• 網站的工作原理是怎樣的，如何進行運作；
• 搜索引擎如何讀懂網站，需要注意的問題；
• 有哪些方法可以優化用戶和網站的互動體驗。

網站如何運作

如果搜索引擎優化是優化網站以便搜索的過程，那么SEO至少需要對他們正在優化的事物有基本的了解！

本節，小編和大家一起了解一下網站從域名購買到在瀏覽器中完全呈現的過程。網站運行的一個重要組成部分是關鍵的渲染路徑，即瀏覽器將網站的代碼轉換為可查看頁面的過程。

為什么了解這一點對于SEO很重要呢？

• 在網頁集成過程中，這些環節可能會影響頁面加載時間。速度不僅對于用戶在網站上停留很重要，而且也是Google的排名因素之一。
• Google會在“ 二次索引 ”中提交一些信息，例如JavaScript網站 。Google將首先查看沒有JavaScript代碼的頁面，過了幾天或幾周后，它將提交JavaScript頁面信息。因此，盡管把一些關鍵的SEO要素添加在JavaScript代碼的頁面，有可能不會被索引。

接下來，我們一起來聊聊如何診斷網站效率低的地方，以及如何通過優化來提升排名和用戶體驗。

1. 網站可訪問的必要條件

• 購買域名。目前購買域名的平臺有很多，如阿里云、三五互聯等?？梢宰约嘿徺I管理，也可以有服務商幫忙購買和管理。要注意的是，域名正常是每年都需要續費的，作為長期使用，建議一次多買幾年，以避免疏忽造成域名進入贖回期的麻煩。
• 域名鏈接到IP地址。沒有域名服務器（DNS）的幫助，互聯網無法將“xxx.com”之類的名稱理解為網站地址?；ヂ摼W使用一系列稱為互聯網協議（IP）地址的數字（例如：127.0.0.1）來標記網站地址，但我們更想使用諸如“xxx.com”之類的名稱，因為它們更容易讓人記住。我們需要使用DNS將那些人類可讀的名稱與機器可讀的數字鏈接起來。

2. 從服務器到瀏覽器的運作流程

S1 用戶請求域：域名通過DNS鏈接到IP地址后，用戶可以直接在瀏覽器中輸入域名或單擊網站鏈接來提交訪問請求。

S2 瀏覽器發出請求：對該網頁的請求提示瀏覽器發出DNS查找請求，以將域名轉換為其IP地址。然后，瀏覽器向服務器發出請求來獲取該頁面代碼，例如HTML，CSS和JavaScript。

S3 服務器發送資源：服務器接收到對網站的請求后，就會發送需要在用戶瀏覽器中匯編的網站文件。

S4 瀏覽器組裝網頁：雖然瀏覽器從服務器獲取了資源，但仍需將所有資源整合并轉換成網頁，以便用戶可以在瀏覽器中看到它。當瀏覽器解析并組織所有網頁資源時，它正在創建文檔對象模型（DOM）。在Chrome瀏覽器中的網頁上右擊并選擇“檢查網頁源代碼”（Ctrl+U或F12）時，就可以看到DOM 。

S5 瀏覽器發出最終請求：瀏覽器僅在下載，解析和執行所有頁面所需的代碼后才會顯示網頁，因此，如果瀏覽器此時需要任何其他代碼來顯示你的網站，就會向你的服務器追加請求。

S6 網站出現在瀏覽器中：最后，你的網站就會由代碼轉換為你在瀏覽器中看到的內容。

3. 3種常見的網站代碼

了解了網站是怎樣在瀏覽器中顯示的，接下來和小編一起了解一下網站是怎樣構成的吧。

網站的構成有3種常見的編程語言，即代碼。

T1. HTML -網站表達的內容（標題，正文內容等）

HTML代表超文本標記語言，并且它是網站的基礎。標題、段落、列表和內容等元素均在HTML中定義。

這是網頁的示例，其相應的HTML如下所示：

HTML對于SEO來說很重要，因為HTML是創建或處理的任何頁面的底層架構。盡管你的CMS（內容管理系統）可能不需要你用HTML編寫頁面（例如：選擇“超鏈接”時無需輸入“ a href =”即可創建鏈接），但這正是你在網頁上執行某些操作時需要修改的內容，例如添加內容，更改內鏈錨文本等。Google會抓取這些HTML元素，以確定你的文檔與特定查詢的相關性。換句話說，HTML內容對于網頁在Google自然搜索中的排名有著重要作用！

T2. CSS -網站的外觀（顏色，字體等）

CSS代表“層疊樣式表”，這就是網頁采用某些字體，顏色和布局的原因。創建HTML是為了描述內容，而不是為其設置樣式，因此，當CSS進入場景時，它將改變游戲規則。使用CSS，可以“美化”網頁，而無需將樣式手動編碼到每個頁面的HTML中，這是一個繁瑣的過程，特別是對于大型網站。

直到2014年，Google的索引系統才開始將網頁呈現為更像實際的瀏覽器，而不是純文本瀏覽器。試圖利用Google較舊的索引系統的黑帽SEO做法是通過CSS隱藏文本和鏈接，以優化搜索引擎排名。這種“ 隱藏的文字和鏈接 ”做法違反了Google的質量準則。

SEO尤其應注意的CSS要素：

• 由于樣式指令可以存在于外部樣式表文件（CSS文件）中，而不是頁面的HTML中，因此它減少了頁面代碼的負擔，從而減小了文件傳輸大小并縮短了加載時間。
• 瀏覽器仍然必須下載CSS文件之類的資源，所以壓縮它們可以使網頁加載更快，畢竟，頁面速度也是一項排名因素。
• 使頁面的內容比代碼更多，可以更好地索引網站內容。
• 使用CSS隱藏鏈接和內容會使網站受到人工懲罰，并從Google的索引中刪除。

T3. JavaScript -行為方式（交互式，動態等）

在互聯網早期，網頁是使用HTML構建的。當CSS出現時，網頁內容就可以調整一些樣式風格。當JavaScript編程語言出現時，網站現在不僅可以改變結構和樣式，而且可以是動態的。

JavaScript為非靜態網頁的創建帶來了很多機會。當人們嘗試訪問使用此編程語言增強的頁面時，該用戶的瀏覽器將針對服務器回傳的靜態HTML執行JavaScript，從而使該頁面具有某種交互性。

你一定在不知情的時候就已經看到了JavaScript的運作了！因為JavaScript幾乎可以對頁面執行任何操作。例如，它可以創建一個彈出窗口，也可以請求第三方資源（例如廣告）顯示在頁面上。

搜索引擎如何讀懂網站

1. 怎樣理解模式標記

舉個例子，當搜索引擎爬蟲正在掃描有關如何做蛋炒飯的文章時，你怎么確定作者，食譜，配料或步驟呢？這就是模式標記的用處。它可以幫助你為搜索引擎提供頁面上不同類型的信息的更具體的分類。

模式是一種標記或組織內容的方法，以便搜索引擎可以更好地了解網頁上的某些元素。這段代碼為你的數據提供了結構，這就是模式通常被稱為“結構化數據”的原因。數據結構化過程通常稱為“標記”，因為你正在使用組織代碼標記內容。

除了幫助Google之類的機器人了解特定內容的含義外，模式標記還可以使SERP中的頁面具有特殊功能。這些特殊功能被稱為“富文本摘要”，你可能已經在實際操作中看到了它們。

他們是類似于這樣的：

• 熱門故事輪播
• 星級評價
• 網站鏈接搜尋框
• 菜譜

請記住，使用結構化數據可以幫助顯示豐富的摘錄，但不能保證一定會有。隨著模式標記的使用增加，將來可能會出現其他類型的復合式摘要。

2. 關于架構成功的建議

• 可以在頁面上使用多種類型的模式標記。但是，如果你標記了一個產品之類的元素，并且頁面上列出了其他產品，則還必須標記這些產品。
• 請勿標記訪問者看不到的內容，并遵循Google的質量準則。例如，如果你將評論結構化標記添加到頁面，請確保這些評論在該頁面上是真實可見的。
• 如果你有重復的頁面，Google會要求你使用結構化標記標記每個重復頁面，而不只是規范版本。
• 在結構化數據的網頁上適當更新原創內容。
• 結構化標記應準確反映你的頁面。
• 嘗試對內容使用最詳細形式的模式標記。
• 標記的評論不應由企業撰寫，而應該來自客戶的真實反饋。

3. rel =“ canonical”標簽

當Google在不同的網頁上抓取相同的內容時，有時不知道要在搜索結果中索引哪個頁面。所以就發明了rel =“ canonical”標簽，從而幫助搜索引擎更好地索引內容的首選版本，而不是所有重復的內容。

rel =“ canonical”標簽可讓你告訴搜索引擎內容的原始版本在哪里，就是在告訴搜索引擎為源頁面編制索引，而不是其余重復內容頁面。 因此，使用此標簽可以有效避免我們在《谷歌SEO指南——頁面SEO7-3》中提到的內容重復的風險。

優化用戶和網站的互動體驗

早在《谷歌SEO指南—SEO原理解析7-1》中，我們說過，SEO既關乎人，也關乎搜索引擎本身。那是因為搜索引擎的存在就是服務于用戶的，這說明了為什么Google的算法會獎勵那些為用戶提供最佳體驗的網站，以及為什么一些網站盡管具有強大的反向鏈接配置文件等特質，但在搜索中的效果并不理想。

當我們了解了什么可以使網站達到最佳瀏覽體驗時，我們就可以從這些方向入手來實現最佳搜索效果。

1. 移動端優化

隨著時代發展，用戶的瀏覽習慣發生改變，移動端流量占比逐漸提升，因此可以肯定地說，通過移動端優化來提升用戶的瀏覽體驗是很有必要的。

針對于移動端優化，有3種常見的方法

T1 移動端自適應：就是網站可以自動適應任何類型設備的屏幕，而且域名和PC端保持一致，即主域名（通常是www.xxx.com）。自適應網站是目前比較主流的移動端優化方法。

T2 AMP加速技術：AMP代表“加速的移動頁面”，向移動端用戶傳遞內容的速度比非AMP傳遞要快得多。AMP之所以能夠如此快速地傳遞內容，是因為AMP從其緩存服務器（而不是原始站點）傳遞內容，并使用HTML和JavaScript的特殊AMP版本。要注意的是，AMP加速適用于安裝SSL證書的手機獨立站。

T3 移動優先索引：從2018年開始，谷歌開始將網站切換為移動優先索引。這種變化引發了移動友好性和移動優先之間的混淆，因此有助于消除歧義。通過移動優先索引，Google可以對網頁的移動版本進行爬網和索引。使網站與移動屏幕兼容對用戶和搜索性能都有好處，但是移動優先索引獨立于移動設備的友好性而發生。

對于缺乏移動版本和桌面版本之間的奇偶性的網站，例如在其移動視圖中顯示不同的內容，導航，鏈接等，這引起了一些擔憂。例如，具有不同鏈接的移動網站將改變Googlebot（移動設備）抓取您的網站并將鏈接資產發送到其他頁面的方式。

2. 圖像優化

在《谷歌SEO指南——頁面SEO 7-3》中提到，圖像是網頁加載緩慢的最大原因！除了圖像壓縮，選擇正確的圖像格式，添加Alt屬性外，還有其他技術方法可以優化圖像顯示。改善圖像傳遞的一些主要方法如下：

SRCSET：如何為每個設備提供最佳圖像尺寸

SRCSET屬性允許我們有圖像的多個版本，然后指定在不同情況下使用哪個版本。這段代碼被添加到<img>標簽（圖像在HTML中的位置），從而為不同型號的設備提供專門的圖像。

就像我們前面提到的移動端自適應的概念一樣，但是在操作上會有不同。

這不僅可以加快圖像加載時間，而且還是通過為不同的設備類型提供不同的最佳圖像來增強頁面用戶體驗的獨特方法。

壓縮和捆綁文件

頁面速度審核通常會提出諸如“減少資源”之類的建議，但這實際上意味著什么呢？通過刪除換行符和空格之類的內容來壓縮精簡代碼文件，并盡可能縮寫代碼變量名稱。

“捆綁”是你會聽到的另一個提高頁面速度的常用術語。捆綁就是將一堆相同的編碼語言文件組合為一個文件。例如，可以將一堆JavaScript文件放入一個更大的文件中，以減少瀏覽器中JavaScript文件的數量。

通過壓縮和捆綁構建網頁所需的文件，你可以加快網站速度并減少HTTP（文件）請求。

Tips：

• DNS：域名服務器（DNS）允許將域名（例如：“ moz.com”）鏈接到IP地址（例如：“ 127.0.0.1”）。DNS本質上將域名轉換為IP地址，以便瀏覽器可以加載頁面的資源。
• 編程語言：以計算機可以理解的方式編寫指令。例如，JavaScript是一種編程語言，可以向網頁添加動態（非靜態）元素。
• CSS：級聯樣式表（CSS）是使網站看起來具有某種外觀的代碼（例如：字體和顏色）。
• DOM：文檔對象模型（DOM）是HTML文檔的結構-它定義了如何通過JavaScript之類的東西來訪問和更改該文檔。
• CMS：Content Management System，是網站內容管理系統簡稱, 互聯網上每個網站后臺都是專業內容管理系統支撐，無論多大網站都不離開CMS的驅動。
• 富文本摘要：摘要是Google和其他搜索引擎在其結果頁上顯示的URL的標題和說明預覽。因此，“豐富”代碼段是標準代碼段的增強版本。通過使用結構化數據標記，可以鼓勵使用一些豐富的摘要，例如，在搜索結果中這些URL旁邊，審閱標記將顯示為分級星號。
• 移動優先索引： Google從2018年開始逐步將網站轉移到移動優先索引。這種變化意味著Google會根據其移動版本（而非桌面版本）對您的網頁進行抓取和編制索引。
• SRCSET：類似于圖像的響應式設計，SRCSET指示在不同情況下顯示的圖像版本。
• Hreflang：向Google指示內容所用語言的標簽。這有助于Google為使用該語言搜索的用戶提供相應網頁的語言版本。
• ccTLD： “國家/地區代碼頂級域”的縮寫，ccTLD指與國家/地區相關的域。例如，.ru是俄羅斯公認的ccTLD。