How to improve SEO in Progressive Web Apps (PWA)?Konrad Jaguszewski
28 June 2022
Reading Time: 5 minutes
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?
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 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)
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.
Client-Side Rendering (CSR)
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.
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.