Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Vue of SEO – How to make your Single-Page App rank well | iJS 2017

964 views

Published on

With the rise of modern web-frameworks, single-page applications have conquered the web. If done right, they are not only faster and smoother than conventional websites, but also create a richer user-experience. These modern applications don’t just enable new interaction patterns, but also new capabilities, such as offline and real-time data interactions.
This has come at a cost – more client-side JavaScript increases the download time of pages, while client-side URL routing introduces new problems – it delays the page-rendering time even further and makes it hard for search engines to index your pages. Dangerous stuff if you care about your search-engine ranking.
André will talk about what it takes to build top-ranking web applications, while Dennis will demonstrate some software architecture patterns using Vue.js to dramatically increase performance.

Published in: Internet
  • Be the first to comment

The Vue of SEO – How to make your Single-Page App rank well | iJS 2017

  1. 1. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf The Vue of SEO How to make your Single-Page App rank well
  2. 2. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf André Scharf Digital Lead | ViiV Healthcare @andrescharf Dennis Schaaf Technology Lead | futurice @dennisschaaf
  3. 3. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Abstract With the rise of modern web-frameworks, single-page applications have conquered the web. If done right, they are not only faster and smoother than conventional websites, but also create a richer user-experience. These modern applications don’t just enable new interaction patterns, but also new capabilities, such as offline and real-time data interactions. This has come at a cost – more client-side JavaScript increases the download time of pages, while client-side URL routing introduces new problems – it delays the page-rendering time even further and makes it hard for search engines to index your pages. Dangerous stuff if you care about your search-engine ranking. André will talk about what it takes to build top-ranking web applications, while Dennis will demonstrate some software architecture patterns using Vue.js to dramatically increase performance. https://javascript-conference.com/web-development-architecture/the-vue-of-search-engine-optimization-how-to -make-your-single-page-app-rank-well/
  4. 4. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Why even care about SEO?
  5. 5. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf 93% of online experiences begin with a search engine. 40k Google search queries are conducted every second 91% of internet users use search.
  6. 6. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Search engines are complex systems …
  7. 7. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf … with a very simple job Crawl Index Serve ● Search the web ● Find and follow hyperlinks ● Collect new and updated pages and content ● Render web pages ● Search and analyse page content ● Analyse connections of pages through their links ● Interpret search queries in their context ● Fetch matching search results from index ● Evaluate and rank results
  8. 8. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Therefore, there are 3 sides to that story Make the technical side run smoothly Create valuable and indexable content Make sure the word can be shared easily
  9. 9. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf And 4 boxes to tick off before going live ©moz.com,14/04/17
  10. 10. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Can you make it look fancy, please?
  11. 11. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf The rise of Single-page JavaScript Frameworks
  12. 12. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Single Page Applications work differently Client Server InitialGETrequest FormPOST Page reload Traditional Page Lifecycle Client Server InitialGETrequest AJAX {…} JSON SPA Lifecycle
  13. 13. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Does Google care about fancy?
  14. 14. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
  15. 15. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Google still has issues dealing with JS
  16. 16. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf “If you search for any competitive keyword terms, it’s always going to be server rendered sites. And the reason is because although Google does index client-side rendered HTML, it’s not perfect yet and other search engines don’t do it as well. So if you care about SEO, you still need to have server-rendered content.” Jeff Whelpley
  17. 17. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf How to get it right then
  18. 18. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Client Server Initialrequest AJAX {…} JSON Traditional SPA Client Server Optimizing for ‘Time to First meaningful Paint’ Initialrequest AJAX (otherdata) {…} JSON With Pre-Rendering HTML Assets HTML (Rendered) 1STEMANINGFULLPAINT 1STEMANINGFULLPAINT Assets HTML (Empty)
  19. 19. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Optimize server rendering time Use a Varnish Cache between your server and the public, to ensure most pages are ‘cached’ (Still needs to be Even better: pre-render all your pages to HTML files, so that they load in light-speed! Option 1: Server-side rendering + Caching Option 2: Pre-rendering vacuumshoover-craft-2000 vacuumsroomba-k2-neo pharmacypreservatives
  20. 20. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Extra Credit - Optimize Initial load Chunking of JS bundles (very tricky to get running with SSR) Problem: Need to know which chunks to inline and which chunks to load after Inline Critical (“Above the fold”) CSS
  21. 21. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Get the content right Content to HTML Ratio > 15% Use Components to get rid of unnecessary wrapping elements, and simplify the HTML structure. Use scoped styles for simpler code and less CSS-classes. Lose the deeply nested Bootstrap template
  22. 22. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Get the content right HTML-Tag Optimization Use only one H1!! Use semantic tags Add follow/nofollow for links Remember Image Alt-texts
  23. 23. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Get the content right Add ‘Structured Markup’ to the page
  24. 24. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf What about Hash navigation? Google ignores everything after the # Use Vue-Router in combination with server-side redirect rules to point to your relevant pages: For example with web.config
  25. 25. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Single-page URL Navigation HTML5 Browser History API Make your URLs Human-readable Have canonical urls Page Titles - URL - and H1 and Meta-Tag should have matching content Vue-Router (Pages & Meta-data)
  26. 26. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Single-page URL Navigation Tracking of navigation events Option 1: Google Tag Manager - using “History Listener” tag type Option 2: Google Analytics virtual page views Option 3: Autotrack
  27. 27. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Manage Duplicate Routes and Redirects Force a trailing slash on the url Eg. redirect site.com/test -> site.com/test/ Add Meta-data with Canonical tags Add redirects for moved pages Use 301 Permanent redirect instead of creating a 404 to avoid loosing page ranking.
  28. 28. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Auto generate your Sitemap.xml and Robots.txt! For your sitemap: @nuxtjs/sitemap For your robots: nuxt-robots
  29. 29. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf What else to keep in mind
  30. 30. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Use Google tag manager Update external libraries easier Load 3rd party libraries asynchronously, independent of developers (for managing ad-campaigns, retargeting, etc.)
  31. 31. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf SEO – Check if it works ● Create list of all URLs (XML Sitemap) ● “Fetch as Google” in Search Console ● Crawl site (using ScreamingFrog, JS and regular mode) ● Check and configure analytics ● Run a site:-search in Google
  32. 32. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf Thank you! Any questions?
  33. 33. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf One More Thing! Do you like building awesome apps? Look for ‘Futurice’ Or, look at ‘Spice program’

×