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

More Decks by Burhanuddin Ahmed

Other Decks in Programming


  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 [email protected]
  3. 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.
  4. • On page • Off page • Technical SEO •

    Page speed • Meta tag • Title • Sitemap • Site structure • JS Framework SEO • Social media tag • cralwer bot • So on.
  5. • 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
  6. • 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
  7. 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
  8. Very simple tech stacks - Vue Cli - Express -

    Puppeteer https://github.com/burhanahmeed/vue-express-dynamic-rendering
  9. 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/)