SEO-friendly Single Page Applications (AngularJS, Prerender.io) by Battlefy Jaime Bueza

Single Page Applications and

SEO / Shareable Content

Jaime Bueza@jbueza

@Battlefy

Tweet #VanAngularJS and mention @Battlefy!

What is ?• eSports management platform that enables

people to easily organize, manage, and watch competitive online gaming...

@jbueza @Battlefy

The ProblemWeb Front-End

• Built as a static site (Just HTML/CSS/JS, CORS to talk to API)

• Sharing out links rendered a blank HTML page with generic titles and descriptions

• Crawlers like Facebook, Slackbot, Twitter, Google have JavaScript disabled, grabbing dynamic content was impossible...until...

@jbueza @Battlefy

Prerender.io

• Plugin middleware for NodeJS, Ruby, Java, .NET.

• Configurations for Apache, Nginx

@jbueza @Battlefy

Angular UI Router

@jbueza @Battlefy

The Solution

Prerender.io

Crawlers

Users

Web Front-End

PhantomJS, Snapshot HTML

Detect Bot Proxy Pass to Prerender

Set snapshot flag to false until ready Set the proper meta info, graph content Set the snapshot flag to true

?_escaped_fragment_=

@jbueza @Battlefy

Facebook before Prerender

@jbueza @Battlefy

Facebook with Prerender

@jbueza @Battlefy

Twitter with Prerender

@jbueza @Battlefy

Google Search Results

@jbueza @Battlefy

@jbueza @Battlefy

@jbueza @Battlefy

In Three Months...

• Google Search Traffic increased by 310.1%.

• 55,000+ pages indexed on Google now which includes Tournaments, Brackets, Teams, Matches, Organizers, User Profiles.

• Facebook referral traffic increased by 449.1%

• Twitter referral traffic increased by 197.4%

@jbueza @Battlefy

• We're Hiring Full Stack Engineers!

• AngularJS, Grunt, SASS, Automated UI Tests

• Continuous Deployment, Git, Docker, NodeJS, AWS, MongoDB, Redis, Elastic Search, Neo4j

• Join our mission! Let's boldly define eSports!

@Battlefy@jbueza