A Deep Dive Into SEO Tactics For Modern Javascript Frameworks
2 likes1,518 views
This document summarizes a presentation on SEO tactics for modern JavaScript frameworks. It discusses using application shells for initial HTML rendering, adding SEO meta tags, handling client-side navigation and redirects, and testing search bot capabilities. Examples are provided using ReactJS, NextJS, VueJS and NuxtJS for application shells, meta tags, navigation and redirects. The document also describes experiments conducted to evaluate features supported in Googlebot and Bingbot.
A Deep Dive Into SEO Tactics For Modern Javascript Frameworks
- 1. @SPEAKERNAME/#SMX A Deep Dive Into SEO Tactics For Modern JavaScript Frameworks Hamlet Batista CEO at RankSense @hamletbatista
- 2. @SPEAKERNAME/#SMX I believe amazing SEO results should take 6 weeks, not 6 months! Hamlet Batista CEO and Founder, RankSense @hamletbatista slideshare.net/hamletbatista I’m a mentor at the speaker accelerator for underrepresented groups, United Search. Check us out at unitedsearch.org or @search_united on www.ranksense.com
- 3. @SPEAKERNAME/#SMX ‘The developer insisted they knew what they were doing and that "Google can index the content” ’ How Often Have You Heard This One? https://bit.ly/2KaCtgG
- 4. @SPEAKERNAME/#SMX • Doing it yourself • Teaching others The Best Way to Learn JavaScript SEO (or Anything) @hamletbatista
- 5. @SPEAKERNAME/#SMX • We are going to review critical JavaScript SEO concepts using example apps in ReactJs, NextJs, VueJs and NuxtJs: • Optimal application shells • SEO meta tags • Rendering options • Client-side navigations and soft 404s • Schema markup • And more! Agenda @hamletbatista
- 6. @SPEAKERNAME/#SMX • Google Colab has a built-in Linux environment with Node support • Ngrok helps expose the local web server • Notebooks are great for learning and documentation Setting Up the Examples in Google Colab Notebooks @hamletbatista
- 7. @SPEAKERNAME/#SMX • Useful for getting some initial HTML to the screen fast • This HTML can include SEO meta data • PWAs can cache locally for offline use The Application Shell Model https://bit.ly/3puiauE
- 8. @SPEAKERNAME/#SMX • Disable/enable JavaScript to see the App Shell • Open Chrome Developer Tools • Command + Shift + P(opens command list) The Application Shell in an Example ReactJS App @hamletbatista
- 9. @SPEAKERNAME/#SMX • Disable/enable JavaScript to see the App Shell • Open Chrome Developer Tools • Command + Shift + P(opens command list) The Application Shell in an Example NextJs App @hamletbatista
- 10. @SPEAKERNAME/#SMX • Disable/enable JavaScript to see the App Shell • Open Chrome Developer Tools • Command + Shift + P(opens command list) The Application Shell in an Example VueJs App @hamletbatista
- 11. @SPEAKERNAME/#SMX • Disable/enable JavaScript to see the App Shell • Open Chrome Developer Tools • Command + Shift + P(opens command list) The Application Shell in an Example NuxtJs App @hamletbatista
- 12. @SPEAKERNAME/#SMX • We will add meta tags to examples apps built using: • ReactJs • NextJs (Universal) • VueJs • NuxtJs (Universal) SEO Meta Tags in the Application Shell ReactJs NextJs VueJs NuxtJs @hamletbatista
- 13. @SPEAKERNAME/#SMX • ReactJs apps use React Helmet to add SEO meta tags • Simple to use • But doesn’t keep meta tags in the app shell SEO Meta Tags in an Example ReactJS App @hamletbatista
- 14. @SPEAKERNAME/#SMX • NextJs has built-in support for meta tags • Simple to use • It keeps meta tags in the app shell thanks to server-side rendering SEO Meta Tags in an Example NextJs App @hamletbatista
- 15. @SPEAKERNAME/#SMX • VueJs apps use Vue Meta to add SEO meta tags • Simple to use • But doesn’t keep meta tags in the app shell SEO Meta Tags in an Example VueJs App @hamletbatista
- 16. @SPEAKERNAME/#SMX • NuxtJs has built- in support for meta tags • Simple to use • It keeps meta tags in the app shell thanks to server-side rendering SEO Meta Tags in an Example NuxtJs App @hamletbatista
- 17. @SPEAKERNAME/#SMX • We are going to test how pages, redirects and 404s operate in: • Client-side JavaScript • Server-side JavaScript Page Navigation, Redirects and Soft 404s Page 3Page 2Page 1 Link 1 Link 2 Link 4 Link 5 Link 3 Link 6 @hamletbatista
- 18. @SPEAKERNAME/#SMX • Client-side navigation • No HTTP requests • CSS background color trick • Server-side navigation • Check HTTP requests in the Network tab Server-side vs Client-side Navigation @hamletbatista
- 19. @SPEAKERNAME/#SMX Server-side Redirects • Server-side redirects • Check HTTP requests • Should work with JavaScript disabled @hamletbatista
- 20. @SPEAKERNAME/#SMX • NextJs and NuxtJs handle 404s correctly out of the box • ReactJs and VueJs require additional configuration Soft 404s @hamletbatista
- 21. @SPEAKERNAME/#SMX How Pre-rendering and Server-side Rendering Work https://nextjs.org/learn/basics/data-fetching
- 22. @SPEAKERNAME/#SMX Structured Data in an Example NextJs App @hamletbatista • The Next SEO plugin simplifies adding structured data and other SEO meta tags to NextJs and ReactJs applications • There are similar plugins for other frameworks
- 23. @SPEAKERNAME/#SMX • How many and what advanced browser features are supported by the evergreen search bots? • We will run some clever experiments to find out! Evaluating Features in Evergreen Search Bots @hamletbatista
- 24. @SPEAKERNAME/#SMX • This page executes a series of test to report which capabilities the browser has Modern Browser Features https://browserleaks.com/features@hamletbatista
- 25. @SPEAKERNAME/#SMX • We want to run Google and Bing URL Inspectors to learn what features each search bot supports Reverse Proxying to Run URL Inspections https://bit.ly/36DbzFJ • From: Browser Leaks • To: Localhost MITMProxy • From: Localhost • To: Public URL Ngrok • Fetch and render public URL • Save HTML report URL Inspection Tool @hamletbatista
- 26. @SPEAKERNAME/#SMX • pip install mitmproxy • mitmproxy -p 8081 --mode reverse:https://bro wserleaks.com/ • ./ngrok http - hostname=rnd.ran ksense.com 8081 Reverse Proxying to Run URL Inspections https://searchengineland.com/how-to-audit-sites-inside-corporate-networks-341195 @hamletbatista
- 27. @SPEAKERNAME/#SMX • Here is what we learned about Evergreen Googlebot capabilities Googlebot Browser Features https://bit.ly/2Uvbcre@hamletbatista
- 28. @SPEAKERNAME/#SMX • Here is what we learned about Evergreen Bingbot capabilities Bingbot Browser Features https://bit.ly/3kxyJ5l@hamletbatista
- 29. @SPEAKERNAME/#SMX • https://github.com/ hamletbatista/smx • ReactJs notebook • NextJs notebook • VueJs notebook • NuxtJs notebook • Next SEO plugin https://www.npmjs. com/package/next -seo Github Repository @hamletbatista
- 30. @SPEAKERNAME/#SMX I believe amazing SEO results should take 6 weeks, not 6 months! • Learn from other SEOs writing code in Python and JavaScript • Tune in each Thursday to our #RSTwittorial series in Twitter to get practical SEO automation scripts 🐍 🔥 https://bit.ly/35yuwtZ @RankSense
- 31. @SPEAKERNAME/#SMX SEE YOU AT THE NEXT SMX!