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. 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. 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. 4.
  4. 5.
  5. 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.
  6. 8.
  7. 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.
  8. 13.
  9. 18.
  10. 20.
  11. 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
  12. 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
  13. 28.
  14. 29.
  15. 30.
  16. 31.
  17. 32.
  18. 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
  19. 34.
  20. 35.

    Very simple tech stacks - Vue Cli - Express -

    Puppeteer https://github.com/burhanahmeed/vue-express-dynamic-rendering
  21. 37.
  22. 39.
  23. 40.
  24. 41.
  25. 42.
  26. 43.
  27. 44.
  28. 45.
  29. 47.
  30. 48.
  31. 49.
  32. 50.
  33. 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/)