你已經學習到在關鍵字研究的基礎上創造有價值的內容,現在更重要的要確保他們不僅可以被人們閱讀,並且還能被搜索引擎閱讀!

你不需要對這些開發技術做深入的理解,比較重要的是要掌握如何運用這些技術,以便可以與開發人員共同討論。與開發人員溝通非常重要,因為你需要使用他們來進行一些網站優化。如果你們兩者沒有交集的話,他們可能不會優先考慮你所提出的優化要求。

專業提示:SEO 需要跨團隊支持才能有效
與您的開發人員建立良好的關係是非常重要的,這樣您才能成功解決雙方的SEO問題。

接下來如果您想確保您的網頁是針對人類和爬蟲,那麼理解SEO的技術優化是必不可少的。為此,我們將本章分為三個部分:

  1. 網站如何運作
  2. 搜索引擎如何理解網站
  3. 用戶如何與網站互動

由於網站的技術結構會對其性能產生巨大影響,因此了解這些原則對每個人都至關重要。

1.網站如何運作

如果搜索引擎優化是優化搜索網站的過程,那麼SEO至少需要對他們正在優化的事物有一個基本的了解!

以下幾個原因,對於了解關於網站SEO是很重要的:

  • 網頁載入的步驟可能會影響頁面加載時間,頁面載入速度不僅對客戶訪問網站很重要,而且這也是Google的排名因素之一。
  • Google在“ 第二次讀取網站”中呈現某些資源,如JavaScript 。Google首先查看沒有JavaScript的頁面,然後幾天到幾週後,再查看一次,運行JavaScript後,才會把內容呈現出來,這意味著使用JavaScript添加到頁面的SEO關鍵元素可能無法編入索引。

在開通網站之前,需要進行設置!

  1. 購買域名。域名是從域名註冊商(如GoDaddy或HostGator)購買的。這些註冊商只是管理域名保留的組織。
  2. 域名鏈接到IP地址。沒有域名服務器(DNS)的幫助,互聯網不會將“seobook.tw”這樣的名稱理解為網站地址。互聯網使用一系列稱為互聯網協議(IP)地址的數字(例如:127.0.0.1),但我們希望使用像seobook.tw這樣的名稱,因為人們更容易記住這些名稱。我們需要使用DNS將這些人類可讀的名稱與機器可讀的數字相鏈接。

網站如何從Sever到瀏覽器

  1. 用戶直接進入:域名通過DNS鏈接到IP地址,人們可以通過直接在瀏覽器中輸入域名或點擊網站鏈接來進入網站。
  2. 瀏覽器發出請求:瀏覽器向Sever請求構建您的網頁的代碼,例如HTML、CSS和JavaScript。
  3. Sever發送資源:一旦Sever收到網站請求,它就會將搜索到的網站文件發送到搜索者的瀏覽器中。
  4. 瀏覽器組裝網頁:瀏覽器現在已經從服務器接收了資源,但它仍然需要將它們放在一起並呈現網頁,以便用戶可以在瀏覽器中看到它。當瀏覽器分析和組織所有網頁的資源時,它正在創建文檔對像模型(DOM)。當您在Chrome瀏覽器的網頁上右鍵單擊+“檢查元素”時,您可以看到DOM(了解如何檢查其他瀏覽器中的元素)。
  5. 瀏覽器發出最終請求:瀏覽器只會在下載、解析和執行所有頁面的必要代碼後顯示網頁,因此,如果瀏覽器需要任何其他代碼才能顯示您的網站,它將從您的服務器發出額外請求。
  6. 網站出現在瀏覽器中:終於您的網站現在已經從代碼轉換(渲染)到您在瀏覽器中看到的內容。
專業提示:與您的開發人員討論!您可以通過將腳本設置為“ 不同步 ” 來縮短關鍵渲染路徑,因為它們不需要在首頁上呈現內容,這可以使您的網頁加載速度更快。Async告訴DOM,當瀏覽器獲取顯示網頁所需的腳本時,它可以繼續組裝。如果每次瀏覽器提取腳本時DOM都必須暫停彙編,那麼它可能會大大減慢頁面加載速度。這就像是和你的朋友一起出去吃飯,每當你們中的一個人去櫃檯訂購時都要暫停談話,只有在他們回來後才能恢復。使用不同步,您和您的朋友可以繼續聊天,即使您正在訂購。您可能還想提出開發人員可以實現的其他優化來縮短關鍵渲染路徑,例如完全刪除不必要的腳本,例如舊的跟踪腳本。

現在你知道如何讓一個網站出現在瀏覽器中,我們將關注有哪些程式碼來構建這些網頁。

最常見的三種是:

  • HTML – 網站的內容(標題、正文內容等)
  • CSS – 網站的外觀(顏色、字體等)
  • JavaScript – 它的行為方式(交互式、動態等)

HTML:網站的內容

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

HTML對於SEO來說很重要,因為它是他們創建或工作的任何頁面的“幕後”。雖然您的CMS可能不需要您用HTML編寫頁面(例如:選擇“超鏈接”將允許您創建鏈接而無需鍵入“a href =”),這是您正在修改每個您是否有時間對網頁執行某些操作,例如添加內容,更改內部鏈接的錨文本等。Google會抓取這些HTML元素,以確定您的文檔與特定查詢的相關性。換句話說,HTML中的內容對您的網頁在Google自然搜索中的排名起著重要作用!

CSS:網站的外觀

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

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

特別是SEOer應該關心的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的這種“ 第二次索引 ”,Google可能會錯過某些只在執行JavaScript後才可用的元素。

在Googlebot渲染網頁的過程中還可能出現其他一些問題,這可能會阻止Google了解JavaScript中包含的內容:

  • 您已從JavaScript資源中阻止Googlebot(例如:使用robots.txt)
  • 您的Sever無法處理抓取您的內容的所有請求
  • JavaScript太複雜或過時,Googlebot無法理解
  • 在抓取工具完成頁面並繼續操作之前,JavaScript不會將“延遲加載”內容放入頁面中。

JavaScript為網頁創建提供了很多可能性是無庸置疑的,但如果你不小心,它也會對你的搜索引擎優化產生一些嚴重後果。還好,有一種方法可以檢查Google是否看到與訪問者相同的內容。要查看Googlebot如何查看您的網頁頁面,請使用Google Search Console的“Google模擬器”工具。

Google 模擬器

在此頁面中,輸入要檢查的URL(如果要檢查主頁,則保留空白),然後單擊“擷取”按鈕。您還可以選擇測試桌面版或移動版。

Google search console 擷取

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

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

搜索引擎變得非常複雜,但他們還不能找到並解釋網頁,就像人類一樣。以下部分概述了可以更好地向搜索引擎提供內容的方法。

通過使用Schema進行結構化,幫助搜索引擎了解您的內容

想像一下,作為一個搜索引擎爬蟲,掃描一篇關於如何烤蛋糕的10,000字的文章。您如何識別烘焙蛋糕所需的作者,食譜,成分或步驟?這就是schema(Schema.org)標記的用武之地。它允許您為搜索引擎提供更具體的分類,以了解頁面上的信息類型。

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

JSON-LD是Google首選的架構標記(2016年5月宣布),Bing也支援。要查看數千個可用架構標記的完整列表,請訪問Schema.org或查看Google Developers結構化數據簡介獲取有關如何實現結構化數據的其他信息。在實施最適合您網頁的結構化數據後,您可以使用Google的結構化數據測試工具測試您的標記。

除了幫助像Google這樣的機器人了解特定內容的內容之外,架構標記還可以在SERP中啟用特殊功能以配合您的頁面。這些特殊功能被稱為“複合式摘要”,您可能已經看到它們在行動。他們是這樣的

關於模式成功的最後建議:

  • 您可以在頁面上使用多種類型的架構標記。但是,如果您標記一個元素(例如產品),並且頁面上列出了其他產品,則還必須標記這些產品。
  • 請勿標記訪問者看不到的內容,並遵循Google的質量指南。例如,如果您將評論結構化標記添加到頁面,請確保這些評論在該頁面上實際可見。
  • 如果您有重複的網頁,Google會要求您使用結構化標記標記每個重複的網頁,而不僅僅是規範版本。
  • 在結構化數據頁面上提供原始和更新(如果適用)的內容。
  • 結構化標記應該是您頁面的準確反映。
  • 嘗試為您的內容使用最特定類型的架構標記。
  • 標記的評論不應由業務部門編寫。它們應該是來自實際客戶的真正無償商業評論。

通過整合重複網址告訴搜索引擎您的首選頁面

當Google在不同網頁上抓取相同內容時,有時無法知道要在搜索結果中編入索引的頁面。這就是標籤發明的原因:幫助搜索引擎更好地索引首選內容版本,而不是所有重複內容。

rel =“canonical”標籤允許您告訴搜索引擎內容的原始主版本所在的位置。你實際上是在說,“嘿,搜索引擎!不要將其編入索引;請改為索引此原文頁面。” 因此,如果您想要重新發布一段內容,無論是完全修改還是稍微修改,但又不想冒創建重複內容的風險,那麼規範標記就是為了節省時間。

<link rel=”canonical” href=”https://example.com.tw/原文頁面” />

正確的網頁整合可確保您網站上的每個獨特內容只有一個URL。為防止搜索引擎將單個網頁的多個版本編入索引,Google建議您在網站的每個網頁上都使用自引用規範標記。如果沒有規範標記告訴Google您的網頁版本是首選,http://www.example.com可以與http://example.com分開編制索引,創建重複項。

“避免重複內容”是Google所希望的!Google獎勵那些具有獨特、有內容、有價值的網站,而不是從其他來源獲取並在多個網頁上重複的內容。因為引擎想要提供最佳的搜索者體驗,所以他們很少會顯示相同內容的多個版本,而是選擇僅顯示整合過的版本。

專業提示:區分內容過濾和內容懲罰
雖然Google沒有對重複的內容做懲罰。但是,您應盡可能使用rel =“canonical”標記來防止重複內容導致索引問題。當存在重複的頁面時,Google會選擇有規範的版本並從搜索結果中過濾掉其他內容。這並不意味著你受到了懲罰。這只是意味著Google只想顯示您的內容的一個版本。

由於排序和過濾,網站具有多個重複頁面也很常見。例如,在電子商務網站上,您可能擁有所謂的多面相導覽,允許訪問者縮小產品範圍以準確找到他們正在尋找的內容,例如在產品類別上重新排序結果的“排序”功能從最低價到最高價的頁面。這可能會創建一個如下所示的

URL:example.com/mens-shirts?sort=price_ascending

添加更多排序/過濾選項,如顏色,大小,材料,品牌等,只需考慮您將創建的主要產品類別頁面的所有變體!

3.用戶如何與網站互動

我們可以創建一個讓用戶有一個最佳瀏覽體驗的網站以及最高的搜索性能。

確保您的移動訪問者獲得積極的體驗

由於今天所有網絡流量的一半以上都來自行動裝置,因此你的網站應該要更適合行動裝置瀏覽。2015年4月,Google更新了算法,該算法提高了適合行動裝置網站的排名。那麼如何確保您的網站適合行動裝置?雖然有三種主要方式可以為行動裝置配置您的網站,但Google建議採用響應式網頁設計

響應式設計

響應式網站指的是不管你用何種類型的設備瀏覽網站,你的網頁都會顯示出適合設備大小的瀏覽頁面。這樣可以減少訪問者在瀏覽時,還需要雙擊或是縮放來方便查看網頁內容。如果不確定您的網頁是否適合行動裝置?你可以使用Google的

響應式網站旨在適合您的訪問者使用的任何類型設備的屏幕。您可以使用CSS使網頁“響應”設備大小。這是理想的,因為它可以防止訪問者雙擊或捏縮放以查看頁面上的內容。不確定您的網頁是否適合行動裝置?您可以使用Google的行動裝置相容性測試進行檢查!

AMP

AMP代表Accelerated Mobile Pages,它用於向行動裝置使用者提供比非AMP更快的內容。AMP能夠如此快速地提供內容,因為它從緩存服務器(而不是原始站點)提供內容,並使用特殊的AMP版本的HTML和JavaScript。 詳細了解AMP

行動裝置優先索引

截至2018年,Google開始將網站轉換為移動優先索引。這種變化引發了移動友好性和移動優先性之間的一些混淆,因此消除分歧是有幫助的。借助移動優先索引,Google會對您網頁的移動版本進行抓取和編制索引。使您的網站與行動裝置螢幕兼容有利於用戶和您在搜索中的表現,但移動優先索引的發生與移動友好性無關。

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

簡單扼要的內容,更容易消化

當網站有很長的頁面時,以選擇將它們把一個內容分成很多部分。這稱為分頁,它類似於書中的頁面。為了避免一次性給訪問者太多,您可以將單個頁面分成多個部分。這對於訪問者來說非常有用,特別是在某個類別中有大量產品結果的電子商務網站上,但您應採取一些步驟來幫助Google了解您的分頁頁面之間的關係。它被稱為rel =“next”和rel =“prev”。

您可以在Google的官方文件中閱讀有關分頁的更多信息,但主要內容是:

  • 序列中的第一頁應該只有rel =“next”標記
  • 序列中的最後一頁應該只有rel =“prev”標記
  • 具有前一頁和後一頁的頁面應該同時具有rel =“next”和rel =“prev”
  • 由於序列中的每個頁面都是唯一的,因此不要將它們規範化為序列中的第一頁。只有使用規範標記指向內容的“查看全部”版本(如果有)。
  • 當Google看到分頁序列時,它通常會合併頁面的鏈接屬性並將搜索者發送到第一頁
專業提示:rel =“next / prev”仍然應該有一個錨文本並且存在於<a>鏈接中
這有助於Google確保他們選擇rel =“next / prev”。

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

Google希望為搜索者提供快速加載的內容。我們開始期待快速加載結果,當網頁加載過慢時,我們會快速的反回上一頁繼續尋找下個相關的頁面。這就是為什麼加載速度是很重要的。我們可以利用下面提到的工具來提高網頁的速度。單擊鏈接以了解有關每個鏈接的更多信息。

圖像頁面加載緩慢的主要原因之一!

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

SRCSET:如何為每個設備提供最佳圖像大小

SRCSET屬性允許您擁有圖像的多個版本,然後指定在不同情況下應使用的版本。這段代碼將添加到<img>標記(您的圖像位於HTML中),以便為特定大小的設備提供唯一的圖像。

這就像我們之前討論的響應式設計的概念!

這不僅可以加快您的圖像加載時間,還可以通過為不同的設備類型提供不同的最佳圖像來增強您的頁面用戶體驗。

專業提示:不僅僅有三種圖像尺寸版本!
這是一個常見的誤解,你只需要一個桌面,平板電腦和手機大小的圖像版本。你需要更多種的圖像尺寸。了解有關SRCSET的更多信息

顯示訪問者圖像加載正在進行延遲加載

當您轉網頁正在延遲加載時,不是看到圖像空白,而是看到圖像的模糊版本,而慢慢顯示彩色框,幾秒鐘後圖像就以全分辨率的加載完成。 這種方式目前在Medium上就表現得非常好。

一開始先加載低分辨率版本,後再繼續加載高分辨率的版本。這也有助於優化網頁的渲染,因此在下載有其他頁面資源時,你的網站會顯示一個分辨率低的域個圖像,可以告訴用戶正在發生的加載。有關如何延遲加載圖像,請查看Google延遲加載指南。

低分辨率版本最初加載,然後全高分辨率版本。這也有助於優化您的關鍵渲染路徑!因此,在下載所有其他頁面資源時,您將顯示一個低分辨率的預告片圖像,可幫助告知用戶事情正在發生/正在加載。有關如何延遲加載圖像的更多信息,請查看Google的“延遲加載指南”

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

頁面速度審核通常會提出諸如“縮小資源”之類的建議,這是意味著什麼呢?縮小是通過刪除掉換行符和空格等內容來縮小代碼文件,並儘可能縮寫代碼變量名稱。

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

通過縮小和捆綁構建網頁所需的文件,您將加快網站速度並減少HTTP(文件)請求的數量。

改善國際訪客的體驗

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

網站可以通過兩種主要方式進行國際化:

  • 語言
    定位多個語種的網站被認為是多語種網站這些網站應添加一個名為hreflang標籤的內容,以向Google顯示您的網頁上有其他語言的副本。了解有關hreflang的更多信息
  • 國家
    針對多個國家/地區的受眾群體的國家/地區網站稱為多地區網站,他們應選擇一種網址結構,以便將其網域或網頁定位到特定國家/地區。這可以包括使用國家/地區代碼頂級域名(ccTLD)(如加拿大的“.ca”)或通用頂級域名(gTLD)以及特定於國家/地區的子文件夾(例如“example.com/ca”)加拿大。詳細了解特定於區域設置的網址

返回:第七章