基本的技術知識將幫助您針對搜索引擎優化您的網站，并在開發人員中建立信譽。

既然您已經在扎實的關鍵字研究的基礎上制作了有價值的內容，那么確保它不僅可以被人類讀取，而且可以被搜索引擎讀取，這一點很重要！

您不需要對這些概念有深入的技術理解，但重要的是掌握這些技術資產的作用，以便您可以與開發人員明智地談論它們。使用開發人員的語言很重要，因為您可能需要他們來執行一些優化。如果他們無法理解您的請求或看不到其重要性，他們就不太可能優先考慮您的問題。當您與開發人員建立信譽和信任時，您就可以開始撕掉通常阻礙關鍵工作完成的繁文縟節。

SEO 需要跨團隊支持才能有效

與您的開發人員建立健康的關系至關重要，這樣您就可以成功應對雙方的 SEO 挑戰。不要等到技術問題導致負面 SEO 后果涉及開發人員。相反，在計劃階段聯合起來，以完全避免這些問題為目標。如果不這樣做，以后可能會花費您的時間和金錢。

除了跨團隊支持之外，如果您想確保您的網頁結構適合人類和爬蟲，那么了解 SEO 的技術優化是必不可少的。為此，我們將本章分為三個部分：

1. 網站如何運作

2. 搜索引擎如何理解網站

3. 用戶如何與網站互動

由于站點的技術結構可能對其性能產生巨大影響，因此每個人都必須了解這些原則。與您的程序員、內容編寫者和設計人員共享指南的這一部分可能也是一個好主意，以便參與站點構建的所有各方都在同一頁面上。

網站如何運作

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

下面，我們概述了網站從購買域名到在瀏覽器中完全呈現狀態的過程。網站旅程的一個重要組成部分是關鍵渲染路徑，這是瀏覽器將網站代碼轉換為可查看頁面的過程。

出于以下幾個原因，了解網站這一點對于 SEO 理解很重要：

• 此網頁組裝過程中的步驟會影響頁面加載時間，速度不僅對于將用戶留在您的網站上很重要，而且也是 Google 的排名因素之一。

• Google 在“第二次通過”時呈現某些資源，例如 JavaScript 。谷歌將首先查看沒有 JavaScript 的頁面，然后幾天到幾周后，它會呈現 JavaScript，這意味著使用 JavaScript 添加到頁面的 SEO 關鍵元素可能不會被編入索引。

想象一下，網站加載過程是您上班的通勤時間。您在家做好準備，收拾東西帶到辦公室，然后從家里走最快的路線去上班。只穿上你的一只鞋，走更長的路去上班，把你的東西放在辦公室，然后立即回家拿另一只鞋，那是很愚蠢的，對吧？這就是低效網站所做的。本章將教您如何診斷您的網站效率低下的地方，您可以采取哪些措施來精簡，以及這種精簡可能對您的排名和用戶體驗產生的積極影響。

在訪問網站之前，需要對其進行設置！

1. 域名已購買。moz.com 等域名是從域名注冊商處購買的，例如 GoDaddy 或 HostGator。這些注冊商只是管理域名保留的組織。

2. 域名與 IP 地址相關聯。如果沒有域名服務器 (DNS) 的幫助，Internet 無法將諸如“moz.com”之類的名稱理解為網站地址。Internet 使用一系列稱為 Internet 協議 (IP) 地址（例如：127.0.0.1）的數字，但我們希望使用諸如 moz.com 之類的名稱，因為它們更容易被人類記住。我們需要使用 DNS 將這些人類可讀的名稱與機器可讀的數字聯系起來。

網站如何從服務器到瀏覽器

1. 用戶請求域。現在，該名稱已通過 DNS 鏈接到 IP 地址，人們可以通過直接在瀏覽器中鍵入域名或單擊指向網站的鏈接來請求網站。

2. 瀏覽器發出請求。該網頁請求會提示瀏覽器發出 DNS 查找請求，以將域名轉換為其 IP 地址。然后，瀏覽器向服務器請求構建您的網頁所用的代碼，例如 HTML、CSS 和 JavaScript。

3. 服務器發送資源。一旦服務器收到對網站的請求，它就會發送要在搜索者瀏覽器中組裝的網站文件。

4. 瀏覽器組裝網頁。瀏覽器現在已經從服務器接收到資源，但它仍然需要把它們放在一起并呈現網頁，以便用戶可以在他們的瀏覽器中看到它。當瀏覽器解析和組織所有網頁資源時，它正在創建一個文檔對象模型 (DOM)。當您在 Chrome 瀏覽器中的網頁上右鍵單擊并“檢查元素”時，您可以看到 DOM。

5. 瀏覽器發出最終請求。瀏覽器只會在所有頁面的必要代碼下載、解析和執行后顯示一個網頁，所以此時，如果瀏覽器需要任何額外的代碼來顯示您的網站，它會從您的服務器發出額外的請求.

6. 網站出現在瀏覽器中。哇！畢竟，您的網站現在已經從代碼轉換（呈現）為您在瀏覽器中看到的內容。

與您的開發人員討論異步！

您可以向開發人員提出的一些事情是通過將腳本設置為“異步”來縮短關鍵渲染路徑" 當不需要它們在首屏呈現內容時，這可以使您的網頁加載速度更快。異步告訴 DOM 在瀏覽器獲取顯示網頁所需的腳本時它可以繼續組裝。如果每次瀏覽器獲取腳本（稱為“渲染阻塞腳本”）時，DOM 都必須暫停組裝，這會大大減慢您的頁面加載速度。這就像和朋友出去吃飯，每次都不得不暫停對話你們中的一個人去柜臺訂購，只有他們回來后才恢復。使用異步，即使你們中的一個人正在訂購，你和你的朋友也可以繼續聊天。你可能還想提出開發人員可以實施的其他優化縮短關鍵渲染路徑，例如完全刪除不必要的腳本，例如舊的跟蹤腳本。

現在你知道一個網站是如何出現在瀏覽器中，我們將重點關注哪些網站是由-換句話說，代碼（編程語言）來構建這些網頁。

最常見的三種是：

• HTML?– 網站內容（標題、正文內容等）

• CSS?– 網站的外觀（顏色、字體等）

• JavaScript?- 它的行為方式（交互式、動態等）

此圖片的靈感來自Alexis Sanders在JavaScript 和 SEO 中的精彩示例：讓您的機器人體驗與您的用戶體驗一樣好

HTML：網站說什么

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

下面是一個網頁示例及其對應的 HTML 的外觀：

這是來自W3schools.com的屏幕截圖，這是我們最喜歡學習和練習 HTML、CSS 和 JavaScript 的地方。

HTML 對 SEO 來說很重要，因為它是他們創建或處理的任何頁面的“幕后”。雖然您的 CMS 可能不要求您用 HTML 編寫頁面（例如：選擇“超鏈接”將允許您創建鏈接而無需輸入“a href=”），但這是您每次修改的內容當您對網頁執行某些操作時，例如添加內容、更改內部鏈接的錨文本等。Google 會抓取這些 HTML 元素以確定您的文檔與特定查詢的相關性。換句話說，您的 HTML 中的內容對您的網頁在 Google 自然搜索中的排名起著重要作用！

CSS：網站的外觀

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

直到 2014 年，Google 的索引系統才開始將網頁呈現得更像真正的瀏覽器，而不是純文本瀏覽器。一種試圖利用 Google 舊索引系統的黑帽 SEO 實踐是通過 CSS 隱藏文本和鏈接，以操縱搜索引擎排名。這種“隱藏文本和鏈接”的做法違反了 Google 的質量指南。

SEO 尤其應該關心的 CSS 組件：

• 由于樣式指令可以存在于外部樣式表文件（CSS 文件）而不是頁面的 HTML 中，因此它可以減少頁面的代碼量，減少文件傳輸大小并加快加載速度。

• 瀏覽器仍然需要下載您的 CSS 文件等資源，因此壓縮它們可以使您的網頁加載速度更快，而頁面速度是一個排名因素。

• 讓您的頁面內容豐富而不是代碼豐富，可以更好地索引您網站的內容。

• 使用 CSS 隱藏鏈接和內容會使您的網站受到人工處罰并從 Google 的索引中刪除。

JavaScript：網站的行為方式

在互聯網的早期，網頁是用 HTML 構建的。當 CSS 出現時，網頁內容有能力呈現某種風格。當編程語言 JavaScript 出現時，網站現在不僅可以有結構和樣式，而且可以是動態的。

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

你肯定見過 JavaScript 的實際應用——你可能不知道！這是因為 JavaScript 幾乎可以對頁面執行任何操作。例如，它可以創建一個彈出窗口，或者它可以請求第三方資源（如廣告）顯示在您的頁面上。

客戶端渲染與服務器端渲染

但是，JavaScript 可能會給 SEO 帶來一些問題，因為搜索引擎不會像人類訪問者那樣查看 JavaScript。這是因為客戶端與服務器端渲染。大多數 JavaScript 在客戶端的瀏覽器中執行。另一方面，使用服務器端渲染，文件在服務器上執行，服務器將它們以完全渲染的狀態發送到瀏覽器。

對 SEO 至關重要的頁面元素（例如文本、鏈接和標簽）在客戶端使用 JavaScript 加載，而不是在您的 HTML 中表示，在頁面代碼中不可見，直到它們被呈現。這意味著搜索引擎爬蟲不會看到您的 JavaScript 中的內容——至少在最初不會。

Google 表示，只要您不阻止 Googlebot 抓取您的 JavaScript 文件，它們通常就能像瀏覽器一樣呈現和理解您的網頁，這意味著 Googlebot 應該看到與用戶查看相同的內容他們瀏覽器中的網站。然而，由于客戶端 JavaScript 的“第二波索引浪潮”，谷歌可能會錯過某些只有在 JavaScript 執行后才可用的元素。

在 Googlebot 呈現您的網頁的過程中，還有一些其他事情可能會出錯，這可能會阻止 Google 了解您的 JavaScript 中包含的內容：

• 您已阻止 Googlebot 使用 JavaScript 資源（例如：使用 robots.txt，就像我們在第 2 章中了解到的那樣）

• 您的服務器無法處理所有抓取您內容的請求

• JavaScript 過于復雜或過時，Googlebot 無法理解

• JavaScript 不會將內容“延遲加載”到頁面中，直到爬蟲完成頁面并繼續前進。

不用說，雖然 JavaScript 確實為網頁創建提供了很多可能性，但如果您不小心，它也會對您的 SEO 產生一些嚴重的影響。

值得慶幸的是，有一種方法可以檢查 Google 是否看到與您的訪問者相同的內容。要查看 Googlebot 如何查看您的網頁，請使用 Google Search Console 的“網址檢查”工具。只需將您頁面的 URL 粘貼到 GSC 搜索欄中：

從這里，單擊“測試實時 URL”。

Googlebot 重新抓取您的網址后，點擊“查看測試頁面”以查看您的頁面是如何被抓取和呈現的。

點擊“HTML”旁邊的“屏幕截圖”標簽會顯示 Googlebot 智能手機如何呈現您的頁面。

作為回報，您將看到 Googlebot 如何查看您的頁面以及訪問者（或您）如何查看頁面。在“更多信息”選項卡中，Google 還會向您顯示他們可能無法通過您輸入的 URL 獲得的任何資源的列表。

了解網站的工作方式為我們接下來要討論的內容奠定了良好的基礎：技術優化可幫助 Google 更好地了解您網站上的頁面。

搜索引擎如何理解網站

想象一下，搜索引擎爬蟲正在掃描一篇關于如何烤蛋糕的 10,000 字的文章。您如何確定制作蛋糕的作者、食譜、配料或步驟？這就是模式標記的用武之地。它允許您為搜索引擎提供更具體的分類，以了解您頁面上的信息類型。

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

JSON-LD是 Google 的首選架構標記（于 2016 年 5 月發布），Bing 也支持它。要查看數千個可用架構標記的完整列表，請訪問Schema.org或查看Google Developers 結構化數據簡介，以獲取有關如何實現結構化數據的更多信息。在實現最適合您的網頁的結構化數據后，您可以使用 Google 的結構化數據測試工具測試您的標記。

除了幫助像谷歌這樣的機器人了解特定內容的內容之外，模式標記還可以啟用特殊功能來伴隨您在 SERP 中的頁面。這些特殊功能被稱為“豐富的片段”，您可能已經看過它們的實際應用。它們是這樣的：

• 頭條新聞輪播

• 評論明星

• 附加鏈接搜索框

• 食譜

請記住，使用結構化數據有助于提供豐富的代碼段，但并不能保證。隨著模式標記使用的增加，未來可能會添加其他類型的豐富片段。

關于模式成功的一些最后建議：

• 您可以在頁面上使用多種類型的架構標記。但是，如果您標記了一個元素，例如產品，并且頁面上列出了其他產品，則您還必須標記這些產品。

• 不要標記訪問者看不到的內容并遵循Google 的質量指南。例如，如果您向頁面添加評論結構化標記，請確保這些評論在該頁面上實際可見。

• 如果您有重復的頁面，Google 會要求您使用結構化標記來標記每個重復的頁面，而不僅僅是規范版本。

• 提供原創和更新（如果適用）conten牛逼你的結構化數據的網頁。

• 結構化標記應該準確反映您的頁面。

• 嘗試為您的內容使用最具體類型的架構標記。

• 標記的評論不應由企業撰寫。它們應該是來自實際客戶的真正無償商業評論。

通過規范化告訴搜索引擎您的首選頁面

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

rel="canonical" 標簽允許您告訴搜索引擎一段內容的原始主版本位于何處。你本質上是在說，“嘿搜索引擎！不要索引這個；而是索引這個源頁面?！?因此，如果您想重新發布一段內容，無論是完全修改還是略微修改，但又不想冒險創建重復的內容，那么規范標簽就可以挽救這一天。

正確的規范化可確保您網站上的每個獨特內容都只有一個 URL。為防止搜索引擎將單個頁面的多個版本編入索引，Google 建議在您網站的每個頁面上都有一個自引用規范標簽。如果沒有規范標簽告訴 Google 您的網頁的哪個版本是首選版本，https://www.example.com可能會與 https://example.com 分開編入索引，從而創建重復項。

“避免重復內容”是互聯網的老生常談，而且有充分的理由！谷歌希望用獨特的、有價值的內容來獎勵網站——而不是從其他來源獲取并在多個頁面上重復的內容。由于引擎希望提供最佳的搜索者體驗，他們很少會顯示相同內容的多個版本，而是選擇僅顯示規范化版本，或者如果規范標簽不存在，則選擇他們認為最有可能是原始版本的版本。

區分內容過濾和內容懲罰

沒有重復內容懲罰這樣的事情。但是，您應該盡可能使用 rel="canonical" 標簽來避免重復內容導致索引問題。當一個頁面存在重復時，谷歌會選擇一個規范的，并從搜索結果中過濾掉其他的。這并不意味著你受到了懲罰。這只是意味著 Google 只想顯示您內容的一個版本。

由于排序和過濾選項，網站有多個重復頁面也很常見。例如，在電子商務網站上，您可能有所謂的分面導航，允許訪問者縮小產品范圍以準確找到他們正在尋找的內容，例如“排序依據”功能，可對產品類別的結果重新排序頁從最低到最高的價格。這可能會創建一個類似于以下內容的 URL：example.com/mens-shirts?sort=price_ascending。添加更多分類/過濾選項，如顏色、尺寸、材料、品牌等，然后想想這將創建的主要產品類別頁面的所有變體！

用戶如何與網站互動

在第 1 章中，我們說過，盡管 SEO 代表搜索引擎優化，但 SEO 與人有關，也與搜索引擎本身有關。那是因為搜索引擎的存在是為了為搜索者服務。這個目標有助于解釋為什么 Google 的算法會獎勵為搜索者提供最佳體驗的網站，以及為什么一些網站盡管具有強大的反向鏈接配置文件等品質，但在搜索中可能表現不佳。

當我們了解是什么使他們的 Web 瀏覽體驗最佳時，我們就可以創建這些體驗以實現最佳搜索性能。

確保為您的移動訪問者提供積極的體驗

由于當今所有網絡流量的一半以上來自移動設備，因此可以肯定地說，您的網站應該易于移動訪問者訪問和導航。2015 年 4 月，谷歌推出了對其算法的更新，將在非移動友好頁面上推廣移動友好頁面。那么，您如何確保您的網站適合移動設備使用？盡管可以通過三種主要方式為移動設備配置網站，但Google 建議使用響應式網頁設計。

響應式設計

響應式網站旨在適合您的訪問者使用的任何類型設備的屏幕。您可以使用 CSS 使網頁“響應”設備大小。這是理想的，因為它可以防止訪問者為了查看您頁面上的內容而必須雙擊或雙指縮放。不確定您的網頁是否適合移動設備？您可以使用谷歌的移動友好測試來檢查！

AMP

AMP 代表 Accelerated Mobile Pages，它用于以比非 AMP 交付快得多的速度向移動訪問者交付內容。AMP 能夠如此快速地交付內容，因為它從其緩存服務器（而不是原始站點）交付內容，并使用特殊的 AMP 版本的 HTML 和 JavaScript。

移動優先索引

截至 2018 年，谷歌開始將網站切換到移動優先索引。這一變化引發了移動友好和移動優先之間的一些混淆，因此消除歧義是有幫助的。通過移動優先索引，Google 會抓取您網頁的移動版本并將其編入索引。使您的網站與移動屏幕兼容對用戶和您的搜索性能都有好處，但移動優先索引的發生與移動友好無關。

這引起了一些網站在移動版和桌面版之間缺乏平等性的擔憂，例如在其移動視圖上顯示不同的內容、導航、鏈接等。例如，具有不同鏈接的移動網站會改變 Googlebot（移動）抓取您的網站并將鏈接權益發送到您的其他頁面的方式。

提高頁面速度以減輕訪問者的挫敗感

谷歌希望為搜索者提供快速加載的內容。我們已經開始期待快速加載的結果，當我們沒有得到它們時，我們會迅速回到 SERP 以尋找更好、更快的頁面。這就是為什么頁面速度是現場搜索引擎優化的一個重要方面。

圖像是頁面緩慢的罪魁禍首之一！

正如第 4 章所討論的，圖像是網頁加載緩慢的首要原因之一！除了圖像壓縮、優化圖像替代文本、選擇正確的圖像格式和提交圖像站點地圖之外，還有其他技術方法可以優化向用戶顯示圖像的速度和方式。改進圖像傳輸的一些主要方法如下：

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

SRCSET 屬性允許您擁有圖像的多個版本，然后指定在不同情況下應使用哪個版本。這段代碼被添加到 <img> 標簽（你的圖片在 HTML 中的位置），為特定尺寸的設備提供獨特的圖片。

這就像我們之前討論的響應式設計的概念，除了圖像！

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

2. 顯示訪客圖片加載正在進行中，延遲加載

當您訪問網頁時，會發生延遲加載，并且在加載周圍文本時會出現圖像的模糊輕量版本或彩色框，而不是看到圖像所在的空白區域。幾秒鐘后，圖像以全分辨率清晰加載。流行的博客平臺 Medium 在這方面做得很好。

該低分辨率版本最初加載，然后全高分辨率版本。這也有助于優化您的關鍵渲染路徑！因此，當您正在下載所有其他頁面資源時，您會顯示一個低分辨率的預告圖像，有助于告訴用戶事情正在發生/正在加載。有關如何延遲加載圖像的更多信息，請查看Google 的延遲加載指南。

通過壓縮和捆綁文件來提高速度

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

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

通過縮小和捆綁構建您的網頁所需的文件，您將加速您的網站并減少您的 HTTP（文件）請求的數量。

改善國際觀眾的體驗

針對來自多個國家/地區的受眾的網站應該熟悉國際 SEO最佳實踐，以便提供最相關的體驗。如果沒有這些優化，國際訪問者可能難以找到適合他們的網站版本。

網站國際化主要有兩種方式：

• 以講多種語言的人為目標的語言網站被視為多語言網站。這些網站應該添加一個叫做 hreflang 標簽的東西，以向 Google 表明您的網頁有另一種語言的副本。

• 針對多個國家/地區的受眾的國家/地區網站稱為多區域網站，他們應該選擇一種 URL 結構，以便輕松將其域或頁面定位到特定國家/地區。這可以包括使用國家代碼頂級域 (ccTLD)，例如“.ca”代表加拿大，或使用帶有國家特定子文件夾的通用頂級域 (gTLD)，例如“example.com/ca”代表加拿大。加拿大。

您已經進行了研究、編寫并針對搜索引擎和用戶體驗優化了您的網站。下一個 SEO 難題是一個大難題：建立權威，以便您的網頁在搜索結果中排名靠前。繼續，到第 6 章（鏈接建立和建立權限）！

由布蘭妮穆勒和 Moz 工作人員撰寫。

翻譯來源：moz