SPA SEO

497b0ae3672631318bc2450ec0c7d87f?s=47 blue chen
February 27, 2014

SPA SEO

at Happy designer meetup 2014.02.27

497b0ae3672631318bc2450ec0c7d87f?s=128

blue chen

February 27, 2014
Tweet

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請求流程

  16. None
  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

  35. None
  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.