SPA SEO

at Happy designer meetup 2014.02.27

Transcript

1. I am Blue
   Web engineer @ YouMeb
   

   View Slide

2. ⽤用nginx
   1. SEO基礎
   本⽇日⼤大綱
   2. How to make SPA app SEO friendly
   3. 如何⾃自動化部屬SEO內容?
   4. 溫馨⼩小提醒
   

   View Slide

3. SEO 基礎
   

   View Slide

4. Web Crawler
   

   View Slide

5. 講到蜘蛛...我就想到....
   三級的天擎坦克被它摧毀了T.T
   蜘蛛好像很厲害？
   

   View Slide

6. ！ SEO crawler 並⾮非很聰明
   

   View Slide

7. 
   
   
   
   這是title
   
   
   
   
   
   Hello World!
   
   
   
   
   
   
   
   
   
   {{ title }}
   
   
   
   
   
   <br/> <br/> <br/> //do some ajax awesome thing.. <br/> <br/> <br/>
   
   
   
   
   
   靜態網⾴頁(無ajax) 靜態網⾴頁(有ajax)
   

   View Slide

8. So…要如何告訴這些 Crawler 你的網站是⽀支持AJAX呢？
   

   View Slide

9. www.example.com/ajax.html#mystate
   網址有兩種
   ！
   www.example.com/mystate
   無hash:
   有hash:
   如何告訴這些 Crawler 你的網站是⽀支持AJAX呢？
   www.example.com/#/mystate
   

   View Slide

10. www.example.com/ajax.html#mystate
    從網址下⼿手(有hash)
    1.
    www.example.com/ajax.html#!mystate
    

    View Slide

11. www.example.com/ajax.html#!mystate
    當 Crawler 收到要爬這段網址內容時
    www.example.com/ajax.html?_escaped_fragment_=mystate
    會對你的server發⼊入下列request
    (以google crawler 為例)
    

    View Slide

12. www.example.com/ajax.html?_escaped_fragment_=mystate
    你的server接受到這樣的訊息時
    回傳 crawler 對應的 SEO Data page/內容
    (以google crawler 為例)
    

    View Slide

13. 從網址下⼿手(無hash)
    2.
    
    請在加⼊入：
    www.example.com?_escaped_fragment_=mystate
    (以google crawler 為例)
    

    View Slide

14. AngularJS解法
    3.
    有hash:
    無hash:
    
    

    View Slide

15. ！ ⽩白話理解 crawler 對server請求流程
    

    View Slide

16. View Slide

17. google/facebook
    crawler
    your app server
    www.example.com/mypage#!home
    會發出⼀一段特殊的請求網址
    回傳 SEO data rendering page
    

    View Slide

18. Make SPA app SEO friendly
    

    View Slide

19. 多數的語⾔言 framework 框架 SPA SEO 解決⽅方案
    

    View Slide

20. 
    
    
    
    <%= title %>
    
    
    
    
    
    Hello World!
    
    
    
    
    
    當餵給crawler前，SEO Data 被先在server端印好輸出
    Nodejs EJS
    
    
    
    
    hello
    
    
    
    
    
    Hello World!
    
    
    
    
    
    Nodejs 印出這些變數
    crawler
    res.render({title:’hello’});
    

    View Slide

21. 每個使⽤用者進來都會先經過SEO data Output
    缺點
    浪費資源
    

    View Slide

22. 加上...如果前端的⾴頁⾯面只是靜態檔案怎辦？
    (像是yeoman產⽣生的app)
    

    View Slide

23. 還是要有⼀一個東⻄西去處理餵給crawler SEO data
    2. 架⼀一個nodejs server 處理(網址複雜)
    1. 直接nginx指向(網址簡單)
    3. nodejs+nginx
    

    View Slide

24. 直接nginx處理
    但網址複雜很⿇麻煩
    

    View Slide

25. ⼀一台 nodejs server 直接來
    

    View Slide

26. nginx + nodejs
    nginx 過濾來⾃自crawler 還是 user ?
    nodeJS 處理rending page
    

    View Slide

27. nginx
    靜態⾴頁⾯面路徑
    SEO
    server
    ⼀一般使⽤用者
    crawler
    nodejs server 處理 SEO data render
    

    View Slide

28. Nginx設定
    你的處理SEO data render Nodejs server位置
    因為各家的crawler發出請求格式不⼀一

    最好⽅方式是⽤用user agent在經過nginx時過濾
    

    View Slide

29. live demo
    

    View Slide

30. 如何⾃自動化部屬SEO內容
    

    View Slide

31. ⽤用nginx
    facebook . google friendly
    SEO data內容
    image, title,url, description,og系列
    

    View Slide

32. ！ 那網站內容呢？
    

    View Slide

33. html-snapshots
    1. use phantomJS
    2. ⽀支援輸出
    
    sitemap.xml, 

    robots.txt, 

    arbitrary input
    3. 有grunt版本
    

    View Slide

34. $ npm install grunt-html-snapshot
    

    View Slide

35. View Slide

36. 網站圖⽚片截圖：https://github.com/clkao/prerender-opengraph-image
    

    View Slide

37. live demo
    

    View Slide

38. 溫馨⼩小提醒
    

    View Slide

39. ⽤用nginx
    知此知彼
    https://support.google.com/webmasters/answer/164734?hl=zh-Hant
    了解 SEO也要了解 search engine policy
    

    View Slide

40. End.
    

    View Slide