Render v Rank SEO for JavaScript - SEMPDX EngagePDX 2019
•Als PPTX, PDF herunterladen•
7 gefällt mir•2,586 views
Today, Jamie will go into one of the most valuable topics in technical SEO – rendering and JavaScript. 95% of sites use JS— so many that Google has had to reconsider how they crawl and index JavaScript generated. Let’s look at the new rules for a dynamically generated web.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Render v Rank SEO for JavaScript - SEMPDX EngagePDX 2019
Ähnlich wie Render v Rank SEO for JavaScript - SEMPDX EngagePDX 2019 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Render v Rank SEO for JavaScript - SEMPDX EngagePDX 2019
- 1. Render v Rank SEO for JavaScript Everyone #engagePDX | @jammer_volts
- 3. Websites are made of code. Code is written in languages. 3 languages are the foundation of websites. #engagePDX | @jammer_volts
- 4. HTML = content CSS = layout, design, & visual effects JavaScript = web version of programming code #engagePDX | @jammer_volts
- 5. JavaScript executes in the browser to build rendered content. 1. Load 2. Parse 3. Compile 4. Execute
- 6. JS can transform a few lines of code into a webpage #engagePDX | @jammer_volts
- 7. Googlebot is code. Code obeys rules. Googlebot runs scripts in a set order. We call this crawling. #engagePDX | @jammer_volts
- 8. Crawl Index Rank #engagePDX | @jammer_volts Until 10 May 2018, we thought Googlebot worked like this
- 10. Crawl Index Rank Spot the 3 hidden assumptions #engagePDX | @jammer_volts
- 11. 1. Googlebot renders JS as it crawls. 2. Indexing is based on DOM content. 3. These actions occur simultaneously in a single sequence. #engagePDX | @jammer_volts This model assumes:
- 12. Rank Crawl Index Render #engagePDX | @jammer_volts Googlebot is magic and does all the things instantly!
- 14. 95.1% of websites use JavaScript Source:W3UsageofJavaScriptforwebsites #engagePDX | @jammer_volts
- 15. 160,000,000, 000,000 pages on the web #engagePDX | @jammer_volts
- 16. JavaScript webpages Googlebot resources #engagePDX | @jammer_volts
- 17. JavaScript generated content is discovered by Googlebot only once the resources become available. #engagePDX | @jammer_volts
- 19. What should SEOs care about a little JavaScript? #engagePDX | @jammer_volts
- 20. Meet Arrow.com ● 5.2M products ● 7 languages ● 8 Asynchronous Javascript and XML (AJAX) calls per page #engagePDX @jammer_volts
- 21. Arrow minus AJAX #engagePDX | @jammer_volts
- 22. With JavaScript Without JavaScript #engagePDX | @jammer_volts
- 24. If a Googlebot can’t see pricing or product availability, it can’t understand our PDPs purpose. Product detail pages are designed to meet a transactional intent. #engagePDX | @jammer_volts
- 26. Is Google picking a fight with SEOs?!? #engagePDX|@jammer_volts
- 28. The 4 Truths of Optimizing for JavaScript Credit:@itsjenmiller #engagePDX | @jammer_volts
- 29. For content to rank, it needs to be seen. #engagePDX | @jammer_volts Ⅰ
- 30. Which search engines can see JavaScript content? Source:BartoszGóralewiczviaMoz #engagePDX | @jammer_volts
- 31. *Terms and conditions apply. #engagePDX | @jammer_volts
- 32. Know the difference between your HTML and Rendered HTML #engagePDX | @jammer_volts
- 33. Want to be sure it’s seen? Think like a bot Test like Googlebot ● URL Inspector (1 at a time) ● Configure your own web crawler! ● Audit with Lighthouse ● Advocate for user-centric KPIs Study Googlebot ● V8, Googlebot’s JavaScript and WebAssembly engine ● Chrome 41, Googlebot’s Web Rendering Service ● Learn to spot the difference between lightdom and shadowdom
- 34. Google recommendation: Serve pre-rendered content to bots Source:Googlei/o2018 #engagePDX | @jammer_volts
- 35. *Some assembly required Source:Googlei/o2018 #engagePDX | @jammer_volts
- 36. Keep content critical to user intent in the first wave of indexing #engagePDX | @jammer_volts Ⅱ
- 37. Crawl Index Render HTML DOM 1st wave of indexing 2nd wave of indexing #engagePDX | @jammer_volts
- 38. Crawl Index First initial wave of indexing #engagePDX | @jammer_volts
- 39. Index Render 2nd wave of indexing #engagePDX | @jammer_volts
- 40. Make Hero Content and Structured Data Available in HTML Source:User-centricPerformanceMetrics #engagePDX | @jammer_volts
- 41. On 23 June 2018, we pushed a code change that moved buying elements to html #engagePDX | @jammer_volts
- 42. +80% increase in indexed product detail pages #engagePDX | @jammer_volts
- 43. Load only what you need. #engagePDX | @jammer_volts Ⅲ
- 45. Everyone has to wait while JS does it’s thing. #engagePDX | @jammer_volts
- 46. How to cut the time and cost of JavaScript ● Make a developer friend! ● Load only what you need for the requested page (Code splitting) ● Make resources as small as possible (Minification, Compression) ● Prioritize loading resources ● Use Service Work for browser- native JS functionality Credit:gizmo-art #engagePDX | @jammer_volts
- 47. |￣￣￣￣￣￣￣￣￣￣￣| DON'T BE AFRAID TO LEARN IN PUBLIC |＿＿＿＿＿＿＿＿＿＿＿| (__/) || (•ㅅ•) || #engagePDX | @jammer_volts Ⅳ
- 48. Hey! It’s me at BrightonSEO talking about how to pwn JS! #engagePDX | @jammer_volts
- 49. Aaaaaand here’s my twitter feed two weeks later… #whompwhomp #engagePDX | @jammer_volts
- 50. Be brave. Own mistakes. Create blameless culture. #engagePDX | @jammer_volts
- 51. @johnmu #engagePDX | @jammer_volts Make allies.
- 52. ● Build your own Dynamic Rendering using Rendertron ● Get hands on with code in Google’s Codelab ● Learn to speak dev (start with the developer’s guide to search) ● Join the Webmaster Forum ● Watch Google’s new JavaScript SEO web series ● Dig through Definitive SEO JavaScript Resource List, Barry Adams, State of Digital #engagePDX | @jammer_volts Get your hands dirty.
- 53. Test. Iterate. Share what you learn. #engagePDX | @jammer_volts Credit:JulieGarrett@softsignal
Hinweis der Redaktion
- 14+ seconds to load and get interactive on mobile devices