關於網站架構的框架,與SEO優化有著淵源

更多消息

2019-09-18

關於網站架構的框架,與SEO優化有著淵源

如果你SEO只對真實歷史的名詞演進有興趣,那你可能要去維基百科才能找到比較正確的資料。本故事純屬虛構,如有雷同…應該不太可能會有雷同啦,就讓我們開始吧!假設seo教學使用者拜訪顯示所有留言的頁面,搜尋引擎也能順利地爬到。


 

 


這篇文章的目標是:「只要你有網頁前端的基礎,就能夠搞懂我在說什麼」,如果你搞不懂的話,別擔心,不是你的錯,是我沒寫好。麻煩在下面留言一下讓我知道哪裡可以再改進。
 
接下來我會以主角小明為中心點出發,試著從一段虛擬的故事不斷帶出:「為什麼XXX會出現」、「為什麼我們需要XXX」這些問題。如果你SEO只對真實歷史的名詞演進有興趣,那你可能要去維基百科才能找到比較正確的資料。本故事純屬虛構,如有雷同…應該不太可能會有雷同啦,就讓我們開始吧!
 
小明是一個初學程式的新手,在這之前有用Dreamweaver寫過一些簡單的靜態網頁,對HTML、CSS以及JavaScript都有一些基礎,而朋友們都推薦他去學PHP來補足後端的部分。經過了一個月的苦練之後,小明終於完成了他的第一個後端程式,是一個非常簡單的留言板系統(怕大家傷眼睛,這邊只截給大家看其中一部分)。PHP程式碼、商業邏輯、HTML,全部東西都混在一起做撒尿牛丸,寫了這樣的程式碼之後,小明每次考試都考一百分呢!
 
後來小明又花了整整一個月的時間不眠不休不吃不喝(誇飾法,開玩笑的),終於把整個網站改造成SPA,而且還優化了不少地方,讓整個使用者體驗變得非常非常好。你做了什麼?為什麼在搜尋引擎上面搜尋我們的網站,結果只會出現一大堆看不懂的程式碼?我們的網站SEO做的奇差無比你知道嗎?
 
小明一開始覺得很委屈,他什麼都沒做,怎麼會落得如此下場。但經過左思右想之後,終於發現了癥結點:SPA。由於SPA是由前端的JavaScript動態產生內容,因此如果你對SPA的網站按下右鍵->檢視原始碼,只會看到空蕩蕩的一片,只看得到一個JavaScript檔案跟一些最基本的tag。差別在於使用者接收到HTML的時候,就已經有完整的資料了。
 
舉例來說,假設seo教學使用者拜訪顯示所有留言的頁面,我在Server Side先把所有留言都準備好然後render出來,這樣使用者一收到Response的時候就能夠看到所有留言,搜尋引擎也能順利地爬到。
 
資料來源:數位時代,https://www.bnext.com.tw/article/49172/code-mvc-spa-ssr-html