隨着網絡廣告的預算愈來愈高，很多商家都目光聚焦於SEO優化上，希望通過一系列SEO優化策略來增加網站的曝光量並促進轉換率。調查顯示：出現於搜索結果首頁的網站，平均能獲得92%的總瀏覽量。

換句話說，網站如果想藉助搜尋器之力，以此獲得更多效益，那就必須能在搜索結果首頁(甚至更高排名)出現。那麼，什麼因素決定網站在搜索結果的排名?本文將介紹如何透過CSS設置來增加搜尋器對網站的好感度，希望對各位有幫助!

▌什麼是CSS?它與HTML有什麼區別?

隨着網頁技術發展，現在的網站可以做到的事情有很多，比如線上購物、觀看電影、存取檔案、線上會議等。當商家有意向進行網站製作時，首要步驟就是搞清楚網站架構的三大要素：

● HTML：決定網頁的「骨架」

HTML(Hyper Text Markup Language)是一種用於網頁製作的標準標示語言，主要負責網頁的結構和內容，例如標題、段落、圖像、鏈接等，以及描述網頁中各個部分的信息和關係。

以下是一個經典的Hello World程式的例子：

* 和之間的文字描述網頁，和之間的文字為可視頁面內容。標記文字定義了瀏覽器的頁面標題。文件標記類型用於HTML5。 如果未進行聲明，瀏覽器會使用「怪異模式」進行彩現。

HTML元素是網站建構的基石，它允許嵌入圖像與對象、用於建立互動式表單和結構化資訊，也可用來在一定程度上描述文件的外觀和語義。HTML的語言形式為尖括號包圍的HTML元素，網頁瀏覽器可以讀取HTML檔案並將其彩現成視覺化網頁，而不是直接將它們顯示在頁面上。

● CSS：形成網頁的「樣貌」

CSS(Cascading Style Sheets)是一種用來為結構化文件(如HTML文件或XML應用)添加樣式(如字型、間距和顏色等)的電腦語言，由W3C定義和維護。

如果說HTML是負責確定網頁中的哪些內容，那麼CSS則是確定以何種外觀形態(大小、粗細、顏色、對齊和位置)來展現這些元素。

CSS不僅可以用於設定頁面佈局、設定頁面元素樣式、設定適用於所有網頁的全域樣式，還可以零散地直接添加在要應用樣式的網頁元素上，也可以集中化內建於網頁、鏈接式引入網頁以及匯入式引入網頁。但需要注意的是，CSS不能單獨使用，而是必須與HTML或XML一起協同工作，為HTML或XML起裝飾作用。

● JavaScript：讓網頁「動」起來

JavaScript(通常縮寫為JS)是一門基於原型和頭等函數的多範式進階直譯程式語言，可支援元素導向程式設計、指令式編程和函式語言程式設計。

以下是一個簡單的JavaScript Hello World：

不同於伺服器端版本語言(如PHP和ASP)，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運行，而不需要伺服器的支援。因此，過去很多設計師比較青睞使用JavaScript來減少對伺服器的負擔，但與此同時這種方式在安全性上容易出現問題。不過，隨着伺服器變得強大，現在的程式員更喜歡運行於伺服器的指令碼以保證安全，但JavaScript仍然以其跨平台、易上手等優勢大行其道。加上，某些特殊功能(如AJAX)必須依賴JavaScript在客戶端提供支援，以及引擎(如V8)和框架(如Node.js)的發展、事件驅動和非同步IO等特性，JavaScript也被逐漸用來編寫伺服器端程式。

【小結】這三種要素之間的區別在於其功能和用途，其中HTML負責網頁的結構和內容，CSS負責網頁的樣式和佈局，而JavaScript則負責網頁的交互和動態效果，因此在網頁開發中，它們通常一起使用，以創建功能豐富、交互性強、外觀精美的網頁。

▌CSS網頁佈局對網站SEO有哪些影響?

一般來說，要讓網站在搜尋結果首頁出現，最為關鍵的就是確保網站持續提供豐富且有價值的內容，藉此為用戶提供良好的瀏覽體驗。當然，你也可以透過Google廣告來增加網站在搜尋結果的曝光，但是從長遠來看，無論是針對SEO優化還是SEM行銷，保證網頁架構完整合理，讓用戶和搜尋器爬蟲都能更高效且順暢地瀏覽或抓取網頁內容，才能有效提高搜尋器行銷成效。

因此，重視CSS設置對網站SEO具有以下優勢：

❶ 可讀性：合理的CSS網頁佈局可以讓頁面的文本、圖片等元素更合理地組合在一起，從而使頁面佈局更加清晰易懂，讓爬蟲更容易索引或解析網站內容。

❷ 頁面速度：雖然頁面加載速度與CSS設置沒有直接的關係，但過於繁瑣的程式編碼不僅影響頁面速度，更有可能影響介面元素的正常呈現，大大損害網站的用戶體驗。

❸ 平衡性：良好的CSS佈局有助於令網站各個元素更加協調和平衡，繼而加強網站整體的視覺效果並延長用戶在網站的停留時間，間接提升網站在搜尋結果的排名。

❹ 適應性：隨着移動設備的使用普及，用戶對頁面佈局的要求也相應增強，利用響應式網頁設計確保網站能夠滿足不同設備的用戶，不僅可以加強網站的用戶體驗，還能節省多版本網站經營和維護的成本及時間。

▌如何透過CSS設置來增加搜尋器對網站的好感度?

據悉，Google預計將在2024年初導入最新的網頁核心體驗指標INP (Interaction to Next Paint)，以取代原來的FID (First Input Delay)指標。

這意味着，未來Google將會把網頁上所有互動都納入至INP的計算範圍，因此在進行網站製作和SEO優化過程中，盡量做好以下幾點：

① 運用CSS預設佔位

瀏覽器往往需要花費額外的時間來載入網站圖片，使用CSS預設佔位為圖片保留對應的空間，可以避免網站在加載過程中所出現的元素位移、錯位等情況，繼而加強網站的用戶體驗，提升搜尋器對網站的好感。

② 運用Critical CSS技術

一般來說，瀏覽器需要先下載並解析CSS文件然後才能顯示，如果CSS文檔太大或網絡環境不佳，自然就會增加瀏覽器的渲染時間。

因此，運用Critical CSS技術提取首屏內容以便盡快向用戶呈現內容，而不是等所有元素全部準備就緒再顯示，可有效提高網頁加載速度、提升網站用戶體驗。此外，盡可能簡化CSS樣式語法以達到期望的排版效果，除了可以縮短瀏覽器緩存頁面檔案的時間外，還可以避免瀏覽器解析重複或不必要的CSS，繼而加快瀏覽器渲染的速度。

③ 掌握CSS相應規則優化行動裝置上的操作體驗

根據Google對頁面在行動裝置上的顯示效果建議：使用CSS排版時，需要注意避免文字太小而影響閱讀;可點選的元素之間距離太近而造成誤觸;內容寬度超出熒屏顯示範圍而影響用戶體驗等。因此，在進行網頁製作過程中，設計師應該要遵循CSS的Media Query規則來優化排版(想知道網站在行動裝置上該如何優化，可透過Seach Console來了解)。

④ 避免非背景圖片設定在CSS當背景

儘管目前搜尋器的技術已經相當只能，但仍無法準確判斷圖片包含的內容，這意味着Alt屬性在SEO優化上佔據非常大的作用。值得注意的是CSS背景圖片是無法設定Alt屬性的，所以如果你非要在CSS採用背景作為圖片呈現的方式，可以使用CSS規則中的object-fit和object-position作相同的替代;或者採用與HTML搭配使用position absolute與padding-top 來完成響應式等比例縮放的圖片顯示。

⑤ CSS字體載入優化

考慮頁面字體時，建議使用Google Font、Adobe Font等系統字體，而非自行上傳字體檔案。因為選擇系統字體可以優化頁面緩存速度，尤其像中文那樣有上萬種不同文字組成，如果全部下載會降低瀏覽器讀取頁面的效率，而Google Font會採用字元拆解的技術，讓用戶僅需下載到有用的字元即可。

總體而言，CSS雖然不會直接影響網站SEO，但它可以通過優化網頁的加載速度、結構、可訪問性和設計等方面來間接SEO，因此在網頁設計及SEO優化過程中，需要重視CSS的設置來提高頁面的質量和網站的用戶體驗!