Power up your Vue site with SEO
Last month, I had the opportunity to give a talk about SEO and SSR with Vue, currently a very popular framework that is growing rapidly.
The goal of this talk went to share all the experiences that as a developer I face creating an attractive and functional product, a product whose would be accessible and visible to different clients (humans and computer algorithms) throughout the internet. In general, we assume that readers are people accessing content from a web browser with an actual device. The truth is, software is constantly seeking information from your website, access it and extract it through HTML scraping or consuming an API. This process is called “Crawling” and is mainly used by indexing systems such as Google and Bing, which show relevant sites, based on their content.
JS-based applications tend to have a single tag (div) that interpolates an entire application built with JS. For Vue it’s a similar situation. Nowadays, the main search engines are able to process JS and obtain indexable information to help users find your site. But this procedure does not guarantee that your site is completely indexable.
How to index a page built with Vue?
In this article I will present two well known methods: Pre-rendering and Server Side Rendering.
Pre-render
The logic behind the “pre-render” is to generate a site with all the tags at build time. The builder must take all the references and HTML nodes generated via JS in our application and build the HTML tags, saving them in the corresponding files (dist/home.html). This way, when the Crawling system passes through your site, it will be able to assimilate the content and index it easily.
How to do it?
If you already use Vue CLI (Command Line Interface) on your application, the process will be easy. You will need to install some modules and update some parts of your project. To do that run the following in the terminal:
And update the vue configuration of your app.
When the modules are installed in our application and the changes on the code are done; We can get a better final version of our meta description.
Server Side Rendering | SSR
However, some functions used with the pre-render method don’t cover all the necessities for every business models. Sometimes the business relies on constant indexing of the site, because the content they generate is constantly changing.
In summary, using a pre-rendering strategy would have the following drawbacks:
- The application is rendered in the browser.
- Routes have to be defined before uploading the site, because pre-rendering relies on the construction phase to generate the HTML.
- The dynamic content/paths will have problems to be indexed.
For all of the issues mentioned above, the Vue community has designed strategies to mitigate these issues and created an example (hacker news clone) to illustrate how to achieve server-side rendering with a normal Vue application.
Repository: https://github.com/vuejs/vue-hackernews-2.0
Implementation Guide: https://ssr.vuejs.org
This implementation allow us to display useful tags for the search engines, all on the first load, we don’t need to wait for the render anymore.
As you will notice, server rendering requires the use of a “server” that allows visitors to obtain the site’s information. Therefore you should consider the following:
- Node environment limitations. You will have problems with some libraries because, the server doesn’t have the Window object, which is used by many current libraries in frontend.
- Increase of the production cost, you will have to pay a monthly rent of the server to perform the SSR.
- Response times will be affected by the quality of your cloud service provider.
Server side rendering has some hidden advantages we sometimes forget, some of them are:
- Better backward compatibility
- Better performance in older browsers because the server will do the “scripting” on it’s side.
- Prefetch or Async load is easier, because the server can pre-fetch the info before display the site to the client.
How to do it?
From a general perspective, making your SSR implementation tends to be tedious and complicated mainly because your project will depend on third party libraries and the real challenge will be creating your “glue code” to make everything work correctly, with the limitations of using SSR. Fortunately, we currently have a very stable project and an active community that guides us through the process. It also has a standard for the implementation of “components” and “plugins”, using secure techniques to implement extensions in your SSR application.
Nuxt.js
Starting a project with Nuxt.js is quite simple. The community collaborated a lot to build a useful and comprehensible documentation.
The main features are:
- Framework for building applications with Vue
- Modular 🔌
- Standardized Ecma5+
- Handling of: Tags, Router, Vuex, meta…
- Pre-processors: Sass, less, coffee & pug…
- Server Side Rendering SSR
All those features will help you integrate your development environment quickly and safely. For this talk, I developed a fairly simple example using a public API of the series (Rick & Morty) to list the characters in it.
We can also confirm that the headers have the necessary metadata for a good SEO
And the Open graph tags (special addition to be Social Friendly)
You can see the source code here: https://github.com/ea2305/ssr-example And the demo here: https://nuxtssr-example.herokuapp.com/ API: https://rickandmortyapi.com/
Conclusion 📗
The way we build applications has been changing in the last few years. Most of the changes directly affect the SEO optimization of our application, but as we mentioned on this article, most of these issues can be fixed with an specific approach.
Probably your business doesn’t require server side rendering because most of your content is static and the site will have updates made by code, in that case Pre-render method is enough to keep your site visible on internet.
On the other hand, if the application relies on dynamic content changing by registries from a database, probably you will need to go for the SSR technique that will bring you a better SEO and ensure your clients will found you.
Finally if you are having a hard time setting up your SSR environment, take a look Nuxt.js project and focus on the things that matter. At the end, all these techniques give us an effective way to build a SEO friendly website, just keep in mind everything we talked about and start building great and easy to find JS applications.
