How to improve SEO in Progressive Web Apps (PWA)?

You are probably thinking how using PWA will affect the SEO of your website. It’s a fair concern. I hope in this article I will be able to address your concerns regarding the SEO in Progressive Web Apps.

If you haven’t read the blog post from Krzysiek and Antonio I strongly recommend it. You will get an understanding of what a Progressive Web App is and whether it’s worth using it in your project.

Are Progressive Web Apps bad for SEO?

This is one of the first questions that comes to mind when thinking about PWA. This concern comes from a time when search bots couldn’t process JavaScript. Fortunately,that time is long gone and the major search engines can render JavaScript content without problems, however it’s not ideal.

A lot of confusion comes from how the search engines are indexing the PWA websites. To better understand this, let’s look at how Google indexes a website. When Googlebot crawls a webpage it does so in two phases. First it takes the content from the HTML source without rendering JavaScript. In the second phase it renders JavaScript. If the website doesn’t depend on JavaScript to render the content then it will be indexed in the first phase. However, if the website needs JavaScript to render its content, then it may take a couple days or weeks before it gets to the second phase where it gets indexed.

For some websites indexing time may be an issue. Fortunately, there are solutions to that. I will go into details in the “Content rendering” section.

Will PWA improve the SEO?

The simple answer is - no, at least not directly. Creating PWA will not give you any advantage over traditional HTML websites. The same rules apply to PWA and conventional websites. However, by following the best practices for PWA you will be able to create a website with a great user experience, which will help with SEO. Good Progressive Web App applies some of the SEO best practices by default.

Things that make PWA great

Google created a checklist for Progressive Web Apps. It defines features that every PWA should have.

Among others PWA should:

• Load fast and stay fast
• Work in any browser
• Be responsive
• Use HTTPS

These principles are not limited to PWA. Every website should follow these to ensure it stays on the top of the SEO game. When developing a PWA, consider it best practice to include the above attributes in your project. After implementing these you can focus more on delivering great content, proper HTML tags usage, keywords and other key factors that impact your Google rank.

Developing PWA means that you are creating a great user experience. Thanks to that, users will stay on your website for longer and come back more frequently, which is also a big factor for SEO.

Content rendering

Content is one of the most important elements of SEO. Results that are more relevant to what users are looking for are ranked higher by Google. When it comes to content and building a Progressive Web App, it’s crucial to decide how you should render the content to users (and bots).

In this section we will look into different approaches to rendering and see how they affect the indexing (see the “Are PWAs bad for SEO?” section).

Server-Side Rendering (SSR)

Let’s start with Server-Side Rendering, because it’s the most common rendering type on the web. In the past bots had problems with crawling websites that were created using JavaScript, so SSR was the only way to get indexed. Though this is no longer the case, it still remains the preferred way of serving the content.

As the name suggests, in SSR the content of the website is rendered on the servers. Therefore, whenever a request is submitted you get a fully-rendered page - with text, images and so on. This means users and search bots will see the same version. Due to this the page will get indexed by a bot in the first phase of indexing.

In general SSR helps with fast loading, because a client doesn’t have to wait for JavaScript to render the content. However, hosting bigger pages that rely on JavaScript may be more expensive. It’s also not the default way of rendering in modern JavaScript frameworks. And while most of them offer solutions for Server-Side Rendering, some libraries may not be compatible with it.

Client-Side Rendering (CSR)

It’s the default type of rendering for modern JavaScript frameworks. In CSR the content is rendered directly in the browser. The website with CSR relies heavily on the client’s ability to process JavaScript. Hosting client-side rendered applications is cheaper than SSR and they often feel faster when navigating between pages, because users don’t have to wait for the response from the server.

It may seem great, but there are some disadvantages. One is that client-side rendered pages may be slower on mobile devices or older machines that don’t have much computing power. CSR also raises problems with SEO. Real users and bots will not see the same website. It will take more time to get indexed, because search bots in the first wave of indexing are only crawling the static HTML, so with CSR they will only see a blank page. The bots process JavaScript in the second wave, so eventually will see the content correctly. But this will take more time - even days. For websites with thousands of pages thismay be a considerable problem.

Even if indexing time is not an issue in the case of your project the pages that are fully rendered on the client side are not perfect for PWA. A Progressive Web App should work in any browser, even with JavaScript disabled. The core functionality should be done in just HTML and enhanced with JavaScript, so bots shouldn’t see a blank page. This leads us to the third type of rendering…

Hybrid Rendering

Hybrid Rendering is a solution that combines SSR and CSR. In this approach both users and bots see the same view initially. So when they visit the page the static HTML is served. It can be indexed by the bots without problems and is also very fast. For normal users JavaScript takes over after the initial render so for the rest of their visit the website is rendered on the client side.

Hybrid rendering is fast for loading and it also feels fast for users when browsing the website. It combines the advantages of both methods - SSR and CSR. It’s also a solution that is recommended by Google.

However, it doesn’t come without drawbacks. One of them is hydration. Without going into much detail - hydration is a process that turns static HTML into a dynamic web page. Have you ever seen a page that doesn’t react to clicking, but seems loaded? That probably was because of hydration. It doesn’t mean that the Hybrid Rendering is bad altogether, but it will require a little bit of work and using advanced hydration techniques to implement properly.

Final words

SEO in PWA is a complex topic. When implemented properly PWA is a great technology that comes with a lot of features improving SEO. Choosing different rendering methods will impact indexing speed. This alone will not get you the top position in Google. You will still have to create engaging and interesting content to keep your users on a page.

I hope this article helped you understand how building a Progressive Web App will affect the SEO of your website. If you have any questions or are planning to create a PWA feel free to leave us a message.

• PWA