基本的技術知識將幫助您優化您的網站以符合搜索引擎的要求，並在開發人員中建立可信度。
既然您已經根據堅實的關鍵字研究打造出有價值的內容，重要的是確保這些內容不僅對人類可讀，也對搜索引擎友好！
你不需要對這些概念有深入的技術理解，但重要的是要理解這些技術資產的作用，這樣你才能與開發人員進行有意義的交流。能夠用開發人員的語言交流很重要，因為你可能需要他們來執行一些優化工作。如果他們無法理解你的請求或看到其重要性，他們不太可能優先考慮你的要求。當你與開發人員建立起信任和可靠性時，你就可以開始消除常常阻礙關鍵工作完成的繁文縟節。
SEO需要跨團隊的支持才能發揮作用
與開發人員建立良好的關係對於成功應對SEO挑戰至關重要。不要等到技術問題引起負面的SEO影響才去找開發人員。相反地，在計劃階段就攜手合作，以避免問題的發生。如果不這樣做，將來可能會浪費您的時間和金錢。
除了跨團隊支持外，如果您希望確保您的網頁既適合人類用戶又適合網路爬蟲，了解SEO的技術優化是至關重要的。為此，我們將本章分為三個部分：
- 網站的運作方式
- 搜索引擎如何理解網站
- 使用者如何與網站互動
由於網站的技術結構對其性能有著巨大的影響，因此每個人都需要了解這些原則。將這部分指南與您的程式設計師、內容撰寫人員和設計師分享，這樣所有參與網站建設的各方都能保持一致。
網站的運作方式
如果搜索引擎優化是為了優化網站的過程，那麼SEO至少需要對他們正在優化的事物有基本的了解！
以下，我們將從購買域名開始，一直到網站在瀏覽器中完全呈現的過程中概述網站的旅程。網站旅程中的一個重要組成部分是關鍵渲染路徑，這是瀏覽器將網站的代碼轉換為可查看的頁面的過程。
對於SEO專家來說，了解網站的這些內容是很重要的，原因有幾個：
- 這個網頁組裝過程中的步驟會影響頁面的加載時間，而速度不僅對於讓用戶留在您的網站上很重要，也是Google排名的因素之一。
- Google在"第二次遍歷"時會處理某些資源，例如JavaScript。Google會先查看沒有JavaScript的頁面，然後在幾天到幾週後再處理JavaScript，這意味著使用JavaScript添加到頁面上的對於SEO至關重要的元素可能無法被索引。
想像一下，網站的加載過程就像你上班的通勤路程。你在家準備好，收拾好要帶到辦公室的東西，然後從家裡選擇最快的路線去上班。如果你只穿了一隻鞋子，走了一條更長的路去上班，把東西放在辦公室後立刻返回家中拿另一隻鞋子，那是很愚蠢的，對吧？這就是效率低下的網站所做的事情。本章將教你如何診斷你的網站可能存在的效率問題，以及如何進行優化，以及這種優化可能帶來的排名和用戶體驗的積極影響。
在一個網站可以被訪問之前，它需要被設置好！
- 已購買域名。像moz.com這樣的域名是從域名註冊商（如GoDaddy或HostGator）購買的。這些註冊商只是管理域名預訂的組織。
- 域名與IP地址相關聯。網際網路無法理解像「moz.com」這樣的名稱作為網站地址，除非借助域名服務器（DNS）。網際網路使用一系列數字，稱為網際網路協議（IP）地址（例如：127.0.0.1），但我們希望使用像moz.com這樣的名稱，因為這對人類來說更容易記住。我們需要使用DNS將這些人類可讀的名稱與機器可讀的數字相關聯。
一個網站如何從伺服器傳送到瀏覽器
- 用戶請求域名。現在通過DNS將名稱與IP地址關聯起來，人們可以通過在瀏覽器中直接輸入域名或點擊網站的連結來請求網站。
- 瀏覽器發出請求。該網頁的請求促使瀏覽器發出DNS查找請求，將域名轉換為IP地址。然後，瀏覽器向服務器發出請求，獲取網頁的代碼，例如HTML、CSS和JavaScript。
- 伺服器發送資源。一旦伺服器收到網站的請求，它會將網站文件發送到搜索器的瀏覽器中進行組裝。
- 瀏覽器組合網頁。瀏覽器現在已經從伺服器接收到資源，但它仍然需要將所有資源組合在一起並渲染網頁，以便使用者可以在瀏覽器中看到它。當瀏覽器解析和組織所有網頁的資源時，它正在創建一個文件物件模型（DOM）。DOM是您在Chrome瀏覽器中右鍵點擊並「檢查元素」時可以看到的內容（了解如何在其他瀏覽器中檢查元素）。
- 瀏覽器發出最後的請求。只有在下載、解析和執行完網頁所需的所有代碼後，瀏覽器才會顯示網頁。因此，在這一點上，如果瀏覽器需要額外的代碼來顯示您的網站，它將向您的伺服器發出額外的請求。
- 網站在瀏覽器中顯示出來。哇！經過所有的努力，你的網站現在已經從程式碼轉換成了在瀏覽器中所看到的樣子。
跟你的開發人員談談關於非同步的事情吧！
你可以和開發人員討論的一個問題是，在不需要渲染以上摺疊內容的情況下，通過將腳本設置為「async」來縮短關鍵渲染路徑，這可以加快網頁載入速度。非同步告訴DOM在瀏覽器獲取顯示網頁所需的腳本時可以繼續組裝。如果DOM每次瀏覽器獲取腳本（稱為「阻塞渲染腳本」）時都必須暫停組裝，這會大大減慢頁面載入速度。這就像和朋友一起出去吃飯，每當你們中的一個人去櫃檯點餐時，你們都必須暫停對話，直到他們回來才能繼續。通過非同步，即使其中一個人在點餐，你和你的朋友也可以繼續聊天。你還可以提出其他優化建議，開發人員可以實施以縮短關鍵渲染路徑，例如完全刪除不必要的腳本，如舊的跟蹤腳本。
既然你已經知道網站在瀏覽器中的呈現方式，我們現在要著重於網站的組成部分 – 換句話說，用於構建這些網頁的代碼（編程語言）。
最常見的三個是：
- HTML – 網站所說的內容（標題、正文等）
- CSS – 網站的外觀（顏色、字體等）
- JavaScript – 它的行為方式（互動、動態等）
這個圖像是受到Alexis Sanders在JavaScript＆SEO：使您的機器人體驗與用戶體驗一樣出色的精彩示例的啟發
HTML：一個網站所說的
HTML代表超文本標記語言，它是網站的支柱。標題、段落、列表和內容等元素都在HTML中定義。
這裡有一個網頁的例子，以及它對應的HTML代碼是什麼：
這是來自W3schools.com的截圖，這是我們最喜歡的學習和實踐HTML、CSS和JavaScript的地方。
HTML對於SEO人員來說非常重要，因為它是他們創建或處理的任何頁面的「引擎」。雖然您的CMS可能不需要您使用HTML編寫頁面（例如：選擇「超連結」將允許您創建連結，而無需輸入「a href =」），但每次對網頁進行更改時，您都在修改HTML，例如添加內容，更改內部連結的錨文本等。Google會爬取這些HTML元素，以確定您的文檔對於特定查詢的相關性。換句話說，您的HTML內容在Google有機搜索中的排名中起著重要作用！
CSS：網站的外觀如何呈現
CSS代表「層疊樣式表」，這是導致您的網頁具有特定字體、顏色和佈局的原因。HTML的創建是為了描述內容，而不是為了設計風格，所以當CSS出現時，它改變了遊戲規則。有了CSS，網頁可以在不需要手動編碼每個頁面的HTML的情況下進行「美化」 – 對於大型網站來說，這是一個繁瑣的過程。
直到2014年，Google的索引系統才開始將網頁呈現得更像一個真實的瀏覽器，而不僅僅是一個純文本瀏覽器。一種黑帽SEO的做法是利用Google舊的索引系統，通過CSS隱藏文本和連結，以操縱搜索引擎排名。這種「隱藏文本和連結」的做法違反了Google的質量準則。
SEO專家應該關注的CSS組件：
- 由於樣式指令可以存在外部樣式表文件（CSS文件）中，而不是您的頁面HTML中，這使得您的頁面代碼量減少，減小了文件傳輸大小，加快了加載時間。
- 瀏覽器仍然需要下載資源，例如您的CSS檔案，因此壓縮它們可以使您的網頁加載更快，而頁面速度是一個排名因素。
- 將您的網頁內容比程式碼更豐富，可以提升您網站內容的索引效果。
- 使用CSS隱藏連結和內容可能會導致您的網站被手動懲罰並從Google的索引中刪除。
JavaScript：網站的行為方式
在網際網路的早期，網頁是用HTML建立的。當CSS出現時，網頁內容可以具有一些風格。當程式語言JavaScript進入場景時，網站不僅可以具有結構和風格，還可以具有動態效果。
JavaScript為非靜態網頁創作帶來了許多機會。當有人嘗試訪問一個使用這種程式語言增強的網頁時，該用戶的瀏覽器將執行JavaScript與服務器返回的靜態HTML進行交互，從而使網頁具有某種互動性。
你肯定見過JavaScript的實際應用，只是你可能不知道！這是因為JavaScript幾乎可以對頁面做任何事情。例如，它可以創建一個彈出窗口，或者請求第三方資源（如廣告）在你的頁面上顯示。
客戶端渲染與服務器端渲染
JavaScript對於SEO可能會帶來一些問題，因為搜索引擎並不像人類訪問者那樣看待JavaScript。這是因為客戶端與服務器端渲染的區別。大多數JavaScript在客戶端的瀏覽器中執行。另一方面，通過服務器端渲染，文件在服務器上執行並以完全渲染的狀態發送到瀏覽器。
對於關鍵的SEO頁面元素，例如文字、連結和標籤，如果它們是使用JavaScript在客戶端加載的，而不是在HTML中表示，則在渲染之前，它們在頁面代碼中是看不見的。這意味著搜索引擎的爬蟲起初無法看到JavaScript中的內容。
根據Google的說法，只要您沒有阻止Googlebot對JavaScript文件進行爬取，它們通常能夠像瀏覽器一樣渲染和理解您的網頁，這意味著Googlebot應該能夠看到與使用瀏覽器查看網站的用戶相同的內容。然而，由於客戶端JavaScript的"第二次索引"，Google可能會錯過僅在JavaScript執行後才可用的某些元素。
在Googlebot渲染您的網頁過程中，還可能出現其他一些問題，這可能會阻止Google理解JavaScript中的內容
- 你已經封鎖了Googlebot對JavaScript資源的訪問（例如：使用robots.txt，就像我們在第2章中學到的那樣）。
- 您的 伺服器無法處理所有請求以爬取您的內容
- JavaScript對於Googlebot來說太複雜或過時，無法理解
- JavaScript在爬蟲完成並離開頁面後才會將內容"懶加載"到頁面中。
不用說，JavaScript確實為網頁創建打開了許多可能性，但如果不小心處理，它也可能對您的SEO產生嚴重的影響。
幸運的是，有一種方法可以檢查Google是否與您的訪客看到的內容相同。要查看Googlebot如何查看您的網頁，請使用Google Search Console的「URL檢查」工具。只需將您的網頁URL粘貼到GSC搜索欄中：
從這裡點擊「測試實時網址」。
在Googlebot重新爬取您的URL之後，點擊「查看已測試頁面」以查看您的頁面是如何被爬取和渲染的。
點擊「截圖」標籤旁邊的「HTML」，可以看到Googlebot智能手機如何呈現您的網頁。
作為回報，您將能夠看到Googlebot如何看待您的網頁，與訪客（或您自己）看到網頁的方式有所不同。在「更多資訊」標籤中，Google還會向您顯示一個列表，列出他們可能無法獲取您輸入的URL的任何資源。
了解網站運作的方式為我們接下來要討論的內容打下了良好的基礎：技術優化，以幫助Google更好地理解您網站上的頁面。
搜索引擎如何理解網站
想像一下，你是一個搜索引擎的爬蟲，正在掃描一篇長達10,000字的文章，內容是關於如何烘焙蛋糕。你要如何辨識出作者、食譜、材料或烘焙蛋糕所需的步驟呢？這就是 schema 標記發揮作用的地方。它讓你能夠向搜索引擎提供更具體的分類，以描述你網頁上的資訊類型。
Schema是一種標記或組織內容的方式，讓搜索引擎更好地理解網頁上的某些元素是什麼。這段代碼為您的數據提供結構，這就是為什麼Schema通常被稱為「結構化數據」的原因。結構化數據的過程通常被稱為「標記」，因為您正在使用組織代碼標記您的內容。
JSON-LD是Google首選的架構標記（於2016年5月宣布），Bing也支援。要查看數千種可用的架構標記清單，請訪問Schema.org或查看Google開發者介紹結構化數據以獲取更多實施結構化數據的資訊。在實施最適合您網頁的結構化數據後，您可以使用Google的結構化數據測試工具來測試您的標記。
除了幫助像Google這樣的機器人理解特定內容的意思外，schema標記還可以在搜索引擎結果頁面中提供特殊功能。這些特殊功能被稱為「豐富片段」，你可能已經見過它們的效果。它們包括：
- 頭條新聞輪播
- 評論星星
- 站點連結搜尋框
- 食譜
請記住，使用結構化數據可以幫助實現豐富片段的呈現，但並不保證。隨著模式標記的使用增加，未來可能會添加其他類型的豐富片段。
一些關於架構成功的最後建議：
- 您可以在頁面上使用多種類型的模式標記。然而，如果您標記了一個元素，比如一個產品，而頁面上還列出了其他產品，您也必須對這些產品進行標記。
- 請勿對訪客看不見的內容進行標記，並遵循Google的品質指南。例如，如果您在某個頁面上添加了評論結構化標記，請確保這些評論實際上在該頁面上可見。
- 如果您有重複的頁面，Google要求您對每個重複的頁面進行結構化標記，而不僅僅是標記主要版本。
- 在您的結構化數據頁面上提供原始且更新（如適用）的內容。
- 結構化標記應該是您網頁的準確反映。**
- 嘗試為您的內容使用最具體的結構化標記。
- 標註的評論不應由企業撰寫，而應該是真實的、來自實際顧客的未付費企業評論。
使用規範化告訴搜索引擎您偏愛的頁面
當Google在不同的網頁上爬取相同的內容時，有時候它不知道該選擇哪個頁面來索引在搜索結果中。這就是為什麼發明了rel="canonical"標籤：它可以幫助搜索引擎更好地索引首選版本的內容，而不是所有的副本。
rel=“canonical” 標籤允許您告訴搜索引擎原始內容的主要版本位於何處。您基本上是在說：「嘿，搜索引擎！不要索引這個；請索引這個源頁面。」因此，如果您想要重新發布一個內容，無論是完全相同還是稍作修改，但又不想冒著創建重複內容的風險，那麼 rel=“canonical” 標籤就能派上用場了。
正確的規範化確保您網站上的每個獨特內容只有一個URL。為了防止搜索引擎索引同一頁面的多個版本，Google建議在您網站的每個頁面上都加上自引用的規範標籤。如果沒有規範標籤告訴Google您的網頁的首選版本是哪個，https://www.example.com可能會與https://example.com分別被索引，造成重複內容。
「避免重複內容」是一個網路的真理，而且有很好的理由！Google希望獎勵具有獨特且有價值的內容的網站，而不是從其他來源複製並在多個頁面上重複的內容。因為搜尋引擎希望提供最佳的搜尋體驗，他們很少會顯示相同內容的多個版本，而是選擇只顯示規範化的版本，或者如果沒有規範標籤存在，則顯示他們認為最有可能是原始版本的那個。
區分內容過濾和內容處罰
沒有所謂的重複內容懲罰。然而，您應該嘗試使用 rel=“canonical” 標籤來避免重複內容導致索引問題。當頁面存在重複時，Google會選擇一個主要版本，並將其他版本從搜索結果中過濾掉。這並不意味著您受到了懲罰，只是表示Google只想顯示您內容的一個版本。
網站上有多個重複頁面是非常常見的，這是由於排序和篩選選項所導致的。例如，在電子商務網站上，你可能會有所謂的多層導航，讓訪客可以縮小產品範圍，找到他們想要的東西，比如一個「按照價格排序」的功能，可以按照價格從低到高重新排列產品類別頁面上的結果。這可能會創建一個類似這樣的URL：example.com/mens-shirts?sort=price_ascending。再加上更多的排序/篩選選項，比如顏色、尺寸、材料、品牌等等，想想看這會產生多少種主要產品類別頁面的變體！
想要了解更多關於不同類型的重複內容，這篇由Pete博士撰寫的文章有助於梳理出不同的細微差異。
使用Moz Pro保持您的網站技術健康
Moz Pro會自動爬行您的網站，並在問題變得難以控制之前提醒您有關新的和緊急的問題。從重複內容到缺少的規範URL，再到404錯誤的URL等等，Moz Pro能快速發現關鍵問題。試用一下，親自體驗一下吧！
使用者如何與網站互動
在第一章中，我們提到儘管SEO代表搜索引擎優化，但SEO與搜索引擎本身一樣重視人。這是因為搜索引擎存在是為了服務搜索者。這個目標解釋了為什麼Google的演算法會獎勵為搜索者提供最佳體驗的網站，以及為什麼一些網站儘管具有強大的反向連結配置，但在搜索中表現不佳。
當我們了解什麼因素能使他們的網頁瀏覽體驗最佳化時，我們就能創造出這些體驗，以達到最大的搜索效能。
確保您的行動訪客有一個正面的體驗
由於今天超過一半的網路流量來自行動設備，可以說你的網站應該對行動訪客開放並易於導航。2015年4月，Google推出了一項更新演算法，將優先推廣行動友好頁面而非行動不友好頁面。那麼，你如何確保你的網站是行動友好的呢？雖然有三種主要的方式可以為行動設備配置你的網站，但Google建議使用響應式網頁設計。
響應式設計
響應式網站設計能夠適應訪客所使用的任何設備螢幕大小。您可以使用CSS使網頁根據設備大小進行「響應」。這非常理想，因為它可以避免訪客需要雙擊或縮放來查看您網頁上的內容。不確定您的網頁是否適合行動設備？您可以使用Google的行動友好測試來檢查！
AMP
AMP代表加速移動頁面，用於以比非AMP交付更快的速度向移動訪問者提供內容。AMP能夠如此快速地提供內容，是因為它從其緩存 伺服器（而不是原始網站）交付內容，並使用特殊的AMP版本HTML和JavaScript。
了解更多關於AMP。
移動優先索引化
截至2018年，Google開始將網站轉換為以手機為先的索引。這一變化引起了一些對手機友好性和以手機為先的混淆，因此澄清這一點是有幫助的。通過以手機為先的索引，Google爬取並索引您網頁的手機版本。使您的網站適配手機螢幕對用戶和搜索結果的表現都有好處，但以手機為先的索引與手機友好性是獨立的。
這對於在行動版和桌面版之間缺乏一致性的網站引起了一些擔憂，例如在行動視圖上顯示不同的內容、導航、連結等。例如，具有不同連結的行動網站將改變Googlebot（行動版）爬行您的網站並將連結權益發送到其他頁面的方式。
提升頁面速度以減輕訪客的挫折感
Google希望為搜索者提供快速加載的內容。我們已經習慣了快速加載的結果，當我們沒有得到它們時，我們會迅速返回搜索結果頁面，尋找更好、更快的頁面。這就是為什麼頁面速度是站內SEO的一個關鍵方面。我們可以通過利用下面提到的工具來提高網頁的速度。點擊連結了解更多資訊。
- Google的PageSpeed Insights工具和最佳案例文檔
- 如何思考速度工具
- GTMetrix
- Google的移動網站速度和性能測試工具
- Google 燈塔
- Chrome DevTools & Tutorial
圖片是網頁速度緩慢的主要原因之一！
正如第四章所討論的，圖像是網頁加載緩慢的主要原因之一！除了圖像壓縮、優化圖像替代文字、選擇合適的圖像格式和提交圖像站點地圖之外，還有其他技術方法可以優化圖像顯示速度和方式，以下是一些主要的改善圖像傳遞的方法：
不只有三個圖片尺寸版本！
許多人誤解為只需要製作桌面、平板和手機尺寸的圖片版本。實際上，屏幕尺寸和解析度有非常多種。
SRCSET：如何為每個設備提供最佳圖像大小
SRCSET屬性允許您擁有多個圖像版本，然後指定在不同情況下應使用哪個版本。這段代碼添加到 標籤（其中包含您的圖像的HTML位置），為特定大小的設備提供獨特的圖像。
這就像我們之前討論過的響應式設計概念，只是針對圖片而言！
這不僅可以加快圖片加載時間，還是一種獨特的方式，通過為不同設備類型提供不同和最佳的圖片來提升您的頁面用戶體驗。
2. 透過懶加載功能顯示訪客圖片正在加載中
懶加載是指當您訪問一個網頁時，不會看到一個空白的白色區域，而是會出現一個模糊的輕量級圖像版本或一個有顏色的方框，以代替圖像，同時周圍的文本正在加載。幾秒鐘後，圖像以清晰的全解析度加載。受歡迎的部落格平台Medium在這方面做得非常好。
首先加載低解析度版本，然後再加載完整的高解析度版本。這也有助於優化關鍵渲染路徑！因此，在下載所有其他頁面資源的同時，您可以顯示一個低解析度的預覽圖片，以告訴用戶事情正在發生/正在加載。有關如何應用延遲加載圖片的更多資訊，請參閱Google的延遲加載指南。
通過壓縮和捆綁文件來提高速度
頁面速度審核通常會提出「縮小資源」等建議，但這到底是什麼意思呢？縮小資源是通過刪除換行和空格，以及盡可能縮寫代碼變量名稱來壓縮代碼文件。
「捆綁」是另一個常見的術語，用於提高頁面速度。捆綁的過程將一堆相同的編程語言文件合併為一個單一的文件。例如，一堆JavaScript文件可以放入一個較大的文件中，以減少瀏覽器需要載入的JavaScript文件數量。
通過對構建網頁所需的文件進行縮小和打包，您可以加快網站的速度並減少HTTP（文件）請求的數量。
提升國際觀眾的體驗
針對多個國家的受眾的網站應該熟悉國際SEO最佳實踐，以提供最相關的體驗。如果沒有這些優化，國際訪客可能會難以找到適合他們的網站版本。
有兩種主要的方式可以使網站國際化：
語言
針對多種語言使用者的網站被視為多語言網站。這些網站應該添加一個稱為hreflang標籤的東西，以向Google顯示您的頁面有另一種語言的內容。了解更多關於hreflang的資訊。
國家
針對多個國家的受眾的網站被稱為多區域網站，它們應該選擇一個能夠輕鬆將其域名或頁面定位到特定國家的URL結構。這可以包括使用國家代碼頂級域名（ccTLD），例如加拿大的「.ca」，或者使用特定國家子文件夾的通用頂級域名（gTLD），例如加拿大的「example.com/ca」。了解更多有關特定區域的URL的資訊。