How to make JavaScript websites successful in Google | iJS 2019 - London
•Als PPTX, PDF herunterladen•
4 gefällt mir•1,783 views
How to make JavaScript websites successful in Google | iJS 2019 - London
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Empfohlen
Empfohlen (20)
How to make JavaScript websites successful in Google | iJS 2019 - London
- 2. A few words about myself
- 3. I’m an SEO guy. I am not your enemy ;)
- 5. With my colleagues: We have literally spent years on: Maria Cieślak Bartosz Góralewicz - researching the JavaScript SEO thing - helping multiple clients to ensure their JS websites rank high in Google
- 6. My Ultimate Guide to JavaScript SEO was extremely viral
- 7. So...
- 8. Client: This is our website. We don’t rank in Google. Can you guys help us?
- 10. A JavaScript loader was the bad guy. Finally, we spotted the issue! LOADING...
- 11. Now they are successful in Google!
- 12. We need to go deeper
- 13. Then we started researching The JavaScript SEO topic
- 14. Yo! Here is a list of simple Hello World Projects utilising different JS frameworks used for JS crawling tests JSSEO.expert experiment
- 15. “But I am a developer. Why should I care about traffic from Google?”
- 16. “But I am a developer. Why should I care about traffic from Google?” ● Traffic from Google = Money
- 17. We SHOULD care about traffic from Google. It’s REAL. ● Traffic from Google = Money ● Poor JavaScript SEO = Google Ranking Drops
- 18. We SHOULD care about traffic from Google. It’s REAL. ● Traffic from Google = Money ● Poor JavaScript SEO = Google Ranking Drops ● Google Ranking Drops = Less money = Angry boss
- 19. We SHOULD care about traffic from Google. It’s REAL. ● Traffic from Google = Money ● Poor JavaScript SEO = Google Ranking Drops ● Google Ranking Drops = Less money = Angry boss ...and it makes cats grumpy
- 20. A few examples of famous JavaScript website drops in Google
- 21. Example #1
- 24. The question...
- 25. The answer...
- 26. What if I told you that Google’s not perfect at rendering JS?
- 27. Client-side rendering - the default technique It’s like a cooking recipe - Google and users have to render it on their own. It can be problematic for Google
- 28. Yes… Recently, Google did a really good job with updating their Web Rendering Service BEFORE the 7th of May AFTER the 7th of May Google has been using an “ancient” 4-year old browser for rendering - Chrome 41. It wasn’t even supporting ES6! Google Web Rendering Service is based on the most recent version of Chrome It’s great news, but things are more complicated than that...
- 29. …Google is still not perfect at rendering JavaScript
- 30. Google is still not perfect at rendering JavaScript
- 31. Google crawls JavaScript websites much slower than HTML Pages
- 33. But how long do you HAVE to wait? Google’s John Mueller: “...usually it’s on the order of days to a few weeks even.”
- 34. Google is still not perfect at rendering JavaScript
- 35. The risk: Google may decide not to fetch some JavaScript resources
- 36. The Risk: Google may decide not to fetch some JavaScript resources I think we DON’T need to download this JSON file
- 37. Google is still not perfect at rendering JavaScript
- 38. Googlebot doesn’t act like a real user It doesn’t click the buttons It doesn’t scroll! Watch out for your infinite scrolling!
- 39. There are still many websites that implement infinite scrolling incorrectly... In the case of these websites Googlebot cannot access the second page of pagination.
- 40. Google is still not perfect at rendering JavaScript
- 41. Google’s rendering of JavaScript is not perfect TIMEOUTS
- 42. Google limits: TIMEOUTS Remember: There are 130 trillion other documents waiting for Googlebot’s visit
- 43. Googlebot is based on the newest version of Chrome. BUT it’s not the same! ● Googlebot declines user permission requests ● Cookies, local & session storage are cleared across page loads ● Browser always download all the resources For instance: Googlebot may not...
- 44. Always check if Google has no issues with rendering your website Best tool: URL Inspection Tool (a part of Google Search Console). Avoid using Chrome for it.
- 45. Google’s rendering errors may be a big deal Google encounters rendering errors Google stops executing JavaScript No content indexed No money
- 46. Angular.io had JavaScript SEO issues in the past
- 47. Igor Minar from Angular.io: “Given that we haven’t changed the problematic code in 8 months (...) I believe that something has changed in crawlers during this period of time which caused most of the site to be de-indexed, which then resulted in the traffic loss.” The issue: Google deindexed many pages of Angular.io due to rendering errors
- 48. Let’s go back to our experiment... JSSEO.expert
- 49. Initial results: Google DOESN’T support Angular 2
- 50. Initial results: Google DOESN’T support Angular 2
- 51. Google didn’t index our Angular experiment because of... errors in the official Angular documentation
- 52. Now we know about Google’s limitations in rendering JavaScript
- 53. JavaScript SEO Taming the Beast in 5 Easy Steps
- 54. Step 1 Ensure that Google can render your content Use the URL inspection tool provided by Google ● It’s free
- 55. Step 1 Ensure that Google can render your content Use the URL inspection tool provided by Google ● It’s free ● It shows rendering errors
- 56. Ask yourself the following questions
- 57. Ask yourself the following questions ● Is the main content visible? ● Can Google see the user-generated comments? ● Can Google access areas like similar articles and products? ● Can Google see other crucial elements of your page?
- 58. What if Google cannot render your page properly? ● You blocked crucial JavaScript files for Googlebot ● Some errors occurred while rendering Here are some possible reasons: ● Google encountered timeouts while rendering
- 59. Step 2 Make sure you didn’t block your crucial JavaScript files in robots.txt What is robots.txt?
- 61. Step 2 Make sure you didn’t block your crucial JavaScript files in robots.txt Google’s URL inspection tool comes to the rescue!
- 62. Step 3 Use the URL Inspection tool for spotting JavaScript errors
- 63. Step 4 Check if your content has been indexed in Google How do you know if content is really indexed in Google?
- 64. Step 4 Check if your content has been indexed in Google site:URL “fragment”
- 65. Step 5 Make sure Google can discover your internal links Google needs proper <a href> links to discover the URLs on your website
- 66. If you followed these 5 steps and it still doesn’t work...
- 67. Consider dynamic rendering or hybrid rendering Example Recommended by Dynamic rendering YouTube Hybrid rendering (also called “universal JS” or “isomorphic JS”) Airbnb
- 68. First option: Use dynamic rendering USERS SERVER RENDERERGooglebot Initial HTML+JS Static HTML BUT a static version for Googlebot ● Serving an interactive version for users
- 69. First option: Use dynamic rendering Officially recommended by Google for rapidly changing websites
- 70. Most popular dynamic rendering solutions Renderton Puppeteer Prerender.io Free Free Service/Free
- 71. But dynamic rendering is not a silver bullet
- 72. Disqus.com
- 73. What went wrong?
- 74. We informed Disqus about the issue
- 75. Second option: Hybrid rendering How it works Initial, server-side rendered HTML is sent to users and search engines. Then JavaScript is loaded on top of that.
- 76. Hybrid rendering? Which brands use
- 77. If you use for hybrid rendering ...try
- 78. Next.js is the next... BIG thing
- 80. The State of JS 2018 Survey: 35% of developers heard of Next.js and want to learn it.
- 82. Friends of Next.js Vue.js Angular
- 84. Relatively static website Dynamic website You can consider Client-side rendering ● Hybrid rendering, or ● Dynamic rendering
- 85. It’s not only about Google! Other search engines struggle with JavaScript. Facebook, Twitter THE SAME!
- 86. Technically, Bing can render JavaScript. But struggles with rendering JavaScript at scale
- 87. Bing struggles with rendering JavaScript at scale
- 88. Bing struggles with rendering JavaScript at scale
- 89. Can Bing index the content of Angular.io?
- 90. Bing struggles with rendering JavaScript at scale Can Bing index the content of Vimeo?
- 91. Can Bing index the content of Vimeo?
- 93. Angular.io is doing fine on Twitter
- 94. Angular.io is NOT doing fine on Twitter Vue.js is doing MUCH better.
- 95. Key takeaways ● It’s the HTML JS Era (lucky you!) ● Rendering delays are still a problem ● Even after Chromium update, Google still doesn’t support many modern JavaScript features (i.e. no service workers, no geolocation API) ● You should always ensure that Google can render and index your content (choose a sample of pages)
- 96. Worth reading ● Ultimate Guide to JavaScript SEO https://www.onely.com/blog/ultimate-guide-javascript-seo/ ● How to Diagnose and Solve JavaScript SEO Issues in 6 Steps by Tomek Rudzki https://moz.com/blog/diagnose-and-solve-javascript- seo-issues ● How to prepare for a JS migration by Maria Cieślak https://searchengineland.com/how-to-prepare-for-a-js-migration-308795
Hinweis der Redaktion
- I am an SEO guy. [Ask] who of you know what is SEO? [/Ask] (...) I believe SEOs can cooperate with JavaScript developers to make JavasScript websites successful in Google.
- Let’s the game begin!
- Now, Let me tell you a story. It was 2017, we were a quite successful SEO agency. A client came to us and asked if we can help him because his website was totally invisible in Google. He was getting zero traffic from Google.
- We replied: “sure, we can do it”
- Finally, we spotted the issue. Believe it or not, but the issue was caused by a JavaScript loader. It was weird, because users was seeing this animation only for a fraction of second. Unfortunately, the content was injected to the Document Object Model just after the animation finished. So Google simply cannot access the real content.
- Fixing a poor implementation of JavaScript allowed our client to start ranking in Google. And that was a great news for all of us!
- Then we decided we need to go deeper with the JavaScript SEO topic. It was clear that JavaScript is not going away. in 2015 Google announced that they can deal with JS pretty well. As a result, more and more websites were blindly migrating to JS frameworks. And that was leading to drops in traffic. For some reason, SEOs didn’t know how to deal with JavaScript websites and we believed it can become our niche.
- So we started researching the JavaScript SEO topic.
- So we created a website that was intended to check if Google can deal with the most popular JavaScript frameworks. Our initial result was that Google cannot properly render Angular websites. Later, I will tell you why it happened.
- You guys are web developers. So you may wonder: “why the heck should I care about traffic from google”. Here is why.
- But poor JavaScript SEO can lead to Google ranking drops
- And Google ranking drops means less money. Less money means “angry boss”.
- But it gets even worse. In addition to that, it makes cats grumpy
- Now it’s time to show you some examples of drops of JavaScript websites in Google.
- The first example is Alibaba.com. It hurts me just looking at that!
- The second example: Sports.yahoo.com. The blue line - the moment when they implemented infinite scrolling.
- Similar example: answers.yahoo.com.
- The question arises: can google deal with JavaScript? What is your opinion on that?
- I have a good news for you. You all were right! Everything really depends on the situation.
- Truth be told, Google is not perfect at rendering JS. It has a lot of limitations.
- The default technique of building JS websites is client-side rendering. For sure you know it, but in this technique Google and users have to render a website on their own. it’s commonly a troublemaker. I don’t say: don’t use it. I just say that usually it’s the most problematic.
- There is a great news coming from Google from last week. They no longer use Chrome 41, a 4-year-old browser for web rendering. That browser didn’t even fully support ES6!
- Rendering is delayed. you have to wait, sometimes even a few weeks till google will be able to render your content. Also, Googlebot is lazy. it may not fetch all JavaScript resources - because of timeuts or just because Google’s algorithms decided not to do so. What is more, it doesn’t scroll nor clicks the button so infinite scroll can be problematic. We will shortly discuss about all of these points in detail.
- Google cannot render JS websites just like that! JS rendering is delayed and can be done by Google only when resources become available.
- It is perfectly illustrated by the following diagram. There are two waves of indexing in Google. The first is instant (..) The second (rendering) can happen only as resources become available.
- Well, Google’s John Mueller comes in handy: “Usually rendering happens in the order of days to a few weeks even”
- What is more, Google may not fetch some resources just because its algorithms decide these resources don’t contribute to essential page content. It’s just an algorithm; it can make mistakes, which can lead to a disastrous impact on your presence in Google Search. What if Google decide to just skip you important JSON files presenting products?
- What is more, Google may not fetch some resources just because its algorithms decide these resources don’t contribute to essential page content. It’s just an algorithm; it can make mistakes, which can lead to a disastrous impact on your presence in Google Search. What if Google decide to just skip you important JSON files presenting products?
- Now we know about Google’s limitations in rendering JavaScript so we can go deeper.
- You have to be careful about timeouts. Based on my experience, if a server responds really slowly, Google may skip requesting your JS files and index the content as it is. There are 130 trillion documents awaiting for Googlebot’s visit. This has strong implications: if your server / APIs respond slowly, you risk that Google won’t index content generated by JS and your website will rank low in Google.
- The takeaway is clear: always check if Google can render your website.
- Let me tell you another story. Angular.io had real JavaScript SEO issues in the past
- This is not the end of Angular troubles. Let me share with you another story: As I told you a moment ago, we created an experiment to see if Google can render and index various JavaScript frameworks
- The initial result was surprising for us.
- It was a total surprise for us. Angular 2 was created by Google and... Google cannot render Angular 2. What the heck?
- The reason was simple. the official tutorial of Angular suggested to use the “let” command. Well, in that time it was NOT supported in Google. So Google wasn’t able to render it
- Now we know about Google’s limitations in rendering JavaScript so we can go deeper.
- Now I gonna show you a quick and easy six steps that let you diagnose your JavaScript website to make sure it’s successful in Google.
- The first step you should do is to ensure that Google can render your content. You can use the URL inspection tool, provided by Google for that purpose.0 It’s free It shows rendering errors It’s free It shows a full-page screenshot It shows rendering errors
- Ask yourself the following questions: Is the main content visible? Can Google see the user-generated comments? Can Google access areas like similar articles and products? Can Google see other crucial elements of your page?
- Ask yourself the following questions: Is the main content visible? Can Google see the user-generated comments? Can Google access areas like similar articles and products? Can Google see other crucial elements of your page?
- Question: who of you know what robots.txt is? Ok, I don’t see many people raising their hands.
- So let me quickly explain what robots.txt is. It’s a special, plain text file which instruct Googlebot what resources it is able to access. So if you specify in robots.txt that Google shouldn’t access json files, you may be in a trouble.
- Google’s URL inspection tool comes to the rescue! It can inform you about all the blocked resources.
- Few slides before I told you that when Google encounters JavaScript errors, it may end up with rendering JavaScript. How to spot JavaScript errors that Google encountered? Well, you can use Google’s URL inspection tool for it. It can shows you all the errors that occurred during rendering.
- Now we know how to check if Google technically is able to render your website. But did Google actually indexed the content? That’s the most important part. It’s easy to check. Just copy a paragraph or two from your page and...
- Also, you should ensure that Google can discover your internal links.
- If you followed these 5 steps and it still doesn’t work properly, you may consider implementing dynamic rendering or Isomorphic JS.
- They were serving Googlebot no content!
- They were serving Googlebot no content!
- I struggle with this slide