Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

1 254 vues

Publié le

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.

Publié dans : Internet
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ▲▲▲ http://ishbv.com/rockhardx/pdf
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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’

×