how to make your app google bot friendly
DESCRIPTION
Presentation by Vyacheslav Potravnyy for Odessa Happy New Front-End event. Find inside: SEO methods in single-page applications, how to render apps, full stackTRANSCRIPT
![Page 1: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/1.jpg)
SEO methods in Single-Page Applications
Or how to make your app Google bot friendly
![Page 2: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/2.jpg)
Вячеслав ПотравныйVyatcheslav Potravnyy
Front-End Team Lead at
![Page 3: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/3.jpg)
http://bit.ly/seo-js
![Page 4: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/4.jpg)
What is a problem?
![Page 5: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/5.jpg)
How SPA works for user?
1. User opens http://blog.ru/index.html#/articles/1
2. Emtpy index.html loading with links on JS
3. User loads an App (all JavaScript code)
4. Router starting - here we know about #/articles/1
5. Models starting and downloads JSON’s
6. Views starting and renders templates
7. PROFIT! User see the content
![Page 6: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/6.jpg)
How SPA works for Google bot?
1. Bot opens http://blog.ru/index.html#/articles/1
2. Emtpy index.html loading with links on JS
![Page 7: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/7.jpg)
What is the solution?
![Page 8: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/8.jpg)
What does Google advice?
1. Bot see URL .../index.html#!/articles/1
2. Bot knows it’s AJAX site, and does not use this URL.
It uses .../index.html?_escaped_fragment_=/articles/1
3. We handle this on server, and send rendered HTML
4. Bot associates this page with original URL
5. PROFFIT!
![Page 9: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/9.jpg)
But if we have no hashbang?
1. Bot downloads page .../index.html
2. Bot sees <meta name="fragment" content="!">
3. Bot downloads .../index.html?_escaped_fragment_=
4. Server rendering
![Page 10: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/10.jpg)
How to render App?
![Page 11: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/11.jpg)
1. Write all on server framework
As webapps used to be written years ago.
![Page 12: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/12.jpg)
2. Write content parts on server framework (like Twitter)
+ Native solution
+ User gets content fast
- Rewrite a lot
- Duplicate code
- Complexity grows
- Only main content indexed
- No longer a frontend app
![Page 13: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/13.jpg)
3. Run in browser and save HTML
+ Not a lot of work
+ Architecture independed
+ Bot gets the same page
- Slow and hard for server
![Page 14: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/14.jpg)
Manually?!
❏ HtmlUnit❏ crawljax❏ watij
No. Headless browser
❏ Phantom JS
![Page 15: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/15.jpg)
How does this work?
1. Bot request .../index.html?_escaped_fragment_=/page
2. We filter this request to another route
3. We run headless browser with original URL
4. Let all requests be finished
5. Get final HTML from headless browser
6. Remove <scripts> from HTML
7. Response to Google bot
8. PROFIT!
![Page 16: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/16.jpg)
![Page 17: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/17.jpg)
![Page 18: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/18.jpg)
What can be improved?
1. Rendering delay
a. Make on CRON and save on disk
b. Cache with nginx or Varnish
2. Loading detection
a. Wait for all requests
b. Flag on body
c. App event, handled on Node.js side
![Page 19: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/19.jpg)
What about future?Full-stack
(aka Isomorphic)
![Page 20: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/20.jpg)
Benefits
1. Both server & client written in one language - JS
2. You can reuse generic code on server & clients
3. Server-side rendering for SEO & performance?
4. Simply create two-way API’s
![Page 21: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/21.jpg)
Derby.js
![Page 22: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/22.jpg)
1. SEO from the box
2. Huge localization abilities
3. Device adaptiveness abilities
4. Production-ready
5. Based on YUI
![Page 23: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/23.jpg)
1. Almost Backbone
2. Very light and flexible
3. SEO from the box
4. Its framework, not a plug-in library
5. Too simple for huge apps
![Page 24: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/24.jpg)
Meteor.js
1. Access to data from everywhere
2. 2-way API with Latency Compensation
3. Simple dive-in
4. Biggest community
5. Own packages instead of NPM
6. SEO through phantom.js
![Page 25: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/25.jpg)
Atma.js
1. SEO from the box
2. Component ideology
3. Complex solution - lot of tools
4. No community yet
5. No documentation yet
![Page 26: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/26.jpg)
Derby.js
1. SEO from the box
2. User gets HTML at very start
3. 2-way API and Realtime Collaboration
4. Most “smart”
5. Built on other open-source components
6. Hard to dive-in
7. Deps Redis & MongoDB
![Page 27: How to make your app Google bot friendly](https://reader033.vdocuments.us/reader033/viewer/2022052904/55838aa8d8b42a9e528b4835/html5/thumbnails/27.jpg)
Questions?
Vyatcheslav Potravnyy
Happy New Front-end!by Geeks Lab
(January 18, 2014)
Sources:
Google SpecificationBackbone TutorialsThe Digital SelfYear of MooDerby.js