Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Angular SEO
Semelhante a Angular SEO (20)
Mais de Tiang Cheng
Angular SEO
- 1. F#!king SEO Tackling SEO challenges on Javascript apps By Tiang Cheng (@tiang, tiangc@gmail.com)
- 2. About Me • Full Stack at RateMyAgent.com.au • Passionate about Technology, Startups • Run Code and Scrum workshops at Learn2Code Melbourne and Collective Campus
- 3. The Agenda • AngularJS + SEO challenges at ratemyagent.com.au • Solutions (We found a few dead ends…) • Lessons Learnt and coding tips • Tools and resources
- 4. SEO Challenges in NG • Assume all Search Crawlers cannot execute front end javascript • Solution must be fast, and easy to implement
- 5. Google Specs
- 7. HashBangs get converted to escape fragment
- 8. Server-side and front-end support for escaped fragment
- 9. 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>”
- 10. 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
- 11. 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
- 12. Rendering models: Server Rendering • Renders your content on server-side • Fast and up to date • Double up on your coding
- 13. 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
- 14. 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
- 15. Server Side Architecture • Middleware: .NET MVC Web Routes with ActionFilters • Rendering Engine: WebController + Razor Engine + Base HTML Templates
- 16. Coding Tip #1: • Read the Google AJAX specifications https://developers.google.com/webmasters/ajax- crawling/docs/specification • Know thy enemy!
- 17. Coding Tip #2: • Understand the different types of URLS in SEO: • Normal URL www.ratemyagent.com.au/andrewjames • Hashbang URL: www.ratemyagent.com.au/#!/AndrewJames • Escape Fragment URL: www.ratemyagent.com.au/?_escaped_fragment_=/ andrewjames
- 18. Coding Tips #3: • Always set your canonical URL meta tag, or use Breadcrumb Microdata • Otherwise your pretty URLS will show up with #!
- 19. Coding Tips #4: • Turn off javascript on your browser to see how your website looks to a crawler. Check your meta tags!
- 20. Coding Tips #5: • Log your pre-rendering calls and monitor (We use Loggly)
- 21. Tools and Resources • Google WebMaster Tools • Facebook Debug Object • PreRender.io • PhantomJS
- 22. Google Webmaster Tools • Fetch as Google • Structured Data testing • Crawl Stats • Crawl Errors • Robots.txt • Measure the outcomes of your SEO Implementation
- 23. Google Crawl Stats #2
- 24. Fetch AsGoogle