FrontendLab: SEO methods in single page applications - Вячеслав Потравный

870 views
637 views

Published on

Published in: Technology, Education
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
870
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
16
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

FrontendLab: SEO methods in single page applications - Вячеслав Потравный

  1. 1. SEO methods in SinglePage Applications Or how to make your app Google bot friendly
  2. 2. Вячеслав Потравный Vyatcheslav Potravnyy Front-End Team Lead at
  3. 3. http://bit.ly/seo-js
  4. 4. What is a problem?
  5. 5. 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
  6. 6. 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
  7. 7. What is the solution?
  8. 8. 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!
  9. 9. 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
  10. 10. How to render App?
  11. 11. 1. Write all on server framework As webapps used to be written years ago.
  12. 12. 2. Write content parts on server framework (like Twitter) + Native solution - Rewrite a lot + User gets content fast - Duplicate code - Complexity grows - Only main content indexed - No longer a frontend app
  13. 13. 3. Run in browser and save HTML + Not a lot of work + Architecture independed + Bot gets the same page - Slow and hard for server
  14. 14. Manually?! No. Headless browser ❏ HtmlUnit ❏ crawljax ❏ watij ❏ Phantom JS
  15. 15. 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!
  16. 16. 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
  17. 17. What about future? Full-stack (aka Isomorphic)
  18. 18. 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
  19. 19. Derby.js
  20. 20. 1. SEO from the box 2. Huge localization abilities 3. Device adaptiveness abilities 4. Production-ready 5. Based on YUI
  21. 21. 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
  22. 22. 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
  23. 23. Atma.js 1. SEO from the box 2. Component ideology 3. Complex solution - lot of tools 4. No community yet 5. No documentation yet
  24. 24. 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
  25. 25. Questions? Sources: Google Specification Backbone Tutorials The Digital Self Year of Moo Derby.js Vyatcheslav Potravnyy Happy New Front-end! by Geeks Lab (January 18, 2014)

×