The document discusses building SEO-friendly single-page applications (SPAs) using technologies like Node.js, PhantomJS, and Nginx. It addresses common SEO challenges with SPAs, such as broken back buttons and crawling issues, and outlines methods to optimize for SEO, including creating compelling meta descriptions and internal links. Additionally, the document provides insights on setting up server architecture to handle crawlers and demonstrates how to simulate crawler requests.

1. Node.js – Phantomjs – NGNIX – Angular.js
BUILDING SEO FRIENDLY SPA

2. AGENDA
SEO
SPA

3. AGENDA
Problem
Statement
Architecture
Technical
Insights
Demo
Tweaking The
Architecture
For
Production

4. SEO

5. SEO
What is
SEO?
Why
SEO?
Methods Crawlers
View

6. SEO - METHODS OF MAKING A SITE SEO
FRIENDLY
Optimize your title
tags
Create compelling meta
descriptions
Utilize keyword-rich headings
Add ALT tags to your images
Build internal links between pages
Update your site regularly

7. SEO
Crawler view of URL
• Pretty URL
• Ugly URL

8. SPA

9. SPA
What is
SPA?
Advantages
of SPA

10. SPA
Advantages of SPA
• Real-time communication
• Templating
• Controllers
• Routing
• Local storage

11. PROBLEM STATEMENT

12. PROBLEM STATEMENT
• Broken back button
• Missing Analytics
• Lack of error tracking.
• Crawling issues
• Indexing issues
• Potential cloaking issues Complex competitive environment
• Most of the application frameworks are not SEO friendly.

13. ARCHITECTURE

14. ARCHITECTURE

15. HOW DOES REDIRECTING BOTS WORK?

16. HOW DOES REDIRECTING BOTS WORK?
Crawler
HTML
SNAPSHOT
Web
Server
Headless
Browser

17. TECHNICAL INSIGHTS

18. TECHNICAL INSIGHTS

19. FETCH AS BOT

20. FETCH AS BOT
Google Webmaster Tool
• Index status
• Links to our site
• Crawl Error
• Crawl stats
• Sitemaps
• URL parameters

21. DEMO

22. DEMO
• Open CMD and start web server @ 9090
• Open CMD and start SEO server @ different port
• Launch “http://localhost:9090/”
• Push State
• Simulating request as crawler “http:/localhost:9090/?_escaped_fragment_=“

23. DEEP DIVE
• Indicate to the crawler that your site supports the AJAX crawling scheme
• Set up your server to handle requests for URLs that contain _escaped_fragment_
• Creating the HTML Snapshot
• Handle pages without hash fragments
• Updating your Sitemap to list the new AJAX URLs
• “Fetch as Googlebot"

24. TWEAKING THE ARCHITECTURE FOR
PRODUCTION

25. TWEAKING THE ARCHITECTURE FOR
PRODUCTION
Crawler
User
HTML
SNAPSHOT
NGINX
PHANTOM IN
SERVER MODE
HTML, CSS, JAVASCRIPT and API

26. QUESTION?
HTTP://IN.LINKEDIN.COM/IN/NEWNAVEEN15