「動態網頁」跟「靜態網頁」是什麼?對 SEO 有什麼影響?

by 貓熊先生
動態網頁、靜態網頁
動態網頁、靜態網頁

動態網頁是指會隨著變數的改變而產生不同的網頁,這裡的變數很可能是指前端 Ajax 向後端資料庫要求資料並顯示在前端,也有可能是因為伺服器端或是網址的 GET 參數而產生不同的網頁。至於靜態網頁則是指內容幾乎不會變動的網頁,靜態網頁設計相對單純,例如常見的「隱私權政策」頁面就屬於靜態網頁,它的內容幾乎不會變動,除非有人去更新,否則每次進到那個內容頁面都會看見一樣的東西。

一般網站的內容生成幾乎都是動態網頁設計,只有少數頁面會是靜態網頁設計,因為使用者會與網站互動,像是購物車頁面這東西,肯定就是動態網頁,不可能是靜態網頁。至於很多人可能會好奇,動態網頁跟靜態網頁,跟 SEO 有沒有什麼關係?這是本篇文章要探討的主題。

如果你還不知道動態網頁跟靜態網頁的差別,以及動態網頁跟靜態網頁對於 SEO 有沒有什麼影響,本篇文章會有完整教學。

什麼是動態網頁?

根據維基百科對“動態網頁”的定義如下:

動態網頁是一個對所有動態生成與動態更新的網頁的統稱。與傳統的靜態網頁相反,它會因為變數的改變而產生不同的網頁。這既可能是伺服器端生成的網頁,也可能是使用者端生成的網頁,或是兩者的混合。

換句話說,動態網頁因為會跟後端伺服器互動,或是跟前端使用者交互,所以會因為各種變數而生成各種不一樣的內容,這種頁面就叫做動態頁面。

撰寫動態網頁的程式語言也很多,常見的有像是 PHP、Active Server Pages(Asp)、Ruby on Rails…等等。在後端透過程式碼執行完之後,前端就會生成 HTML 網頁給使用者看到,而使用者可能會跟網頁進行交互,這時網頁又會跟後端程式去跟資料庫要資料,因此又生成不同內容,這個就是動態網頁的運作方式。

而使用者在前端跟後端資料庫交互的運作方式,常見的技術名稱叫做 Ajax(Asynchronous JavaScript and XML),指的是一套綜合了多項技術的瀏覽器端網頁開發技術。

AJAX是客戶端與伺服器交換資料的一種方式。AJAX 最大特色就是不用整個頁面更新,而只更新網頁的一小部分,AJAX可以只向伺服器傳送並取回必須的資料,然後改變DOM以更新網頁。

什麼是靜態網頁?

所謂靜態網頁,指的是前端的網頁是 HTML 頁面,而且不會跟後端索取資料庫裡面的資料,而靜態網頁的網址常常以 .html 為後綴。

靜態網頁因為內容幾乎不會變動,無論使用者何時進入這個頁面,看到的內容都是一樣的。

什麼是偽靜態網頁?

由於現在的網址,都已經可以透過後端的設定直接進行修改,於是動態網頁也很可能偽裝成靜態網頁,例如明明是動態網頁,但是網址卻顯示成 xxx.html 這樣的網址,網址結構基本上跟靜態網頁是一樣的。

偽靜態網頁其實說穿了還是動態網頁,只是它改了網址結構,所以看起來像靜態網頁。

動態網頁、靜態網頁,跟 SEO 有什麼關係?

其實現在大多數網站都是動態網頁,例如電商網站,很少能做成靜態網頁,因為要跟前台使用者進行交互,然後再透過 AJAX 技術更新前端內容。

少數適合靜態頁面有像是:隱私權政策、使用條款、關於頁面、智慧財產權聲明頁面、授權頁面…等等,這些頁面的內容,因為都不需要跟使用者進行交互,而且更新頻率非常低,因此非常適合使用靜態頁面。

動態網頁跟靜態網頁,哪個對 SEO 比較友善?

對於 SEO 來說,Google 針對每個不同的網址,都視作一個獨一無二的網頁,因此動態網頁的內容如果有更新,例如增加了一條連結、新增了一段內容…等等,Google 爬蟲爬到該頁面內容有被更新過,就會重新索引該頁面。

所以沒有說動態網頁或是靜態網頁,哪一個就對 SEO 比較有優勢,不過如果你是使用動態網頁,你應該盡量避免使用太多 GET 參數在網址上面,因為這樣可能會有重複內容問題,當你的網頁因為 GET 參數而有大量重複內容頁面時,記得使用 Canonical 來指定你的標準網址。

另外,使用動態網頁,應該注意以下幾點,這是跟 SEO 比較相關的。

1.透過 Ajax 技術向後台資料庫索取的內容,Google 是爬取不到的。

2.透過 Javascript 生成的內容,也可能導致 Google 爬取不到的問題,這是 Javascript SEO 要處理的問題。

關於 JavaScript 搜尋引擎最佳化 (SEO),可以參考 Google 官方說明影片。

動態網頁與靜態網頁 常見問題

動態網頁跟靜態網頁,哪個對 SEO 比較友善?

並沒有這之間的差別。靜態網頁的優勢之一,是它的網址常常會命名為 .html,而動態網頁有時會在網址裡面夾雜很多 GET 參數,導致重複內容問題,或是有過多 Javascript 生成的內容,導致 Google 爬取不到,不過只要能正確處理這些問題,還是可以取得很好的 SEO 成效。

什麼是偽靜態網頁?

現在很多後端架構都採取 MVC 架構,可以在 Router 設定網址的結構,所以明明是動態網頁,網址卻長得像是 xxx.html,這個就是偽靜態網頁,偽靜態網頁其實還是動態網頁。

動態網頁、靜態網頁 總整理

1.動態網頁是指會隨著變數的改變而產生不同的網頁,這裡的變數很可能是指前端使用了 Ajax 技術向後端資料庫要求資料並顯示在前端,也有可能是因為伺服器端或是網址的 GET 參數而產生不同的網頁。

2.靜態網頁則是指內容幾乎不會變動的網頁,靜態網頁設計相對單純,網址常常命名為 .html,或是 .htm。適合用靜態網頁呈現的頁面有像是「隱私權政策」、「使用條款」等等,因為它的內容幾乎不會變動。