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.
#SMX @Bart_Goralewicz
With Bartosz Goralewicz
Dynamic Rendering
Is this really an
SEO silver bullet?
Experiences from sett...
#SMX @Bart_Goralewicz
JavaScript
madness
#SMX @Bart_Goralewicz
…however
JavaScript SEO
is still massively
misunderstood
in 2019
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
But it gets
much easieronce you start learning
from the best. E.g. Google!
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
Let’s see
if they practice
what they preach
#SMX @Bart_Goralewicz
April 2018 – the new version
of Google Flights
#SMX @BartGoralewicz#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
20,000+ visibility down to 48 (!)
#SMX @Bart_Goralewicz
Is it
indexed ?
#SMX @Bart_Goralewicz
Only
1 page
indexed in
Google
#SMX @Bart_Goralewicz
THE
PROBLEM
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
Angular
Connect
conference
2015
#SMX @Bart_Goralewicz
ele.ph/angularU
If you search for any competitive keyword terms, it’s always going to
be server rend...
#SMX @Bart_Goralewicz
v.2
Not indexed
#SMX @Bart_Goralewicz
HTML
JS
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
HTML
JS
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
HTML
JS
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
This is exactly why
we have 2 waves of
JavaScript indexing
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
Source: Google I/O 2018
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
New links
to be crawled
Second wave
of indexing
#SMX @Bart_Goralewicz
Isomorphic,
universal, dynamic, hybrid,
hydrating with JavaScript, etc.
Latest nomenclature and solu...
#SMX @Bart_Goralewicz
Client-side Rendering
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
Prerendering
Aka Dynamic
Rendering
an elephant in the room
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
Google
is recommending
Dynamic Rendering
"Currently, it's difficult to process JavaScript (…)
in the...
#SMX @Bart_Goralewicz
Google
is recommending
Dynamic Rendering
Dynamic Rendering
= WORKAROUND
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
prerendering
Key problems with
explained
#SMX @Bart_Goralewicz
Prerendering
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
queue
JavaScript
prerender
static
HTML
#SMX @Bart_Goralewicz
BLACK
FRIDAY
SCENARIO
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
New
product
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
What are
your options?
#SMX @Bart_Goralewicz
JÄVASCRIPT
On-the-fly rendering
Outdated
HTML
#SMX @Bart_Goralewicz
Serve stale/outdated HTML1.
Serve JavaScript and let
Google (try to) handle it
2.
Prerender on the f...
#SMX @Bart_Goralewicz
What if you HAVE TO do
prerendering
Plan your updates and deployments1.
Make sure that your prerende...
#SMX @Bart_Goralewicz
Most popular
Prerendering solutions
Chrome Headless/Phantom JS
Chrome Headless
Chrome Headless
Prere...
#SMX @Bart_Goralewicz
Most popular
Prerendering solutions
Prerender.io
Puppeteer
Rendertron
Service/Free
Free
Free
#SMX @Bart_Goralewicz
Failed prerendering
case study
#SMX @Bart_Goralewicz
The Source Code vs. DOM
Source code DOM
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
Source Code
(before JavaScript):
Disqus -The #1 way
to build your audience
Rendered website:
(after ...
#SMX @Bart_Goralewicz
Enter prerendering
#SMX @Bart_Goralewicz
What went
WRONG?
#SMX @Bart_Goralewicz
<html>
</head>
<body>
</body>
</html>
<head>
#SMX @Bart_Goralewicz
Why prerendering may not be
the best solution for your business?
#SMX @Bart_Goralewicz
It’s difficult to use
dynamic rendering
on websites using
geolocation
#SMX @Bart_Goralewicz
Not too dynamic (pun intended)
Creates two separate structures instead of one
Doesn’t improve UX.
Ad...
#SMX @Bart_Goralewicz
My personal beef
with dynamic rendering
It is only made for the sake of SEO.
It doesn’t improve anyt...
#SMX @Bart_Goralewicz
… just like SEO ”containers” in some of the ecommerce stores.
#SMX @Bart_Goralewicz
(better)Alternatives
to prerendering
#SMX @Bart_Goralewicz
Server side
rendering
All of the rendering work
is done by your servers.
Google gets HTML.
SEO = OK
#SMX @Bart_Goralewicz
Alternatives
to prerendering
#SMX @Bart_Goralewicz
Server Side Rendering /
Hybrid Rendering
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
HYBRID
rendering
Prerendered HTML is sent to users
and the search engine.Then,
JavaScript runs on to...
#SMX @Bart_Goralewicz
https://www.searchenginejournal.com/javascript-seo-
like-peanut-butter-and-jelly-thanks-to-isomorphi...
#SMX @Bart_Goralewicz
Which brands use
HYBRID
rendering?
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
Yes, Google
recommends it!
„If you have engineering resources though,
I would highly recommend looki...
#SMX @Bart_Goralewicz
Next, Nuxt and Angular Universal
are the next (amazing joke) trend!
35% of JS developers
want to lea...
#SMX @Bart_Goralewicz
Twitter migrated to
isomorphic JavaScript
in 2012
https://www.oreilly.com/library/view/building-isom...
#SMX @Bart_Goralewicz
All the HTML files are built with data
BEFORE they are uploaded to a server
Static Site Rendering
So...
#SMX @Bart_Goralewicz
Pros of
static sites
1.Very fast (even during traffic surge)
2. Increased security
3.Version control...
#SMX @Bart_Goralewicz
Limitations
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
What if we just keep
CSR JavaScript ?
*Client Side Rendered
*
#SMX @Bart_Goralewicz#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
Is
JavaScript
Evil?
#SMX @Bart_Goralewicz
#SMX @Bart_Goralewicz
Is
JavaScript
Evil?
#SMX @Bart_Goralewicz
No, it is way worse.
#SMX @Bart_Goralewicz
Is
JavaScript
Evil?
#SMX @Bart_Goralewicz
No, it is way worse. It is complex ☺
#SMX @Bart_Goralewicz
JavaScript SEO best practices
#SMX @Bart_Goralewicz
JavaScript
taming the beast in
3 easy steps
#SMX @BartGoralewicz
#SMX @Bart_Goralewicz
Step 1.
V.2
Choosing the right framework
#SMX @Bart_Goralewicz
Step 2.
Rendering JavaScript
Prerendering
Server Side Rendering
Universal/Isomorphic
Static site gen...
#SMX @Bart_Goralewicz
Step 3.
Enjoy your traffic!
#SMX @Bart_Goralewicz
Get the Starter
Package for FREE
Contact maria@elephate.com
Give the password ”Freelephate”
Within 1...
#SMX @Bart_Goralewicz
ele.ph/smxwest
Download
my deck
#SMX @Bart_Goralewicz
THANK YOU!
SEE YOU AT THE NEXT #SMX
bartosz@goralewicz.com
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

Dynamic Rendering - is this really an SEO silver bullet? SMX WEST

Download to read offline

JavaScript SEO & prerendering best practices.

Related Books

Free with a 30 day trial from Scribd

See all

Dynamic Rendering - is this really an SEO silver bullet? SMX WEST

  1. 1. #SMX @Bart_Goralewicz With Bartosz Goralewicz Dynamic Rendering Is this really an SEO silver bullet? Experiences from setting up the world's biggest prerendering engine.
  2. 2. #SMX @Bart_Goralewicz JavaScript madness
  3. 3. #SMX @Bart_Goralewicz …however JavaScript SEO is still massively misunderstood in 2019
  4. 4. #SMX @Bart_Goralewicz
  5. 5. #SMX @Bart_Goralewicz
  6. 6. #SMX @Bart_Goralewicz
  7. 7. #SMX @Bart_Goralewicz But it gets much easieronce you start learning from the best. E.g. Google! #SMX @Bart_Goralewicz
  8. 8. #SMX @Bart_Goralewicz
  9. 9. #SMX @Bart_Goralewicz
  10. 10. #SMX @Bart_Goralewicz
  11. 11. #SMX @Bart_Goralewicz Let’s see if they practice what they preach
  12. 12. #SMX @Bart_Goralewicz April 2018 – the new version of Google Flights #SMX @BartGoralewicz#SMX @Bart_Goralewicz
  13. 13. #SMX @Bart_Goralewicz 20,000+ visibility down to 48 (!)
  14. 14. #SMX @Bart_Goralewicz Is it indexed ?
  15. 15. #SMX @Bart_Goralewicz Only 1 page indexed in Google
  16. 16. #SMX @Bart_Goralewicz THE PROBLEM #SMX @Bart_Goralewicz
  17. 17. #SMX @Bart_Goralewicz Angular Connect conference 2015
  18. 18. #SMX @Bart_Goralewicz ele.ph/angularU If you search for any competitive keyword terms, it’s always going to be server rendered sites. And the reason is because although Google does index client-side rendered HTML it’s not perfect yet and other search engines don’t do it as well. So if you care about SEO, you still need to have server-rendered content. Jeff Whelpley “Angular 2 Server Rendering” Angular U conference, June 22-25, 2015,
  19. 19. #SMX @Bart_Goralewicz v.2 Not indexed
  20. 20. #SMX @Bart_Goralewicz HTML JS #SMX @Bart_Goralewicz
  21. 21. #SMX @Bart_Goralewicz HTML JS #SMX @Bart_Goralewicz
  22. 22. #SMX @Bart_Goralewicz HTML JS #SMX @Bart_Goralewicz
  23. 23. #SMX @Bart_Goralewicz This is exactly why we have 2 waves of JavaScript indexing
  24. 24. #SMX @Bart_Goralewicz
  25. 25. #SMX @Bart_Goralewicz Source: Google I/O 2018 #SMX @Bart_Goralewicz
  26. 26. #SMX @Bart_Goralewicz New links to be crawled Second wave of indexing
  27. 27. #SMX @Bart_Goralewicz Isomorphic, universal, dynamic, hybrid, hydrating with JavaScript, etc. Latest nomenclature and solution to make JavaScript SEO friendly.
  28. 28. #SMX @Bart_Goralewicz Client-side Rendering #SMX @Bart_Goralewicz
  29. 29. #SMX @Bart_Goralewicz Prerendering Aka Dynamic Rendering an elephant in the room
  30. 30. #SMX @Bart_Goralewicz
  31. 31. #SMX @Bart_Goralewicz Google is recommending Dynamic Rendering "Currently, it's difficult to process JavaScript (…) in the meantime, we recommend dynamic rendering as a workaround solution to this problem."
  32. 32. #SMX @Bart_Goralewicz Google is recommending Dynamic Rendering Dynamic Rendering = WORKAROUND #SMX @Bart_Goralewicz
  33. 33. #SMX @Bart_Goralewicz
  34. 34. #SMX @Bart_Goralewicz prerendering Key problems with explained
  35. 35. #SMX @Bart_Goralewicz Prerendering
  36. 36. #SMX @Bart_Goralewicz
  37. 37. #SMX @Bart_Goralewicz queue JavaScript prerender static HTML
  38. 38. #SMX @Bart_Goralewicz BLACK FRIDAY SCENARIO
  39. 39. #SMX @Bart_Goralewicz
  40. 40. #SMX @Bart_Goralewicz New product
  41. 41. #SMX @Bart_Goralewicz
  42. 42. #SMX @Bart_Goralewicz What are your options?
  43. 43. #SMX @Bart_Goralewicz JÄVASCRIPT On-the-fly rendering Outdated HTML
  44. 44. #SMX @Bart_Goralewicz Serve stale/outdated HTML1. Serve JavaScript and let Google (try to) handle it 2. Prerender on the fly3.
  45. 45. #SMX @Bart_Goralewicz What if you HAVE TO do prerendering Plan your updates and deployments1. Make sure that your prerendering setup is efficient2. Remember that you need to crawl and optimize both HTML and JavaScript versions of your website 3.
  46. 46. #SMX @Bart_Goralewicz Most popular Prerendering solutions Chrome Headless/Phantom JS Chrome Headless Chrome Headless Prerender.io Puppeteer Rendertron
  47. 47. #SMX @Bart_Goralewicz Most popular Prerendering solutions Prerender.io Puppeteer Rendertron Service/Free Free Free
  48. 48. #SMX @Bart_Goralewicz Failed prerendering case study
  49. 49. #SMX @Bart_Goralewicz The Source Code vs. DOM Source code DOM #SMX @Bart_Goralewicz
  50. 50. #SMX @Bart_Goralewicz Source Code (before JavaScript): Disqus -The #1 way to build your audience Rendered website: (after JavaScript): Disqus -The #1 way to build an audience on your website
  51. 51. #SMX @Bart_Goralewicz Enter prerendering
  52. 52. #SMX @Bart_Goralewicz What went WRONG?
  53. 53. #SMX @Bart_Goralewicz <html> </head> <body> </body> </html> <head>
  54. 54. #SMX @Bart_Goralewicz Why prerendering may not be the best solution for your business?
  55. 55. #SMX @Bart_Goralewicz It’s difficult to use dynamic rendering on websites using geolocation
  56. 56. #SMX @Bart_Goralewicz Not too dynamic (pun intended) Creates two separate structures instead of one Doesn’t improve UX. Adds an extra layer of complexity May work well BUT rarely does. Requires a very good SEO team maintaining it. WORKAROUND! Dynamic Rendering - summary
  57. 57. #SMX @Bart_Goralewicz My personal beef with dynamic rendering It is only made for the sake of SEO. It doesn’t improve anything for users…
  58. 58. #SMX @Bart_Goralewicz … just like SEO ”containers” in some of the ecommerce stores.
  59. 59. #SMX @Bart_Goralewicz (better)Alternatives to prerendering
  60. 60. #SMX @Bart_Goralewicz Server side rendering All of the rendering work is done by your servers. Google gets HTML. SEO = OK
  61. 61. #SMX @Bart_Goralewicz Alternatives to prerendering
  62. 62. #SMX @Bart_Goralewicz Server Side Rendering / Hybrid Rendering #SMX @Bart_Goralewicz
  63. 63. #SMX @Bart_Goralewicz HYBRID rendering Prerendered HTML is sent to users and the search engine.Then, JavaScript runs on top of that.
  64. 64. #SMX @Bart_Goralewicz https://www.searchenginejournal.com/javascript-seo- like-peanut-butter-and-jelly-thanks-to-isomorphic- js/183337/ https://www.searchenginejournal.com/javascript-seo-like-peanut- butter-and-jelly-thanks-to-isomorphic-js/183337/
  65. 65. #SMX @Bart_Goralewicz Which brands use HYBRID rendering? #SMX @Bart_Goralewicz
  66. 66. #SMX @Bart_Goralewicz Yes, Google recommends it! „If you have engineering resources though, I would highly recommend looking into server-side rendering or even better, hybrid rendering, because that yields user experience benefits, as well.”
  67. 67. #SMX @Bart_Goralewicz Next, Nuxt and Angular Universal are the next (amazing joke) trend! 35% of JS developers want to learn Next.js
  68. 68. #SMX @Bart_Goralewicz Twitter migrated to isomorphic JavaScript in 2012 https://www.oreilly.com/library/view/building-isomorphic- javascript/9781491932926/ch01.html – Initial page load decreased 80% (!)
  69. 69. #SMX @Bart_Goralewicz All the HTML files are built with data BEFORE they are uploaded to a server Static Site Rendering Source: https://www.youtube.com/watch?v=3jeznGJHenI GatsbyJS NextJS
  70. 70. #SMX @Bart_Goralewicz Pros of static sites 1.Very fast (even during traffic surge) 2. Increased security 3.Version control 4. Cheap to host Source: https://www.youtube.com/watch?v=3jeznGJHenI
  71. 71. #SMX @Bart_Goralewicz Limitations
  72. 72. #SMX @Bart_Goralewicz
  73. 73. #SMX @Bart_Goralewicz What if we just keep CSR JavaScript ? *Client Side Rendered *
  74. 74. #SMX @Bart_Goralewicz#SMX @Bart_Goralewicz
  75. 75. #SMX @Bart_Goralewicz Is JavaScript Evil? #SMX @Bart_Goralewicz
  76. 76. #SMX @Bart_Goralewicz Is JavaScript Evil? #SMX @Bart_Goralewicz No, it is way worse.
  77. 77. #SMX @Bart_Goralewicz Is JavaScript Evil? #SMX @Bart_Goralewicz No, it is way worse. It is complex ☺
  78. 78. #SMX @Bart_Goralewicz JavaScript SEO best practices
  79. 79. #SMX @Bart_Goralewicz JavaScript taming the beast in 3 easy steps #SMX @BartGoralewicz
  80. 80. #SMX @Bart_Goralewicz Step 1. V.2 Choosing the right framework
  81. 81. #SMX @Bart_Goralewicz Step 2. Rendering JavaScript Prerendering Server Side Rendering Universal/Isomorphic Static site generators (Gatsby.js)
  82. 82. #SMX @Bart_Goralewicz Step 3. Enjoy your traffic!
  83. 83. #SMX @Bart_Goralewicz Get the Starter Package for FREE Contact maria@elephate.com Give the password ”Freelephate” Within 15 minutes from this lecture Total value of the package: $1000 Maria Cieślak Head of SEO
  84. 84. #SMX @Bart_Goralewicz ele.ph/smxwest Download my deck
  85. 85. #SMX @Bart_Goralewicz THANK YOU! SEE YOU AT THE NEXT #SMX bartosz@goralewicz.com
  • adardesign

    Aug. 17, 2020
  • RicardoArrigoni

    Oct. 22, 2019
  • AlexandraBlaison

    Sep. 17, 2019
  • jonhenshaw

    Feb. 25, 2019
  • jonclark

    Feb. 24, 2019
  • AjinkyaMhatre

    Feb. 14, 2019
  • ChristiaanBollen

    Feb. 13, 2019
  • freeg131

    Feb. 13, 2019
  • DanielVarberg

    Feb. 6, 2019
  • AnitaIdisi

    Feb. 6, 2019
  • MartinMutter

    Feb. 5, 2019
  • ecroissier

    Feb. 5, 2019
  • riadabdallah

    Feb. 5, 2019
  • DevanshuMBhatnagar

    Feb. 5, 2019
  • AdamSidorczuk

    Feb. 5, 2019
  • SureshPeters

    Feb. 5, 2019
  • schgrv

    Feb. 5, 2019
  • SaraSnchezBarbeito

    Feb. 4, 2019
  • chuckreynolds

    Feb. 4, 2019
  • EverettSizemore

    Feb. 4, 2019

JavaScript SEO & prerendering best practices.

Views

Total views

9,885

On Slideshare

0

From embeds

0

Number of embeds

457

Actions

Downloads

75

Shares

0

Comments

0

Likes

23

×