Javascript and SEO, So?

Javascript and SEO, So?

Processing Javascript website is a bit tricky for crawler, so how would we handle that?

4f7eb9389daef9a4e23696ee28e5a79d?s=128

Burhanuddin Ahmed

May 14, 2020
Tweet

Transcript

  1. Burhanuddin Ahmad @burhannahm SurabayaJS May 2020 Inspired by Jacelyn Yeen's

    talk at JSDAY Indonesia 2019 (Building Fast & SEO Friendly SPA with Angular) lang=[EN,ID]
  2. - Software developer at a SaaS Company - Working on

    some dumb side project ideas - Volunteer at SurabayaJS Reach me on Telegram @burhannahm Instagram @burhannahm Linkedin /burhanahmeed brhn@kusiaga.com
  3. Are you?

  4. ... Untill someone told me “Javascript SPA didn't work with

    SEO” SPA = Single Page Application
  5. None
  6. What is SEO ?

  7. SEO stands for Search Engine Optimization, which is the practice

    of increasing the quantity and quality of traffic to your website through organic search engine results.
  8. None
  9. Title tag Meta description tag https://medium.com/@burhanahmeed/seo-meta-tag-yang-perlu-developer-k- 46d04abf27ec

  10. https://www.youtube.com/watch?v=8fP95zyPePU&list=WL&index=10&t=0s

  11. • On page • Off page • Technical SEO

  12. • On page • Off page • Technical SEO •

    Page speed • Meta tag • Title • Sitemap • Site structure • JS Framework SEO • Social media tag • cralwer bot • So on.
  13. None
  14. How crawler works

  15. What crawler sees

  16. What browser renders

  17. Chrome 74. Googlebot has been updated to support Chromium rendering

    engine version 74.
  18. None
  19. https://www.youtube.com/playlist?list=PLKoqnv2vTMUPOalM1zuWDP9OQl851WMM9

  20. None
  21. • Use links! Crawler does not click on stuff like

    <div> or <span> or <li> • Do not use hash mode on your URL (/#) or (/#tentang) instead use history mode (/tentang) • Create sitemap • Exclude low quality content, you can use noindex or nofollow robot.txt
  22. • React: https://github.com/nfl/react-helmet • Angular: https://angular.io/api/platform-browser/Meta • Vue: https://github.com/nuxt/vue-meta

  23. Example Vue meta >> npm install vue-meta

  24. Example Vue meta

  25. • example.com/dresses/1234 • example.com?dress=1234

  26. • Sitemap • Structure • robot.txt • Minify JS and

    CSS • and many more
  27. • Don't block CSS, JavaScript, or images • Don't use

    Flash, use HTML5 • Don't use pop-ups either • Design for the fat finger https://moz.com/learn/seo/mobile-optimization
  28. None
  29. None
  30. None
  31. None
  32. None
  33. Pre-render - Render site to static HTML at build time.

    SSR (server side rendering) - Render page on server and send a ready rendered response to client NuxtJS, NextJS, Sapper, Angular Universal command: npm run build
  34. None
  35. Very simple tech stacks - Vue Cli - Express -

    Puppeteer https://github.com/burhanahmeed/vue-express-dynamic-rendering
  36. https://github.com/puppeteer/puppeteer/

  37. None
  38. • https://sbyjs-plain.netlify.com/ • https://sbyjs-spa.netlify.com/ • https://sbyjs-prerender.netlify.com/ • http://sbyjs-ssr.kusiagalabs.xyz/

  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. What about Facebook crawler? https://developers.facebook.com/tools/debug

  47. None
  48. None
  49. None
  50. None
  51. Thank You have a good day Also thanks to: -

    Jecelyn Yeen's slide (https://speakerdeck.com/chybie/js-seo) - Kurio engineering (https://toolbox.kurio.co.id/cheating-react-server-side-rendering-with-puppeteer-631e9630725b) - MOZ (https://moz.com/)