Optimise your SPA for SEO & Social providers
w/ Angular 2 & Universal

Angular logo Ionic logo

By Sam Vloeberghs / @samvloeberghs

who am i?

Sam Vloeberghs

Sam Vloeberghs
Freelance Software Engineer

Questions? Ask anytime

mail / hangout (sam.vloeberghs)
follow / tweet @samvloeberghs
connect

Problems to solve

  • You want your app to be indexed
  • You want your app to be search engine friendly
  • You want your app to be shareable

The essentials of indexing & SEO

  • The semantic web
  • Well formed & readable URLS
  • A quick response time
  • HTTPS favorited over HTTP
  • Avoid the grayzone

The essentials of social sharing

  • Facebook & LinkedIn use opengraph protocol
    Facebook details / best practices: link
    LinkedIn details / best practices: link


  • Twitter uses it's own standard protocol
    Twitter details / best practices: link

Workarounds (1)

  • Prerender.io
  • Renders the S.P.A. on the server
  • Uses PhantomJS as a headless browser
  • Slow & somewhat in the grey zone

Workarounds (2)

  • Use a serverside language
  • Renders the essential parts on the server
  • Is incomplete, mostly does the meta tags
  • Requires extra implementation on server side

© next example images by Michael Bromley

Isomorphic libraries to the rescue!

ReactJS logo Ember logo Meteor logo Universal logo

.. and others ..

Isomorphic (/Universal)?

  • run on both client-side and server-side
  • seo & social friendly
  • fast rendering & speed
  • better perceived performance

Preboot

  • Record and play back events
  • Respond immediately to certain events
  • Maintain focus even page is re-rendered
  • ..



Thanks to these guys & all other contributors for making it happen so fast!

And for the inspiration for the slides ;)

Demo

Do you or your business care about?

NG-BE 2016

NG BE logo

8-9/12/2016 - Holiday Inn - Ghent Expo

1 day high level workshop
1 day conference

Thank you!

Thaaaaaaanks

Questions? Ask anytime

mail / hangout (sam.vloeberghs)
follow / tweet @samvloeberghs
connect