Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to Make
JavaScript
Websites
Successful
in Google?
A few words
about myself
I’m an SEO guy.
I am not
your enemy ;)
I like programming
With my colleagues:
We have literally spent
years on:
Maria
Cieślak
Bartosz
Góralewicz
- researching the JavaScript
SEO th...
My Ultimate Guide
to JavaScript SEO
was extremely viral
So...
Client:
This is our website.
We don’t rank
in Google.
Can you guys
help us?
We will
help you.
A JavaScript loader was the
bad guy.
Finally, we spotted
the issue!
LOADING...
Now they are
successful in
Google!
We need to
go deeper
Then we started
researching
The JavaScript
SEO topic
Yo!
Here is a list of simple Hello World
Projects utilising different JS frameworks
used for JS crawling tests
JSSEO.exper...
“But I am a developer.
Why should I care about traffic
from Google?”
“But I am a developer.
Why should I care about traffic
from Google?”
● Traffic from Google = Money
We SHOULD care about
traffic from Google. It’s REAL.
● Traffic from Google = Money
● Poor JavaScript SEO = Google Ranking ...
We SHOULD care about
traffic from Google. It’s REAL.
● Traffic from Google = Money
● Poor JavaScript SEO = Google Ranking ...
We SHOULD care about
traffic from Google. It’s REAL.
● Traffic from Google = Money
● Poor JavaScript SEO = Google Ranking ...
A few examples
of famous JavaScript
website drops
in Google
Example #1
Example #2
sports.yahoo.com
Example #3
answers.yahoo.com
The question...
The answer...
What if I told you
that Google’s not perfect
at rendering JS?
Client-side
rendering
- the default technique
It’s like a cooking recipe - Google and
users have to render it on their own...
Yes… Recently, Google did a really good
job with updating their Web Rendering
Service
BEFORE the 7th of May AFTER the 7th ...
…Google is still
not perfect
at rendering
JavaScript
Google is still not perfect at rendering JavaScript
Google crawls JavaScript
websites
much slower
than HTML Pages
Two waves
of indexing
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.”
Google is still not perfect at rendering JavaScript
The risk: Google may
decide not to fetch
some JavaScript
resources
The Risk: Google may decide not to fetch some
JavaScript resources
I think we
DON’T need
to download
this JSON file
Google is still not perfect at rendering JavaScript
Googlebot doesn’t act
like a real user
It doesn’t click the buttons
It doesn’t scroll!
Watch out for your infinite scrolli...
There are still many websites that
implement infinite scrolling
incorrectly...
In the case of these
websites Googlebot
can...
Google is still not perfect at rendering JavaScript
Google’s
rendering
of JavaScript is
not perfect
TIMEOUTS
Google limits:
TIMEOUTS
Remember: There are 130 trillion
other documents waiting for
Googlebot’s visit
Googlebot is based on the newest
version of Chrome. BUT it’s not the same!
● Googlebot declines
user permission
requests
●...
Always check if
Google has no issues
with rendering
your website
Best tool:
URL Inspection Tool (a part of
Google Search C...
Google’s rendering errors
may be a big deal
Google encounters
rendering errors
Google stops executing
JavaScript
No conten...
Angular.io had JavaScript SEO
issues in the past
Igor Minar from
Angular.io:
“Given that we haven’t changed
the problematic code in 8
months (...)
I believe that something...
Let’s go back to our
experiment...
JSSEO.expert
Initial results:
Google DOESN’T
support Angular 2
Initial results:
Google DOESN’T
support Angular 2
Google didn’t index our Angular
experiment because of...
errors in the
official Angular
documentation
Now we know
about Google’s
limitations in
rendering
JavaScript
JavaScript
SEO
Taming the Beast
in 5 Easy Steps
Step 1
Ensure that Google can
render your content
Use the URL inspection tool
provided by Google
● It’s free
Step 1
Ensure that Google can
render your content
Use the URL inspection tool
provided by Google
● It’s free
● It shows re...
Ask yourself the
following questions
Ask yourself the
following questions
● Is the main content visible?
● Can Google see the
user-generated comments?
● Can Go...
What if Google cannot render your page properly?
● You blocked crucial
JavaScript files for
Googlebot
● Some errors occurr...
Step 2
Make sure you didn’t block your
crucial JavaScript files in robots.txt
What is robots.txt?
Step 2
Make sure you didn’t block
your crucial JavaScript files
in robots.txt
Google’s URL inspection
tool comes to the re...
Step 3
Use the URL Inspection
tool for spotting
JavaScript errors
Step 4
Check if your content has
been indexed in Google
How do you know
if content is really
indexed in Google?
Step 4
Check if your content
has been indexed
in Google
site:URL “fragment”
Step 5 Make sure Google can discover your internal links
Google needs proper <a href> links to
discover the URLs on your w...
If you followed
these 5 steps
and it still
doesn’t work...
Consider dynamic rendering
or hybrid rendering
Example Recommended by
Dynamic rendering YouTube
Hybrid rendering
(also cal...
First option:
Use dynamic
rendering
USERS
SERVER
RENDERERGooglebot
Initial HTML+JS
Static
HTML
BUT a static version
for Go...
First option:
Use dynamic
rendering
Officially
recommended
by Google for rapidly
changing websites
Most popular
dynamic rendering solutions
Renderton
Puppeteer
Prerender.io
Free
Free
Service/Free
But dynamic
rendering is not
a silver bullet
Disqus.com
What went wrong?
We informed
Disqus
about the issue
Second option:
Hybrid rendering
How it works
Initial, server-side rendered HTML is
sent to users and search engines.
Then ...
Hybrid rendering?
Which brands use
If you use
for hybrid rendering
...try
Next.js is
the next...
BIG thing
The State of JS 2018 Survey:
35% of developers heard of Next.js
and want to learn it.
It’s actively
maintained
Friends of Next.js
Vue.js Angular
So many
choices...
Relatively
static website
Dynamic website
You can consider
Client-side rendering
● Hybrid rendering, or
● Dynamic rendering
It’s not only about Google!
Other search engines
struggle with JavaScript.
Facebook, Twitter
THE SAME!
Technically, Bing can render
JavaScript.
But struggles with rendering
JavaScript at scale
Bing struggles with rendering
JavaScript at scale
Bing struggles with rendering
JavaScript at scale
Can Bing index
the content
of Angular.io?
Bing struggles with rendering
JavaScript at scale
Can Bing
index the
content of
Vimeo?
Can Bing index the content
of Vimeo?
Let’s talk
about...
Twitter
Angular.io is doing
fine on Twitter
Angular.io is NOT doing
fine on Twitter
Vue.js is doing
MUCH better.
Key takeaways
● It’s the HTML JS Era (lucky you!)
● Rendering delays are still a problem
● Even after Chromium update, Goo...
Worth reading
● Ultimate Guide to JavaScript SEO
https://www.onely.com/blog/ultimate-guide-javascript-seo/
● How to Diagno...
Thank you,
everyone!
@TomekRudzki
/TomekRudzki
 How to make JavaScript websites successful in Google | iJS 2019
 How to make JavaScript websites successful in Google | iJS 2019
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

How to make JavaScript websites successful in Google | iJS 2019

Download to read offline

This is Onely's Head of R&D Tomek Rudzki's deck "The New Renaissance of JavaScript" as presented at iJS 2019 on May 22, 2019.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

How to make JavaScript websites successful in Google | iJS 2019

  1. 1. How to Make JavaScript Websites Successful in Google?
  2. 2. A few words about myself
  3. 3. I’m an SEO guy. I am not your enemy ;)
  4. 4. I like programming
  5. 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. 6. My Ultimate Guide to JavaScript SEO was extremely viral
  7. 7. So...
  8. 8. Client: This is our website. We don’t rank in Google. Can you guys help us?
  9. 9. We will help you.
  10. 10. A JavaScript loader was the bad guy. Finally, we spotted the issue! LOADING...
  11. 11. Now they are successful in Google!
  12. 12. We need to go deeper
  13. 13. Then we started researching The JavaScript SEO topic
  14. 14. Yo! Here is a list of simple Hello World Projects utilising different JS frameworks used for JS crawling tests JSSEO.expert experiment
  15. 15. “But I am a developer. Why should I care about traffic from Google?”
  16. 16. “But I am a developer. Why should I care about traffic from Google?” ● Traffic from Google = Money
  17. 17. We SHOULD care about traffic from Google. It’s REAL. ● Traffic from Google = Money ● Poor JavaScript SEO = Google Ranking Drops
  18. 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. 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. 20. A few examples of famous JavaScript website drops in Google
  21. 21. Example #1
  22. 22. Example #2 sports.yahoo.com
  23. 23. Example #3 answers.yahoo.com
  24. 24. The question...
  25. 25. The answer...
  26. 26. What if I told you that Google’s not perfect at rendering JS?
  27. 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. 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. 29. …Google is still not perfect at rendering JavaScript
  30. 30. Google is still not perfect at rendering JavaScript
  31. 31. Google crawls JavaScript websites much slower than HTML Pages
  32. 32. Two waves of indexing
  33. 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. 34. Google is still not perfect at rendering JavaScript
  35. 35. The risk: Google may decide not to fetch some JavaScript resources
  36. 36. The Risk: Google may decide not to fetch some JavaScript resources I think we DON’T need to download this JSON file
  37. 37. Google is still not perfect at rendering JavaScript
  38. 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. 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. 40. Google is still not perfect at rendering JavaScript
  41. 41. Google’s rendering of JavaScript is not perfect TIMEOUTS
  42. 42. Google limits: TIMEOUTS Remember: There are 130 trillion other documents waiting for Googlebot’s visit
  43. 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. 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. 45. Google’s rendering errors may be a big deal Google encounters rendering errors Google stops executing JavaScript No content indexed No money
  46. 46. Angular.io had JavaScript SEO issues in the past
  47. 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. 48. Let’s go back to our experiment... JSSEO.expert
  49. 49. Initial results: Google DOESN’T support Angular 2
  50. 50. Initial results: Google DOESN’T support Angular 2
  51. 51. Google didn’t index our Angular experiment because of... errors in the official Angular documentation
  52. 52. Now we know about Google’s limitations in rendering JavaScript
  53. 53. JavaScript SEO Taming the Beast in 5 Easy Steps
  54. 54. Step 1 Ensure that Google can render your content Use the URL inspection tool provided by Google ● It’s free
  55. 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. 56. Ask yourself the following questions
  57. 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. 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. 59. Step 2 Make sure you didn’t block your crucial JavaScript files in robots.txt What is robots.txt?
  60. 60. Step 2 Make sure you didn’t block your crucial JavaScript files in robots.txt Google’s URL inspection tool comes to the rescue!
  61. 61. Step 3 Use the URL Inspection tool for spotting JavaScript errors
  62. 62. Step 4 Check if your content has been indexed in Google How do you know if content is really indexed in Google?
  63. 63. Step 4 Check if your content has been indexed in Google site:URL “fragment”
  64. 64. Step 5 Make sure Google can discover your internal links Google needs proper <a href> links to discover the URLs on your website
  65. 65. If you followed these 5 steps and it still doesn’t work...
  66. 66. Consider dynamic rendering or hybrid rendering Example Recommended by Dynamic rendering YouTube Hybrid rendering (also called “universal JS” or “isomorphic JS”) Airbnb
  67. 67. 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
  68. 68. First option: Use dynamic rendering Officially recommended by Google for rapidly changing websites
  69. 69. Most popular dynamic rendering solutions Renderton Puppeteer Prerender.io Free Free Service/Free
  70. 70. But dynamic rendering is not a silver bullet
  71. 71. Disqus.com
  72. 72. What went wrong?
  73. 73. We informed Disqus about the issue
  74. 74. 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.
  75. 75. Hybrid rendering? Which brands use
  76. 76. If you use for hybrid rendering ...try
  77. 77. Next.js is the next... BIG thing
  78. 78. The State of JS 2018 Survey: 35% of developers heard of Next.js and want to learn it.
  79. 79. It’s actively maintained
  80. 80. Friends of Next.js Vue.js Angular
  81. 81. So many choices...
  82. 82. Relatively static website Dynamic website You can consider Client-side rendering ● Hybrid rendering, or ● Dynamic rendering
  83. 83. It’s not only about Google! Other search engines struggle with JavaScript. Facebook, Twitter THE SAME!
  84. 84. Technically, Bing can render JavaScript. But struggles with rendering JavaScript at scale
  85. 85. Bing struggles with rendering JavaScript at scale
  86. 86. Bing struggles with rendering JavaScript at scale
  87. 87. Can Bing index the content of Angular.io?
  88. 88. Bing struggles with rendering JavaScript at scale Can Bing index the content of Vimeo?
  89. 89. Can Bing index the content of Vimeo?
  90. 90. Let’s talk about... Twitter
  91. 91. Angular.io is doing fine on Twitter
  92. 92. Angular.io is NOT doing fine on Twitter Vue.js is doing MUCH better.
  93. 93. 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)
  94. 94. 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
  95. 95. Thank you, everyone! @TomekRudzki /TomekRudzki

This is Onely's Head of R&D Tomek Rudzki's deck "The New Renaissance of JavaScript" as presented at iJS 2019 on May 22, 2019.

Views

Total views

102

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

7

Shares

0

Comments

0

Likes

0

×