Javascript and SEO, So?

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

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]
   

   View Slide

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
   

   View Slide

3. Are you?
   

   View Slide

4. ...
   Untill someone told me “Javascript SPA didn't work
   with SEO”
   SPA = Single Page Application
   

   View Slide

5. View Slide

6. What is SEO ?
   

   View Slide

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.
   

   View Slide

8. View Slide

9. Title tag
   Meta description tag
   https://medium.com/@burhanahmeed/seo-meta-tag-yang-perlu-developer-k-
   46d04abf27ec
   

   View Slide

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

    View Slide

11. • On page
    • Off page
    • Technical SEO
    

    View Slide

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.
    

    View Slide

13. View Slide

14. How crawler works
    

    View Slide

15. What crawler sees
    

    View Slide

16. What browser renders
    

    View Slide

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

    View Slide

18. View Slide

19. https://www.youtube.com/playlist?list=PLKoqnv2vTMUPOalM1zuWDP9OQl851WMM9
    

    View Slide

20. View Slide

21. • Use links! Crawler does not click on stuff like or or
    • 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
    

    View Slide

22. • React: https://github.com/nfl/react-helmet
    • Angular: https://angular.io/api/platform-browser/Meta
    • Vue: https://github.com/nuxt/vue-meta
    

    View Slide

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

    View Slide

24. Example Vue meta
    

    View Slide

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

    View Slide

26. • Sitemap
    • Structure
    • robot.txt
    • Minify JS and CSS
    • and many more
    

    View Slide

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
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

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
    

    View Slide

34. View Slide

35. Very simple tech stacks
    - Vue Cli
    - Express
    - Puppeteer
    https://github.com/burhanahmeed/vue-express-dynamic-rendering
    

    View Slide

36. https://github.com/puppeteer/puppeteer/
    

    View Slide

37. View Slide

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

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. What about Facebook crawler?
    https://developers.facebook.com/tools/debug
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

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/)
    

    View Slide