Embed Size (px)
Citation preview
F#!king SEOTackling SEO challenges on Javascript appsBy Tiang Cheng (@tiang, [email protected])
About Me
• Full Stack at RateMyAgent.com.au
• Passionate about Technology, Startups
• Run Code and Scrum workshops at Learn2Code Melbourne and Collective Campus
The Agenda
• AngularJS + SEO challenges at ratemyagent.com.au
• Solutions (We found a few dead ends…)
• Lessons Learnt and coding tips
• Tools and resources
SEO Challenges in NG
• Assume all Search Crawlers cannot execute front end javascript
• Solution must be fast, and easy to implement
Google Specs
Use HashBangs!
HashBangs get converted to escape fragment
Server-side and front-end support for escaped fragment
Prerending!
• Pre-rending is using a programmatic browser to download your website (html + css + js), execute javascripts and styles the CSS, and return your website as a String
• ie: “<html> fully rendered </html>”
Rendering models: Snapshot
• Prerenders your webpage, and caches it for future requests
• Dynamic content can be outdated
• Fast (use S3, or Redis caching solution)
• Dependent on your headless browser…Can be buggy
Rendering models: On the fly
• Prerenders your webpage using a pre-rendering service for every request.
• Can be slow to respond
• Delivers up to date content
Rendering models: Server Rendering
• Renders your content on server-side
• Fast and up to date
• Double up on your coding
Prerender considerations:• Choose a middleware layer, and pre-render service.
• Middleware layer intercepts user’s HTTP requests, and if the user agent == “GoogleBot || FacebookExternalHit1.1 || BingBot || etc….”, then executes the PreRender code, else serve the base page to user
• PreRender code executes a phantomJS headless browser, runs your website code, and then returns with the completed HTML
Our SEO Journey
• Middleware layer: PreRender_MVC
• Attempt #1: We ran a hosted https://prerender.io/
• Attempt #2: Self-hosted Prerender.io service
• Attempt #3: Rewrote our web server to serve a basic page
Server Side Architecture• Middleware: .NET MVC Web Routes with ActionFilters
• Rendering Engine: WebController + Razor Engine + Base HTML Templates
Coding Tip #1:
• Read the Google AJAX specificationshttps://developers.google.com/webmasters/ajax-crawling/docs/specification
• Know thy enemy!
Coding Tip #2:• Understand the different types of URLS in SEO:
• Normal URLwww.ratemyagent.com.au/andrewjames
• Hashbang URL: www.ratemyagent.com.au/#!/AndrewJames
• Escape Fragment URL: www.ratemyagent.com.au/?_escaped_fragment_=/andrewjames
Coding Tips #3:• Always set your canonical URL meta tag, or use
Breadcrumb Microdata
• Otherwise your pretty URLS will show up with #!
Coding Tips #4:• Turn off javascript on your browser to see how your
website looks to a crawler. Check your meta tags!
Coding Tips #5:• Log your pre-rendering calls and monitor
(We use Loggly)
Tools and Resources
• Google WebMaster Tools
• Facebook Debug Object
• PreRender.io
• PhantomJS
Google Webmaster Tools• Fetch as Google
• Structured Data testing
• Crawl Stats
• Crawl Errors
• Robots.txt
• Measure the outcomes of your SEO Implementation
Google Crawl Stats #2
Fetch AsGoogle
Facebook Object Debug
F#!King SortedThank you!
