SPA SEO

I am Blue Web engineer @ YouMeb

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

SEO 基礎

Web Crawler

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

！ SEO crawler 並⾮非很聰明

<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)

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

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

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

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

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

從網址下⼿手(無hash) 2. <meta name=”fragment” content=”!”> 請在<head>加⼊入： www.example.com?_escaped_fragment_=mystate (以google crawler 為例)

AngularJS解法 3. 有hash: 無hash: <meta name=”fragment” content=”!”>

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

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

Make SPA app SEO friendly

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

<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’});

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

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

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

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

⼀一台 nodejs server 直接來

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

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

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

live demo

如何⾃自動化部屬SEO內容

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

！那網站內容呢？

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

$ npm install grunt-html-snapshot

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

live demo

溫馨⼩小提醒

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

SPA SEO

SPA SEO

More Decks by blue chen

Other Decks in Technology

Featured

Transcript