SPA SEO

at Happy designer meetup 2014.02.27

Transcript

1. I am Blue Web engineer @ YouMeb
2. ⽤用nginx 1. SEO基礎 本⽇日⼤大綱 2. How to make SPA app SEO friendly 3. 如何⾃自動化部屬SEO內容? 4. 溫馨⼩小提醒
3. SEO 基礎
4. Web Crawler
5. 講到蜘蛛...我就想到.... 三級的天擎坦克被它摧毀了T.T 蜘蛛好像很厲害？
6. ！ SEO crawler 並⾮非很聰明
7. <html> <head> <title>這是title</title> </head> <body> <h1>Hello World!</h1> </body> </html> <html> <head> <title>{{ title }}</title> </head> <body> <script> //do some ajax awesome thing.. </script> </body> </html> 靜態網⾴頁(無ajax) 靜態網⾴頁(有ajax)
8. So…要如何告訴這些 Crawler 你的網站是⽀支持AJAX呢？
9. www.example.com/ajax.html#mystate 網址有兩種 ！ www.example.com/mystate 無hash: 有hash: 如何告訴這些 Crawler 你的網站是⽀支持AJAX呢？ www.example.com/#/mystate
10. www.example.com/ajax.html#mystate 從網址下⼿手(有hash) 1. www.example.com/ajax.html#!mystate
11. www.example.com/ajax.html#!mystate 當 Crawler 收到要爬這段網址內容時 www.example.com/ajax.html?_escaped_fragment_=mystate 會對你的server發⼊入下列request (以google crawler 為例)
12. www.example.com/ajax.html?_escaped_fragment_=mystate 你的server接受到這樣的訊息時 回傳 crawler 對應的 SEO Data page/內容 (以google crawler 為例)
13. 從網址下⼿手(無hash) 2. <meta name=”fragment” content=”!”> 請在<head>加⼊入： www.example.com?_escaped_fragment_=mystate (以google crawler 為例)
14. AngularJS解法 3. 有hash: 無hash: <meta name=”fragment” content=”!”>
15. ！ ⽩白話理解 crawler 對server請求流程
17. google/facebook crawler your app server www.example.com/mypage#!home 會發出⼀一段特殊的請求網址 回傳 SEO data rendering page
18. Make SPA app SEO friendly
19. 多數的語⾔言 framework 框架 SPA SEO 解決⽅方案
20. <html> <head> <title><%= title %></title> </head> <body> <h1>Hello World!</h1> </body> </html> 當餵給crawler前，SEO Data 被先在server端印好輸出 Nodejs EJS <html> <head> <title>hello</title> </head> <body> <h1>Hello World!</h1> </body> </html> Nodejs 印出這些變數 crawler res.render({title:’hello’});
21. 每個使⽤用者進來都會先經過SEO data Output 缺點 浪費資源
22. 加上...如果前端的⾴頁⾯面只是靜態檔案怎辦？ (像是yeoman產⽣生的app)
23. 還是要有⼀一個東⻄西去處理餵給crawler SEO data 2. 架⼀一個nodejs server 處理(網址複雜) 1. 直接nginx指向(網址簡單) 3. nodejs+nginx
24. 直接nginx處理 但網址複雜很⿇麻煩
25. ⼀一台 nodejs server 直接來
26. nginx + nodejs nginx 過濾來⾃自crawler 還是 user ? nodeJS 處理rending page
27. nginx 靜態⾴頁⾯面路徑 SEO server ⼀一般使⽤用者 crawler nodejs server 處理 SEO data render
28. Nginx設定 你的處理SEO data render Nodejs server位置 因為各家的crawler發出請求格式不⼀一
 最好⽅方式是⽤用user agent在經過nginx時過濾
29. live demo
30. 如何⾃自動化部屬SEO內容
31. ⽤用nginx facebook . google friendly SEO data內容 image, title,url, description,og系列
32. ！ 那網站內容呢？
33. html-snapshots 1. use phantomJS 2. ⽀支援輸出 sitemap.xml, 
 robots.txt, 
 arbitrary input 3. 有grunt版本
34. $ npm install grunt-html-snapshot
36. 網站圖⽚片截圖：https://github.com/clkao/prerender-opengraph-image
37. live demo
38. 溫馨⼩小提醒
39. ⽤用nginx 知此知彼 https://support.google.com/webmasters/answer/164734?hl=zh-Hant 了解 SEO也要了解 search engine policy
40. End.