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.

Modern JavaScript and SEO

289 vues

Publié le

A quick presentation about making modern JavaScript frameworks such as Angular, Vue and React more SEO friendly.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Modern JavaScript and SEO

  1. 1. Modern JavaScript and SEO
  2. 2. Who am I? 2 Joona Tuunanen (Yawn-ah Too-nah-nehn) Head of SEO & Partner at OIKIO (oikio.fi) ● Search engine optimisation & Web analytics ● Hobbies include coding badly with NodeJS and building static websites ● Have had clients from FI, UK, US, SG, AU. ● Past and current clients include: ○ DNA ○ ebookers ○ Nigella Lawson ○ Expedia.com.au ○ Macy’s
  3. 3. Some of our clients: 3
  4. 4. To the point
  5. 5. Who here likes to design for IE9? 5
  6. 6. How about Google Chrome 41? 6
  7. 7. ¿Qué? 7
  8. 8. 8 Source
  9. 9. Here are the features that Chrome 41 doesn’t support compared to a modern Chrome 66. (source) 9
  10. 10. Actually the whole list is here -> 10
  11. 11. 11
  12. 12. How search engines work
  13. 13. 13 Server CDN Page A simplified view how search works. GET
  14. 14. 14 3 search engine processes. Crawler (“Googlebot”) Indexer (“Caffeine”) Query engine (“Google.com”) Crawls the web. Identifies and follows links. Retrieves content. Analyses content. Analyses link graphs. Renders JavaScript. Interprets queries & context. Retrieves documents from index. Ranks documents.
  15. 15. 15 These 2 are the main components from developers point of view. Crawler (“Googlebot”) Indexer (“Caffeine”) Query engine (“Google.com”) Crawls the web. Identifies and follows links. Retrieves content. Analyses content. Analyses link graphs. Renders JavaScript. Interprets queries & context. Retrieves documents from index. Ranks documents.
  16. 16. 16 These 2 are the main components from developers point of view. Crawler (“Googlebot”) Indexer (“Caffeine”) Query engine (“Google.com”) Crawls the web. Identifies and follows links. Retrieves content. Analyses content. Analyses link graphs. Renders JavaScript. Interprets queries & context. Retrieves documents from index. Ranks documents.
  17. 17. HTML 1. Googlebot downloads an HTML file. 2. Googlebot extracts the links from the source code and can visit them simultaneously. 3. Googlebot downloads the CSS files. 4. Googlebot sends all the downloaded resources to the Indexer (Caffeine). 5. The indexer (Caffeine) indexes the page. 17 HTML crawling vs JS crawling JavaScript 1. Googlebot downloads an HTML file. 2. Googlebot downloads the CSS and JS files. 3. Googlebot has to use the Google Web Rendering Service to parse, compile and execute a JS code 4. WRS fetches the data from external APIs, from the database, etc. 5. Finally, the indexer can index the content. 6. Now Google can discover new links and add it to the Googlebot’s crawling queue.
  18. 18. This takes more resources --> 18 HTML crawling vs JS crawling JavaScript 1. Googlebot downloads an HTML file. 2. Googlebot downloads the CSS and JS files. 3. Googlebot has to use the Google Web Rendering Service to parse, compile and execute a JS code 4. WRS fetches the data from external APIs, from the database, etc. 5. Finally, the indexer can index the content. 6. Now Google can discover new links and add it to the Googlebot’s crawling queue.
  19. 19. What this means for dev
  20. 20. Googlebot crawls millions and billions of pages every day. It wants to save its resources. 20
  21. 21. → Optimise for lazy. 21
  22. 22. 22 Make sure your JavaScript files can be downloaded and executed in under 5 seconds.
  23. 23. When using JS frameworks in front end, use server side rendering. Google says they can render JavaScript, but it’s really difficult to find any sites with JS heavy front ends that rank well in Google without server side rendering. It can be a pain in the butt, but at the moment SSR still kinda mandatory for SEO. You can also use things like prerender.io, but results can be mixed even if implemented correctly. Also, keep your eyes open for Puppeteer. 23 Use server side rendering
  24. 24. Transpiling (to ES5) & polyfills transpiling = A transpiler takes the syntax that older browsers won’t understand (e.g. classes, ‘const’, arrow functions), and turns them into syntax they will understand (functions, ‘var’, functions). polyfills = A polyfill is code that defines a new object or method in browsers that don’t support that object or method. (quoted from here) 24
  25. 25. This was in Angular Quickstart Guide. 25
  26. 26. Design for lazy robots Robots don’t ● use clickable drop-down menus or type to search fields. ● consider where they shouldn’t go unless you specify they shouldn’t crawl. Be careful especially with url parameters. ● check the desktop version of the site (SOON!) → If it’s not in the mobile version, the robot won’t see it. ● necessarily want to crawl all pages, so help them where you can → up-to-date sitemap.xml files. 26
  27. 27. Test test test 1. Test Google’s rendering capability on Google Search Console (Crawl -> Fetch as Google). 2. Use this tool on technicalseo.com 3. Copy text snippets from page content, especially behind tabs or “read more” links and put them into Google. Does the content pop up in search results? 4. If possible, test pages with Google Chrome 41 and check console log. If there are errors, you can be quite sure Googlebot has some issues with the page. You can use Puppeteer for this. 27
  28. 28. Please use urls, even for single page apps. 28
  29. 29. Summary
  30. 30. You should use modern JavaScript frameworks for dev. Happy dev is a good dev. 30
  31. 31. Just keep in mind, that JavaScript is more resource heavy than basic HTML. Optimise for lazy. 31
  32. 32. References and links
  33. 33. If you wanna dig deeper.... 1. The ultimate guide to JS SEO - Elephate (link) 2. JavaScript and SEO: The Difference Between Crawling and Indexing - Barry Adams (link) 3. Going Beyond Google: Are Search Engines Ready for JavaScript Crawling & Indexing? - Moz (link) 4. Google Shares Details About the Technology Behind Googlebot - Moz (link) 5. How to Combine JavaScript & SEO With Isomorphic JS - Search Engine Journal (link) 6. SEO best practices and requirements for modern sites - John Mueller from Google (link) 7. Can Google Properly Crawl and Index JavaScript Frameworks? A JavaScript SEO Experiment - Elephate (link) 33
  34. 34. oikio.fi Thanks! Joona Tuunanen Head of SEO & Partner 040 480 4708 joona@oikio.fi @iamjoona

×