SEO for JavaScript-based websites (built with AngularJS, jQuery, ReactJS, etc.) requires a lot of knowledge, development, testing, and is notoriously difficult to get right. But let’s face it, even with all those problems, JavaScript is here to stay. It lets you create fast, dynamic, and beautiful websites focused on delivering a great user experience.
Google vs. JavaScript
We can clearly see that, in the last year, Google focused mostly on supporting user experience and performance. We can see that in Google AMP websites focused on lighting fast performance, Single Page Apps (SPA), or Progressive Web Apps.
Google claims that they now are much better at crawling and indexing JavaScript. Unfortunately, current results are still far from good. There are plenty examples confirming this, one of which is Hulu.com JavaScript SEO fail.
This is why SEOs usually lean towards a mix of traditional server-side rendering and small pieces of JavaScript added to the browser as a universal solution, which makes applications crawlable and indexable by search engines.
Unfortunately, this isn’t perfect as it is often hard to maintain and not all applications can be implemented this way (the complex ones). The user experience also isn’t all that great because it takes some time to load all the JavaScript libraries and bootstrap the application.
An alternative is to use pre-rendering services that run your JavaScript application/website and record the HTML output, which can then be served to crawlers using an extra piece of software running on your server. The benefit of this approach is that, in theory, you can pretend that the problem doesn’t exist and build your application in JavaScript any way you want.
Unfortunately, in practice, this doesn’t always work and requires complex debugging to fix. On top of that, it’s yet another piece of the application stack to maintain, and there may be compatibility issues with your application, causing the caught HTML output to be incorrect. This is an issue because it may be hard to notice any resulting SEO problems until it’s too late and your rankings are affected.
As you can see, it can all get quite complicated.
What if there was a hybrid that can connect all the perks of fast and dynamic JavaScript with an easy-to-crawl HTML/CSS? Fortunately, there is a new kid on the block, and it is called Isomorphic applications.
Isomorphic applications (also called universal applications) solve the problem of crawling and indexing by performing an initial render on the server and then using that HTML as a base for bootstrapping the JavaScript application in the browser. The Isomorphic approach takes the best of two worlds (static HTML and JavaScript), providing fully indexable, fast, and user-friendly websites.
How Does It Work?
This isomorphism means that the very same JavaScript code used by your application can be run on both the server and the client (in browser).
Thanks to this feature, you can feed your application with some data coming from the database on the server, run it, and capture the resulting HTML output that would normally require a browser to assemble. This output can then be served as your initial HTML to everyone who requests it (including crawlers, such as the Google Bot).
Your application can then use this HTML as a base for itself and continue operating on it in the browser as if it were rendered by the browser in the first place.
Benefits of Isomorphic Applications
Search Engine Indexability
Web crawlers have a lot of difficulties crawling and indexing JavaScript content (and some of them still don’t even try). Crawlers analyze raw code without processing or rendering it. What you see in your browser is processed, rendered content. Rendering, processing DOM, etc. requires much more computing power and is much more complex than just analyzing plain text, so it would make crawling way more expensive for search engines.
Isomorphic applications solve this problem by executing code on the server to render static pages and then leaving all the JS responsible for user interactions to be run by the browser (user).
As a result, the crawler sees the exact same output the browser sees, which completely solves the SEO indexing problem. All the content is rendered and it is there when a search engine accesses the page.
Perceived Load Time is Faster
Downloading JS-heavy code can take some time, especially in areas with a slower internet connection. Rendering all the downloaded code to DOM, then waiting for the app/website to bootstrap and perform initial AJAX requests also takes a while. This often leads to a slow initial load of the website or application, unhappy users, and a lowering of the website’s income. Fortunately, the isomorphic approach solves part of this problem.
By rendering application markup on the server-side, there is no need for the majority of AJAX calls and there is less rendering happening on the client side (due to initial rendering on the server). This decreases perceived load time by around 40%.
There’s No Such Thing As a Free Lunch
As this famous saying suggests — nothing comes for free. The isomorphic approach is great since it solves the SEO indexing problems, results in faster load times, and simplifies the application stack (as compared to using pre-rendering services). Also, it can bring benefits for large code bases (easier to maintain, client and server code get separated, etc.). However, it comes at a price.
You Are Forced to Use Certain Technologies
First and foremost, your server needs to support running NodeJS applications (for server-side rendering of JavaScript).
On top of that, the application framework you use to build your application has to support this approach, too (but the key ones do or have plugins that do — Angular JS, React JS). As you see there is no Ruby on Rails or Django on the list. Those frameworks can’t be used to build isomorphic JavaScript applications, but they can be used to build APIs that power those JavaScript applications, which is a great way to separate the data-processing code from the user interface powered by JavaScript.
All this means is that this approach is not very well-suited for existing projects, as it’s not a plug-and-play solution. It can work well with existing applications if they rely heavily on the APIs, yet would still require a significant amount of work to implement.
You Need Expertise
This is still a fairly new approach, very different from the older ones (e.g. the server-side rendering/jQuery mix), that requires cutting edge technology. As a result, you need developers who are up for the job and are comfortable working with these new technologies; developers who are not afraid to experiment and get their hands dirty.
Sometimes the ready-made libraries don’t play well together, sometimes you need to solve problems yourself, and you need the necessary experience to get the application to the finish line.
Getting Started With Isomorphic JavaScript
While the isomorphic approach is not yet widely popular, it’s gaining a lot of traction. At this point, it’s probably the best way to build a large, dynamic application that requires great, smooth user experience while not compromising on SEO.
It’s probably not a great idea for small projects because it requires a lot of engineering and experience to get right, but this will get easier over time as new libraries and tools are developed that take care of the more complex parts of the process.
Overall, it’s a very promising way of solving the SEO indexing problem that’s been bugging the community for years. If you’re building a new, large application that requires great SEO compatibility, you should definitely consider it.
SEOs & Developers
While doing research for this article, I realized that despite what we (SEOs) think, the community of developers is really excited about creating SEO-friendly websites based on JavaScript.
I think we need to start tapping into the potential of isomorphic JavaScript and other awesome new technologies. Special thanks to Kamil Grymuza who helped me a lot with this research (and actually co-wrote this article with me). I want to write more articles about JS and SEO soon, as there are tons of interesting topics to cover.
Image Credits
Featured Image: lenkaserbina/Depositphotos.com
In-post Photo: stockertop/Depositphotos.com
