Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPA SEO
Search
blue chen
February 27, 2014
Technology
12
830
SPA SEO
at Happy designer meetup 2014.02.27
blue chen
February 27, 2014
Tweet
Share
More Decks by blue chen
See All by blue chen
RelaJet Caption
iamblue
0
100
The future of hearing device - 聽覺領域新的機會及挑戰
iamblue
2
240
20180918-Digitime 導入MCU設計 催熟智慧語音辨識應用市場
iamblue
0
210
Pixnet hackthon - workshop
iamblue
0
99
AI 人工智慧學校分享
iamblue
0
380
Javascript -Full stack 物聯網開發
iamblue
0
120
MCS Lite 私有雲物聯網開發
iamblue
0
290
Blockchain for IoT 應用
iamblue
1
210
2017.01.16 Embedded system
iamblue
0
91
Other Decks in Technology
See All in Technology
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
300
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
130
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
47
19k
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.9k
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
120
Lazy application authentication with Tailscale
bluehatbrit
0
210
怖くない!はじめてのClaude Code
shinya337
0
390
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
9
4.2k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
It's Worth the Effort
3n
185
28k
Designing Experiences People Love
moore
142
24k
Typedesign – Prime Four
hannesfritz
42
2.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Become a Pro
speakerdeck
PRO
29
5.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Transcript
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請求流程
None
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
None
網站圖⽚片截圖:https://github.com/clkao/prerender-opengraph-image
live demo
溫馨⼩小提醒
⽤用nginx 知此知彼 https://support.google.com/webmasters/answer/164734?hl=zh-Hant 了解 SEO也要了解 search engine policy
End.