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]
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. Are you?
4. ... Untill someone told me “Javascript SPA didn't work with SEO” SPA = Single Page Application
6. What is SEO ?
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.
9. Title tag Meta description tag https://medium.com/@burhanahmeed/seo-meta-tag-yang-perlu-developer-k- 46d04abf27ec
10. https://www.youtube.com/watch?v=8fP95zyPePU&list=WL&index=10&t=0s
11. • On page • Off page • Technical SEO
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.
14. How crawler works
15. What crawler sees
16. What browser renders
17. Chrome 74. Googlebot has been updated to support Chromium rendering engine version 74.
19. https://www.youtube.com/playlist?list=PLKoqnv2vTMUPOalM1zuWDP9OQl851WMM9
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. • React: https://github.com/nfl/react-helmet • Angular: https://angular.io/api/platform-browser/Meta • Vue: https://github.com/nuxt/vue-meta
23. Example Vue meta >> npm install vue-meta
24. Example Vue meta
25. • example.com/dresses/1234 • example.com?dress=1234
26. • Sitemap • Structure • robot.txt • Minify JS and CSS • and many more
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
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
35. Very simple tech stacks - Vue Cli - Express - Puppeteer https://github.com/burhanahmeed/vue-express-dynamic-rendering
36. https://github.com/puppeteer/puppeteer/
38. • https://sbyjs-plain.netlify.com/ • https://sbyjs-spa.netlify.com/ • https://sbyjs-prerender.netlify.com/ • http://sbyjs-ssr.kusiagalabs.xyz/
46. What about Facebook crawler? https://developers.facebook.com/tools/debug
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/)