SEO初學者指南

  1. SEO初學者指南

第五章：技術性SEO

現在你對於關鍵字領域已經大致掌握了，而且將自己的網站內容提升到高品質階段，之後要做的是，確保搜尋者與搜尋引擎，都可以了解你的網站內容。

你不太需深入的了解這些技術，只需要掌握這些概念，並了解這些概念需要的關鍵技術，以便與SEO技術人員一起討論，懂得SEO技術人員的術語與觀念是很重要，因為他們需要你與你一起進行網站優化，如果他們不懂你的要求或是不懂你的網站哪裡重要，SEO技術人員可能會誤解你的網站內容重那些是重要的，那些是次要的，當SEO技術人員與你有共同語言時，就可以更容易的解決網站上的問題。

除了專業的技術團隊，如果要確保搜尋者與搜尋蜘蛛看懂網站，我們必須要更了解EO技術，這裡，會分三段文章來說明：

  • 網站如何運作？
  • 搜尋引擎如何了解網站？
  • 使用者與網站如何互動？
由於網站的SEO架構會對SEO有巨大影響力，因此參與網站的每個人都要懂得這些原則，也就是說在網站製作時，無論是工程師、設計師、文字編輯，最好都懂得相關概念。

 

網站如何運作？

若搜尋引擎優化SEO是為了優化" 網站進行搜尋的過程 "，那麼所有參與網站搜尋引擎優化SEO的人員，都需要對優化的事物有基本的了解！
以下會說明從"網址購買到網站顯示在瀏覽器上"的全部的流程，這是瀏覽器將網站程式碼轉換為可以看到的網頁的過程。
以下幾個原因說明，網站對於SEO來說是很重要的：

• 網頁的製作方式與架構會影響網頁讀取時間，網頁速度不僅會影響用戶的體驗好壞，也會影響Google的網站排名。

• Google對於某些網頁資源會使用「2次抓取 ( second pass )」方式，例如「JavaScript」Google會先略過JavaScript來爬取網頁，一段時間後再來，這代表使用JavaScript增加網頁中的SEO元素有可能不會被索引

想像一下網站讀取的動作如同你上班通勤一樣，你在家準備好必備物品，然後準備出門，然後選擇從家裡到公司最快的路線，然後只穿一隻鞋子走了很長的路到了公司，放下物品，然後馬上回家再去拿另一隻鞋子，這樣對嗎? 上述就是低效率網站的運行方式。
本章將教你如何診斷網站效率，可以怎麼做來精簡網站，以及這些作法可能對你的網站排名和用戶體驗產生哪些正面的影響。

網站要有網址，才可以被看到!

1. 購買域名：像corners.com.tw這樣的域名是從域名註冊商（例如中華電信或是遠傳等等...）購買的，這些註冊商只是管理及保留域名的組織。
2. 網域指向到IP地址：如果沒有域名服務器（DNS）的幫助，網路無法將「corners.com.tw」之類的名稱理解為網站地址，網路使用一系列稱為網路協議（IP）地址的數字（例如：127.0.0.1），但我們比較希望使用corners.com.tw之類的名稱，因為它們好記，所以我們需要使用DNS將人類容易辨別的名稱與機器可讀取的數字連結起來。

網站如何從伺服器運作至瀏覽器

1. 購買網域：現在網域已經通過DNS指向到IP地址，人們可以直接在瀏覽器中打上網域名稱或點擊網址連結來觀看網站。

2. 瀏覽器發出請求：網頁會提示瀏覽器發出查詢DNS請求，將網域名稱轉換成IP數字，然後，瀏覽器向伺服器發出請求讀取網頁的程式碼，例如HTML，CSS和JavaScript。

3. 伺服器發送網頁資源：伺服器收到網站請求後，就會將網站文件發送到搜尋者的瀏覽器中進行彙整。

4. 瀏覽器組裝網頁：瀏覽器現在從伺服器接收資源，仍然需要將所有資源放在一起才呈現網頁，以便用戶可以在瀏覽器中看到它，當瀏覽器分析並整理網頁的所有資源時，它會創建一個文檔對象模型（Document Object Model，DOM），點擊Chrome在網頁上「檢查元素」時，你會看到DOM【如何檢查網頁元素】。

5. 瀏覽器發出最終請求：瀏覽器僅在下載、解析和執行所有網頁所需的程式碼後才會顯示網頁，因此，如果瀏覽器需要任何其它的程式碼來顯示你的網站時，它會從你的伺服器發出其他請求。

6. 網站出現在瀏覽器中：網站已經從程式碼轉換成可以觀看的網頁，就是你在瀏覽器中看到的內容。

現在你已經知道網站如何在瀏覽器中顯示，接下來我們要了解在網站的構成，也就是程式碼(程式語言)，以下為三種常見的代碼：
 

  • HTML – 網站在說什麼 (標題、主要內容…等)
  • CSS – 網站的外觀 (顏色、字型…等)
  • JavaScript – 網站的行為 (互動、特效內容…等)

HTML：網站說了什麼

HTML代表超文本標記語言(hypertext markup language)，這是網站的基礎，網頁的標題、段落、列表和內容等元素均在HTML中定義，HTML對於SEO來說很重要，因為它用來創建或處理的任何頁面。雖然你的CMS 「Content Management System 內容管理系統」，也就是我們常稱的「後台系統」，可能不需要用HTML編寫網頁( 例如：選擇「超鏈接」可讓你不需要輸入“a href =”就可以創造連結 ) ，但是每次對網頁進行操作（例如添加內容、更改內部連結的錨點名稱...等）時，都是在修改HTML的內容，Google爬取這些HTML的元素來決定你的內容與特定搜尋問題有多少相關性？也就是說，HTML裡的內容在你的網站排名扮演很重要的角色。


(這是從W3schools.com擷取的畫面，是個學習HTML、CSS和 JavaScript的好網站。)

CSS：網站的外觀

CSS代表「Cascading Style Sheets」，設置你的網頁字體、顏色和佈局，創建HTML是為了描述網頁內容，而不是設定樣式，所以使用CSS，可以「美化」網頁，無需將樣式手動編碼到每個頁面的HTML中。

直到2014年，Google的索引系統才開始更真實的瀏覽網頁，而不只是純文本的瀏覽，黑帽SEO 早期試圖利用Google較早的索引系統，使用CSS隱藏文字和連結，藉此操控搜尋引擎的排名，這種「隱藏文字與連結」的作法違反了Google的品質原則。

SEO應該要特別注意的CSS組合：
 

  • 由於樣式指令可以存在於外部樣式表文件（CSS文件）中，而不是網頁的HTML中，因此可以減少頁面的程式碼數量，減小文件傳輸大小並縮短下載時間。
  • 網頁速度也是SEO排名因素之一，所以瀏覽器必須下載【CSS壓縮文件】之類的資源，壓縮它們讓網頁下載更快。
  • 網頁的純內容要比CSS程式碼還多，讓搜尋引擎可以更好地索引你的網站內容。
  • 使用CSS隱藏網址連結和文字內容會讓你的網站受到處罰，並可能從Google索引中刪除。

JavaScript：在網站的表現方式

在網路出現的早期，網頁是使用HTML構建的，當CSS出現時，就開始可以美化網頁外觀，當JavaScript編程語言出現時，網站不僅可以具有結構和樣式，還可以是動態的【JavaScript 特效網頁】。

JavaScript為非靜態頁面創建了很多機會，當有人嘗試訪問使用Javascript加強的網頁效果時，該用戶的瀏覽器將針對伺服器的HTML執行JavaScript，產生互動。

你肯定已經看過JavaScript的應用了，只是還不知道哪一個是它！JavaScript幾乎可以對網頁執行任何操作，例如，它可以建立一個彈出視窗，也可以請求第三方資源（例如廣告）顯示在你的網頁上。

在"用戶端"與"伺服器端"的運行

不過，JavaScript可能會給SEO帶來一些問題，因為搜尋引擎對JavaScript的瀏覽方式與訪客方式完全不一樣，這是因為JavaScript有可能在"用戶端"運行與"伺服器端"運行現有關，大多數JavaScript是在"用戶端"的瀏覽器中執行，但是在另一端，程式也在"伺服器端"上運行，並將運行結果完整顯示到瀏覽器上。

如果SEO重要的網頁元素（例如內容、連結和標記）是透過JavaScript下載到用戶端的，而不是用HTML，那這些重要網頁元素在網頁程式碼上無法看見的，直到最後使用JavaScript運行顯示出來。這意味著搜尋蜘蛛會看不到你的JavaScript中的內容，至少在第一次抓取時是看不到的。

Google表示，只要你不阻止Googlebot抓取JavaScript文件，通常它們可以像瀏覽器一樣呈現和理解你的網頁，這表示Googlebot應該可以與用戶看到一樣的東西，但是，因為用戶端的JavaScript這種「第二次索引」，Google可能會錯過某些僅在執行JavaScript後才可用的元素。

在「Google網頁蜘蛛」呈現網頁的過程中，還有其它地方可能也會出錯，這會阻止Google了解JavaScript中的內容：

  • 阻止Google網頁蜘蛛抓取JavaScript內容（例如，使用robots.txt）。
  • 伺服器無法處理全部網頁網頁內容。
  • JavaScript太複雜或過時，「Google網頁蜘蛛」將無法理解。
  • 在「Google網頁蜘蛛」抓取完成網頁後，JavaScript才將內容「延遲載入」到網頁中。
因此雖然JavaScript確實為網頁增加了更多的可能性，但是如果使用不小心，也會對你的SEO造成嚴重影響。

幸運的是，有一種方法可以檢查Google是否與你的訪問者看到相同的事物。要查看「Google網頁蜘蛛」看到的網頁，請使用Google 站長工具的「網址審查」工具。只需將頁面的URL貼到GSC欄位中。

「Google網頁蜘蛛」抓取你的網址後，請點擊「查看測試頁面」，來查看你的網頁如何被抓取和呈現。

點擊 HTML旁邊的「螢幕截圖」標籤，即可顯示「Google網頁蜘蛛」對於智慧型手機如何呈現你的網頁。

你將看到「Google網頁蜘蛛」如何看抓取你的網頁以及瀏覽者所呈現網頁方式，在「更多信息」標籤中，Google還會顯示無法獲取的網址資源列表。

網站的工作方式是我們接下來要討論的內容了的基礎：運用優化的技術可幫助Google容易了解你的網頁。

搜尋引擎如何了解你的網站

想像一下，當搜尋蜘蛛正在掃描有關如何烤蛋糕的10,000字的文章，你如何分辨作者、食譜、食材及烤蛋糕的步驟呢？這裡就是【schema標記】的用途，它可以為搜尋引擎更具體地分類網頁上是哪種類型的訊息。

「schema 標記」是一種標記或組織內容的方法，以方便搜尋引擎可以更好地了解網頁上的某些內容性質，這段程式碼可以將你的資料結構化，通常稱為「結構化資料」，將資料結構化的過程稱為「標記」，因為你正在使用「schema 」程式碼來標記你的網頁內容。

【JSON-LD 標記方式】是Google首選的schema標記（2016年5月宣布），Bing也支持。要查看數千種可用「schema 標記」的完整列表，或是想了解有關如何實施結構化資料的更多訊息，可以到 Schema.org 或查看【Google結構化資料指南】，來執行最適合你的網頁結構化資料，在使用可以使用【Google的結構化資料測試工具】來測試標記是否正確。

除了協助Google之類的搜尋蜘蛛了解特定內容的含義外，「schema 標記」還可以讓SERP中的頁面有特殊功能，這些特殊功能稱為「精彩摘要」。
它們是這樣的：

  • 熱門故事輪播
  • 明星評論
  • 網站附屬連結
  • 食譜
使用結構化資料雖然可以協助顯示更豐富的摘錄，但不能保證一定都會出件，現在隨著「schema 標記」使用增加，未來可能會添加更多其它類型或功能的網頁摘要。

成功使用schema的最後建議：
  • 你可以在網頁上使用多種類型的schema標記：但是如果你標記其中一項元素(例如產品)，那在你的網頁上所列的其他產品，也需要被標記。
  • 不要標記訪客看不到的內容，並遵守【Google的品質指南】：例如：你將評論的結構化標記添加到網頁，確保它們可以在網頁中被訪客見到。
  • 如果網頁重複，Google會要求你用結構化標記(不只是規範)標記出每個重複頁面。
  • 在結構化資料網頁上提供原創內容及更新內容。
  • 結構化標記應準確反映你的網頁。
  • 使用最合適的類型的schema架構標記你的網頁內容。
  • 標記的評論不應該由公司商家撰寫，應該來自無償的實際用戶所回饋的評論。

向搜尋引擎規範化你的主要網頁

當搜尋蜘蛛抓取不同網頁但是內容相同，會不知道將哪一張網頁編入索引，因此發明了rel="canonical"，協助搜尋引擎更好地索引最好版本的頁面，而不是收錄所有重複頁面。

rel="canonical"標籤讓你可以告訴搜尋引擎原創的內容在哪裡，因此，如果你想重新發佈原創內容的一部份，無論是精確或略作修改，但又不想冒著創建重複內容的風險，可以使用規範標籤。

正確的規範確保你的網站內容都是獨特，且只有一個URL，為了防止搜尋引擎收錄單一網頁的許多版本，Google建議你的網站中的每一頁使用自我規範標籤 ，如果沒有使用規範標籤的網頁，Google可能會將網頁零散的索引。

「避免重複頁面」是眾所皆知的網頁規範！Google會想要獎勵獨特、有價值的網站，因為搜尋引擎想要提供最好的使用者經驗，它們很少會提供相同的內容，會優先選擇有規範版本的網頁，如果沒有規範標籤，搜尋引擎便會呈現最有可能是原創內容的版本。

因為排序或過濾選項，確實很容易會產生多個重複內容網頁。以購物網站為例，有可能會有很多搜尋方式來縮小範圍來找到想要的產品，像是「排序分類」功能，就會將產品價格從低價至高價重新排列搜尋結果，並加入更多排序或過濾選項，像是顏色、尺寸、材質、品牌……等，所以必須思考一下將建立主要產品類別的網頁與其它變體的區別！

如果想了解更多關於重複網頁的資訊可以參考這裡【熊貓演算法中的重複頁面】

用戶如何與網站互動

「搜尋引擎優化SEO」的內容不僅關於搜尋引擎優化，人們的搜尋意圖、行為等也是「搜尋引擎優化SEO」的方向，因為搜尋引擎的存在就是用來服務搜尋者，這個目標解釋了為何Google演算法，獎勵提供搜尋者最佳經驗的網站，與為什麼有些網站雖然又很多高權重的反向連結但是在搜尋上表現卻不佳。

當我們了解如何可以把網站的使用者體驗提升到最好，我們就可以活用這些經驗，讓搜尋功能大幅提升。

為行動裝置訪客提供正面的使用者體驗

如今，超過一半的網絡流量都來自行動裝置，更實際的說，你的網站現在應該要更容易、方便的在移動裝置上被瀏覽。2015四月，Google更新了演算法，會在非行動裝置的網頁上推廣對行動裝置網頁友善，因此，如何確保你的網站是對行動裝置友善的呢？雖然有其它三種方式可以將你的網站設置成行動版，但【Google建議使用響應式網站】。

響應式設計

響應式網站是設計成不論訪客使用哪種尺寸的螢幕，網站都可以適合瀏覽者使用，你可以使用CSS語法「回應」裝置尺寸並提供適合瀏覽的方式，這可以避免訪客需要雙擊或觸碰放大才能看清楚網站內容，如果不確定你的網頁是不是對行動裝置友善？可以使用Google的【行動裝置相容性測試】。

AMP

AMP代表加速移動頁面(Accelerated Mobile Page)，用來加速行動網頁會比非移動裝置網頁快上很多，AMP能夠快速地傳遞內容，是因為AMP從其緩存伺服器（而不是原始網站）傳遞內容，以及使用HTML和JavaScript的特殊AMP版本。【學習更多AMP】

行動優先索引

2018年Google的索引開始從網站改至行動優先，這項聲明改變可以消除目前混淆的桌上型網站與行動裝置網站優先性，由於確定為行動優先索引，Google會先爬取及索引你的網頁的行動裝置版，讓你的網站與行動裝置螢幕相容，對使用者與搜尋都有好處，但是行動優先索引與行動友好度無關。

這也引起對於桌上型網站的一些憂慮，像是桌上型網站與行動裝置網站可能顯示不同內容、導航、連結等，不同連結的行動裝置的網站，有可能讓Googlebot轉變成爬取行動版網站，這會讓網站權重送至其他網頁。

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

Google希望網站能提供能讓訪客快速下載的內容，我們希望盡快閱讀網站內容，當我們覺得網站太慢時，很可能會馬上回到「搜尋結果頁面SERP」再找更好、更快的網頁，所以網站速度是網站內「搜尋引擎優化SEO」的重點項目。我們可以利用以下工具加強網頁速度。

圖片是網頁變慢主要元兇之一！

如同第四章說明，圖片是造成網頁變慢主因，除了壓縮圖片、以alt文字優化圖片、選擇正確圖片格式，以及提交圖片的網站地圖之外，還有其它方式可以優化你的網頁速度，改善圖片傳遞的一些方法如下：

1. SRCSET：如何為每個裝置提供最佳圖片尺寸

SRCSET讓你能擁有多種版本的圖片尺寸，讓你在不同情況下使用不同的尺寸的圖片，這種代碼加在HTML裡的 img 標籤，為不同尺寸的裝置提供獨特的圖片。

這有點像是先前討論的響應式設計，但SRCSET是針對圖片而已。

藉由為不同尺寸的裝置提供不同尺寸的圖片，不僅能加快讀取圖片的速度，也能優化頁面上的使用者經驗。



2. 透過延遲下載顯示訪客的圖片下載中

當你去一個網頁，會發生延遲下載。不是看到空白的圖像，而是在下載周圍的文本，先顯示其位置上的色塊或低解析度的圖片。幾秒後便會完全顯示圖片的完整版本。

低解析度的圖片會先被下載，再下載高解析度的圖片。這有助於優化關鍵途徑的呈現。所以當你網頁上所有資源被下載，先顯示低解析度的圖片可以告訴使用者圖片正在下載中。更多有關於延遲下載顯示圖片的資訊，可以參考【Google的延遲下載指南】。

通過壓縮和合併文件來提高速度

頁面速度審核通常會提出像「減少資源」之類的建議，透過刪除換行符號和空格之類的內容來壓縮程式碼文件，在可能的情況下程式碼將變數名稱改成縮寫。

「合併」是你在提高網頁速度方面常見的術語，合併過程是將一堆相同的編碼語言文件合併為一個文件，例如，一堆的JavaScript文件可以整理後統一放在文件裡，用來減少瀏覽器裡JavaScript的文件數量，通常整理後可以減少許多需要下載文件數量，並提高網頁速度。

改善國際使用體驗「國際化SEO」

針對多個國家/地區的使用者為目標的網站需要熟悉國際SEO的作法，以提供最好的瀏覽網站體驗，沒有這些優化，國際訪客可能很難找到適合他們的版本網站。

•語言：以多種語言為目標的網站被視為多語言網站。這些網站應添加hreflang標籤，以向Google顯示你的頁面已複製另一種語言。【學習更多 hreflang】

•國家：針對多個國家/地區的受眾的網站稱為多區域網站，它們應該選擇一個URL結構，以便輕鬆地將其網域或頁面定位到特定國家/地區，這可以包括使用國家代碼的頂級網域名（ccTLD）（例如「.ca」代表加拿大），或在國家/地區頂級網域名（gTLD）中使用國家/地區特定的子文件夾，例如“example.com/ca”用於加拿大。

歡迎推廣本文，請務必連結(LINK)本文出處：轉角SEO公司

回上頁