Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Javascript and SEO, So?

Javascript and SEO, So?

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

Burhanuddin Ahmed

May 14, 2020
Tweet

More Decks by Burhanuddin Ahmed

Other Decks in Programming

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
    [email protected]

    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