Slide 1

Slide 1 text

I am Blue Web engineer @ YouMeb

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

SEO 基礎

Slide 4

Slide 4 text

Web Crawler

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

！ SEO crawler 並⾮非很聰明

Slide 7

Slide 7 text

這是title

Hello World!

{{ title }} //do some ajax awesome thing.. 靜態網⾴頁(無ajax) 靜態網⾴頁(有ajax)

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

AngularJS解法 3. 有hash: 無hash:

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Make SPA app SEO friendly

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

<%= title %>

Hello World!

當餵給crawler前，SEO Data 被先在server端印好輸出 Nodejs EJS hello

Hello World!

Nodejs 印出這些變數 crawler res.render({title:’hello’});

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

⼀一台 nodejs server 直接來

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Nginx設定你的處理SEO data render Nodejs server位置因為各家的crawler發出請求格式不⼀一  最好⽅方式是⽤用user agent在經過nginx時過濾

Slide 29

Slide 29 text

live demo

Slide 30

Slide 30 text

如何⾃自動化部屬SEO內容

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

！那網站內容呢？

Slide 33

Slide 33 text

html-snapshots 1. use phantomJS 2. ⽀支援輸出 sitemap.xml,   robots.txt,   arbitrary input 3. 有grunt版本

Slide 34

Slide 34 text

$ npm install grunt-html-snapshot

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

live demo

Slide 38

Slide 38 text

溫馨⼩小提醒

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

End.