Progressive Web Apps and SEO
In one of our previous articles we wrote how web industry’s switching to a mobile-first approach and emerging technologies like Progressive Web Apps can help you boost your website’s conversion rate and get ahead of your competition in the endless race for organic traffic.
There is no doubt PWAs are bringing huge growth opportunities to any business, and there is practically no merchant not willing to upgrade to Progressive Web Apps at some point.
In this article, we will demystify some assumptions that always surrounds the space when it comes to SEO, and explain how PWAs really work with SEO.
Why is SEO a concern?
Despite countless benefits provided by Progressive Web Apps, to stay ahead of the game you still must ensure that your website is properly set up from the technical perspective.
So, why do we see so many businesses interested in progressive web apps hesitating to implement the technology? The answer is fear of changing what is already proven to work, as well as not having a complete understanding of how SEO works with PWAs.
If it ain’t broke, don’t touch it?
Like it or not, SEO optimization is a domain of constant change and adapting to a new reality. Even if your website has a perfect SEO score today, that doesn’t mean that a sudden change of search engines algorithms or new tendencies like introduction of mobile-first indexing won't change the status quo.
You have to adapt and react fast to stay ahead of the game.
Technical SEO configuration isn't a straightforward process, often bringing headache to website owners. But when it comes to the basic principles of technical SEO, the task remains the same for any website, whether PWA or not, and ultimately, doesn’t sound that difficult at all.
In order to get your website appear correctly in SERPs, you must make sure that all the content you want to show in SERPs is properly structured, marked, and visible for search engines, at the same time restricting search engines from accessing all the elements that shouldn’t be visible.
If you're not sure your website is following all the best SEO practices, a technical SEO audit will come in handy to reveal all the issues and provide you with a step-by-step plan on how to fix them.
OK, but how exactly PWAs work with SEO?
Progressive Web Apps are different from “traditional” HTML-based websites. This caused a myth that PWAs can’t be indexed by search engines. This is not true, though.
Progressive Web Apps can be indexed just like any other web pages, although the techniques used to ensure that the search engines see and understand your website’s content will differ. Let’s take a closer look to understand why.
Server-Side Rendering vs Client-Side Rendering
Traditionally, the majority of websites use Server-Side Rendering or SSR to “pre-boot” everything on the server side. When user is requesting a page, you send a rendered version from the server to the user’s browser. This approach is straightforward but comes with some downsides— yes, you will get to load your first meaningful paint very fast, but this approach will also require to load the entire HTML every time a user is switching a page. This can be painful, especially when operating on a bad internet connection.
Sounds great, right? So, why then many website owners are still not keen on switching to CSR? The answer is — they are trying to make sure that the Google bot and search engines crawlers can see their website’s content.
This is how Google can see SSR and CSR pages "at first sight".
All of this results in some sort of uncertainty. Merchants have to balance between improving their visitor’s user experience and making sure search engines can successfully do their job.
Is there an alternative?
Despite a challenging task, there are actually several ways how you can get the most out of your website, without a fear to lose your SEO.
Dynamic rendering is a great workaround solution to solve the issue . Dynamic rendering requires your web server to understand the source of a request, in other words, detect whether it's a real visitor or a search engine crawler and serve different versions of content to different sources.
Explanation of Dynamic Rendering from Google
This allows you to provide a Client-Side Rendered version for your real visitors, and conditionally serve the server-side rendered version to search engine crawlers.
Prioritize your content and combine SSR with CSR
There’s also another neat way to solve the task. You can prioritize your content, identifying the most important elements of your page that you definitely want to pass to search engines as soon as possible, and serve this content using Server-Side Rendering.
By doing this you can be confident that search engines will pick up the crucial information (like cannonicals, titles etc.) immediately after discovering your page, and the rest of the information will be processed via Client-Side Rendering during the second wave and eventually added to index.
If you think that implementation of Progressive Web Apps and technical SEO configuration is too complicated of a process, fret not! There are ready-to-use PWA solutions, like ScandiPWA, that are built according to the best SEO practices and can help you save tons of time and resources.
Such solutions are tested and backed by strong communities, so you can be confident in the quality of the code and benefit from updates.
If you are considering Progressive Web Apps, here are some useful tips:
- Perform SEO audit. Whether you're running a PWA or a regular website, SEO audit will help you reveal all SEO-related issues and offer solutions to fix all issues.
- Leverage ready-to-use PWA solutions to make sure your website is following best SEO practices.
- Involve SEO specialists in your project from the very beginning. It's always easier and less costly to prevent any possible SEO-related issues, rather than fixing them after the GO-live. Check how to manage your SEO during the go-live process.
- Make regular tests. You can test Progressive Web Apps using the same set of tools that you're using for your regular website. For example, take Mobile Friendly test and see how Google renders your page.
No doubt, Progressive Web Apps are the future of the web. Although there are plenty of benefits and growth opportunities provided by PWAs, SEO-related concerns, often lead by false assumptions, are one of the main reasons why many merchants are still hesitating to implement the technology.