Server-Side Rendering vs Client-Side Rendering – How does it impact SEO

It can be tempting for a web designer to include many cool elements on a website like fancy slideshows, or “lazy-loading” some elements as the user scrolls down the page, but this client-side rendering is really impacting SEO in a negative way. It used to be that Google, and other search engines, had no way to know which elements on a website were visible or invisible. This understanding led to widespread exploitation as keywords were stuffed into invisible (to human) elements, or into text having a color that matched the background on which it was placed, thus driving SEO rankings up significantly. As more entrepreneurs learned of such exploits, the number of SEO-specific firms grew significantly, as did the number of SPAM messages we would receive about the subject. This all changed with the Google algorithm Panda.

One of the biggest problems with WordPress is that when you activate more than about 25-plugins, performance takes a hit and it usually requires hiring an extra person to fill the roll of server administrator who is skilled in increasing performance not on the application layer where the problem resides, but on the server or even routing layer. As your new professional server admin (~$100,000/year) now decides to add a load balancer ($20/month; Linode), increase the number of back-end PHP server nodes (between $5 and $80/server/month; Linode), and breaks the database off onto its own server (between $60 and $960/server/month; Linode), the real cost of using the open-source WordPress platform as a multi-tool comes into view.
Panda was able to determine which elements of a page were visible, invisible, had text that matched the color of the background, and more. Overnight, pages that once sat happily perched atop that otherwise elusive first place on Google search rankings were now nowhere to be found in the entire Google index. Panda was the start of a larger effort to weed out what Google considered “Blackhat” SEO tactics, and it worked to a large extent. Thus, even as Google can now parse JavaScript and be able to render a page as a user might see it, hidden elements are still considered suspect, and that includes your fancy hero slideshow. There are two cases, in particular, that are considerably negative to SEO when rendering the page client-side:
You deliver all HTML required to render the page, yet hide that content until it is ready to display;
You “lazy-load” content via AJAX or similar scheme as the user scrolls down the page.
In the first case, you may have a homepage containing a hero slideshow. Each hero slide may have its own H1 and H2 tags. However, as Google renders the page, only one of those slides is going to show up and the additional H1 and H2 tags will become suspect. For the second case, Google is likely not seeing that additional content at all as there is no evidence to suggest that it will follow AJAX calls to gain the additional content. Google can’t grade what it can’t see, so it doesn’t matter how relevant that extra content may be, it will likely not be included in the Google-rendered page.
So, what’s the best way to display content?
Render everything server-side, and don’t hide elements of any content, if you can help it.
Rather than a hero slideshow, have a static hero with a single H1 and H2 tag.
Move any content you once thought was slideshow-worthy to small sections under the hero. Use H3, or higher, tags, as the title of these sections and provide a link to the relevant sub-page of the website within that section.
For mobile, rather than collapse these sections into a slideshow, make the sections fall one over the other so that all sections are displayed on mobile devices.
Finally, don’t wait for a user-generated event in order to render SEO-important elements of the site. And while it is common to lazy-load images, images have been shown to have significant SEO value as Google can parse both text and barcodes within images, in addition to being able to determine what might be in the picture. Thus, rather than lazy-loading these images, optimize their size and quality for delivery over the web.
With just these few tips you can turn your SEO score to the positive.