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

這個大概是用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 是採用 GoogleFacebook建議的Reverse DNS 與 IP whitelist來判斷爬蟲的話,我還真有可能會以為是使用了 Server Side Rendering 的技術!

Facebook 外掛整合

Share: