seo-friendly single page applications (angularjs, prerender.io) by battlefy jaime bueza
TRANSCRIPT
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