Javascript and SEO, So?

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. 3.

   Are you?

4. 4.

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

   SEO” SPA = Single Page Application
5. 5.

   None
6. 6.

   What is SEO ?

7. 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. 8.

   None
9. 9.

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

10. 10.

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

11. 11.

    • On page • Off page • Technical SEO

12. 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. 13.

    None
14. 14.

    How crawler works

15. 15.

    What crawler sees

16. 16.

    What browser renders

17. 17.

    Chrome 74. Googlebot has been updated to support Chromium rendering

    engine version 74.
18. 18.

    None
19. 19.

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

20. 20.

    None
21. 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. 22.

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

23. 23.

    Example Vue meta >> npm install vue-meta

24. 24.

    Example Vue meta

25. 25.

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

26. 26.

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

    CSS • and many more
27. 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. 28.

    None
29. 29.

    None
30. 30.

    None
31. 31.

    None
32. 32.

    None
33. 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. 34.

    None
35. 35.

    Very simple tech stacks - Vue Cli - Express -

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

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

37. 37.

    None
38. 38.

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

39. 39.

    None
40. 40.

    None
41. 41.

    None
42. 42.

    None
43. 43.

    None
44. 44.

    None
45. 45.

    None
46. 46.

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

47. 47.

    None
48. 48.

    None
49. 49.

    None
50. 50.

    None
51. 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/)