Dcard – 前端框架網站( AngularJS )的搜尋引擎優化( SEO )挑戰

本篇文章更新時間：2019/02/16
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。

這個大概是用JavaScript開始寫 WebApp 之後就會想到要怎麼突破比較好的一個主題。

有寫過 WebApp 而且是以 前端網站框架(JavaScript) 為主的話，會在 SEO 上發現一件事，就是

Google 跟 Facebook 都認不出他的樣子阿阿阿阿！

對，沒錯。 爬蟲( Crawler )在動作的時候還沒有辦法這麼強(#1, #2)的把你前端框架的程式碼都照著跑(render)一次來分析該網站/頁面的內容。

除非...

1. 就是像Google #1 的說明那樣，餵給他(Crawler)一個頁面快照(snapshot)吧！
2. Google另一個方法是說可以follow一種開發方式: Hijax

Hijax技術是將網站中URL資源在Server side做點手腳，如果是來自於xhr請求就只給部分內容，如果是一般請求就是將該頁面完整的render出來

方法一是最直覺的解法，方法二可以說是最工程的解法了。

但是!! 考量過系統開發與分工細節後，方法二的部分就會變的很複雜，相較於方法一就快速簡單的多。而且我目前除了Google與Facebook有看到在follow方法二這樣的做法，其他就還沒看到過。

標題舉例的 Dcard ，這個以學生族群為主的匿名交友平台是個很有意思的網站，雖說還沒有辦過帳號進去體驗，但程式人喜歡看另一種東西叫原始碼XD

Dcard 個人分析是使用 NodeJS 當server side，前面使用 Nginx 做 Reverse Proxy + Load Balancer(軟體部份的猜測)，前端搭配 AngularJS 框架開發，架在Linode上(怎記得之前在AWS上!?)

重點是，這樣的內容網站怎麼可以跟搜尋絕緣呢？ 所以這邊觀察到系統是使用 User-Agent controller 的機制，判斷來源是否為爬蟲後再選擇要吐甚麼樣的資料

//餵給FB看的
curl -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://www.dcard.tw > ForFB.txt
//餵給可以執行JS框架的瀏覽器看的
curl -A "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36" https://www.dcard.tw > ForChrome.txt

上面兩段指令執行下去比較看看檔案就知道囉！

與其說做網站的snapshot，還不如做這樣重點式的攻擊來的簡單漂亮，更有趣的事是從早期分享時只有個官方LOGO，到現在連自動內文做 meme 也有了，上傳於 imgur 來當分享文的圖。 Very cool. (這邊測試時發現重新產生meme會有跑版的問題)

不過說實在，如果今天 Dcard 是採用 Google 與 Facebook建議的Reverse DNS 與 IP whitelist來判斷爬蟲的話，我還真有可能會以為是使用了 Server Side Rendering 的技術！