Back in 2015, Google found a way how to make any user session on a smartphone or a tablet more reliable, fast and engaging. Progressive web apps not only showed new opportunities for digital marketing but also decisively established it’s mobile-oriented development direction.
Thanks to the technology structure it’s able to provide everything is expected from the Internet surfing on small personal devices including quick browsing on the quality level and widen the experience to the ranges of a mobile app by ensuring:
No-network usage. Thanks to specific employment of cache mechanism such applications assure uninterrupted web exploration regardless of the connection status.
Multi-platform app. Since 2018 when PWA was finally appreciated by all OS developers it became a universal engagement booster affecting Android, iOS and the most popular desktop systems.
Native-like UI. It’s hard to reach the level of the interface inherent to the best mobile apps with mobile website optimization. But PWA transformation completely refutes that statement.
Nevertheless, the technology appearance hasn’t automatically solved all existing challenges website owners should go through at least to establish their sales funnels. How you can benefit from the impeccable user interface when your page has no visitors?
How website speed affects SEO
Google’s senior webmaster trends analyst John Mueller once stated that there are no PWA SEO benefits as well as there are no intentions to change that. But it’s known that this multinational technology company has never had the politics to present all the terms and conditions of the contest at once.
However, at the beginning of 2018, they give another hint to web developers announcing that a page speed ranking factor is now also valid for mobile searches. This step was made to encourage them to analyze a performance-UX connection and ensure quality for both elements.
But let’s put aside PWA for a bit and investigate if any of its ancestors and competitors can help to employ that tip.
SPA SEO problem definition
SPA or single-page applications can be considered as one of the first attempts to erase the performance limits of web apps. User interaction with the technology is implemented by a dynamic rewriting of one current page. Such an approach completely eliminates periods necessary for receiving a response from a server.
All processes are hidden from users providing them an uninterrupted experience that they usually get from desktop applications. Choosing SPA also simplifies and speeds up the development process. However, such benefits arguably can outweigh challenges teams should overcome to make the project SEO-friendly.
The core of the conflict between single-page applications and search engines is a JavaScript codebase. Their crawlers mostly can’t process it and ergo make websites visible for potential visitors. For now, only Google resolved this integration problem.
Surely, considering its flagman position it might not seem like an issue. But, firstly, focusing only on one search instrument even the top one initially limits the number of potential clients. Besides, the necessity of installed and enabled JS as well as and a lower security level compared to regular apps make SPA even less attractive for users.
Secondly, each particular app requires to be put through additional procedures to become “compatible” for it. Their difficulty, as well as following maintenances, increases with a website complexity. Such techniques as server-side rendering (SSR) allow simplifying the process but unfortunately not for every single-page application.
Server-side rendering and SEO: is there interconnection?
Server-side rendering became a supportive remedy for the evolution in the web app scope. It gave the ability to receive in response to an HTTP request a page content in the appropriate form for display in the HTML file. Thanks to the fact that such a package is prepared on a server and each transmission takes just milliseconds it even improves application performance.
As stated above SSR allowed to solve SEO problem of JS applications like SPA. Thanks to such process running an engine bot-Javascript compatibility issue making website content conforming to be indexed and crawled within a short period of time.
There are two ways to go to implement SSR: dynamic and hybrid. The first option takes care separately of users by providing them content rendered on the client side and bots by sending them a static HTML. Hybrid rendering is a newer and more long term solution. It excludes this additional step treating users and bots the same way leaving a JS an initial page load.
Once a page is visible and ergo can be displayed within search results it’s in the competition for SEO rankings under the common terms. And actually, a higher loading speed works in the website favor since it’s one of the basic qualities of the user experiences provided on the appropriate level.
How to build PWA SEO-friendly
As for SPA, the core issue that can lead to the lack of SEO-friendly website status is that Javascript is usually employed for progressive web apps development as well. That’s why initially should be considered the following:
Googlebot system. For rendering and parsing of JS, Google SE is using a WRS browser based on Chrome 41 which is sensitive to code and link structures. Besides, it doesn’t have defined requirements for elements that makes difficult to predict possible fallouts. For instance, oneClick events for menus can make it avoid your website during indexing.
Interface availability. Offline performance is one of the core benefits of PWA. For its implementation progressive web app developers mostly use like WebSQL or IndexedDB that unfortunately are disabled by the Googlebot system.
Rendering specifics. To provide users search results quicker Google limits time to around five seconds for downloading website content that should be crawled. If the time runs out only that part of the content will be presented that was rendered until the stopping point. Besides the whole indexation process for JS is much more resource-intensive than for HTML.
However, due to the technology specifics, they are much easier to overcome. Review the excerpt from the Google-recommended to-do list for quality assurance of the project result to tune SEO for progressive web apps.
1. Use SSR
Whether dynamic or hybrid approach but SSR should be implemented to feed Googlebot HTML that it’s able to digest. That gives PWA an isomorphic tone and makes it universal for indexation.
2. Optimize URLs
The uniqueness of page links should be ensured. Such elements as hashtags ‘#’ should be avoided since they are working as a stop-sign for a search engine crawler.
3. Check metadata
To take advantage fully of PWA linkability the sharing options should be ensured by using microformats, open graph and appropriate metadata including Schema.org and specific ones for social networks.
4. Test performance
It should be assured that all the above steps led to the necessary results and basic PWA peculiarities are implemented correctly. It can be done with such tools as Lighthouse and Fetch as Google.
eCommerce SEO: why use PWA?
The appearance of progressive web apps significantly contributes to the digital transformation of the retail and consumer service domains. Such conglomerates as Jumia, Flipkart, Starbucks, Lancôme, etc. already collecting fruits of appropriate for their needs technology selection.
Appropriate search engine optimization is vital for online marketplaces as well as the high-level user experience. Loading speed is not the only feature affecting PWA SEO ranking. With years of experiments by eCommerce pros, it was noticed some correlation between social and customer engagement and organic positioning.
Such metrics as session time, scroll depth, bounce rates, etc. aren’t only depended on content relevancy and quality. Some studies show a clear connection between user website presence periods and their ranks in search results lists. Review how every feature of progressive web apps can contribute to the mobile revenue raise.
Mobile presence. PWA is a cross-platform solution covering all desktop OS as well as Android and iOS that significantly increases the number of visitors
Native experience. Branded Home Screen icon and regular push notifications allow continuing establishing engagement out of store ensuring a certain amount or returning customers.
Fast performance. The high loading speed of each page prolongs website exploration time and area widening it further home or initially searched pages.
Confident journey. Smooth and secure surfing across the website regardless of the network availability diminishes bounce rates caused by first-time or not highly-engaged users.
Offline availability. A no-Internet usage option boosts the loyalty to a brand or a service provider by saving mobile traffic and customers time they would’ve spent on a network search,
Device consideration. PWA also demands less memory space and an obligatory profile on distribution platforms for the installation which increases the number of app downloads in comparison to native.
Auto-update. There’s no need to interrupt user sessions with update requests. Any changes can be implemented on the background in the online mode.
One more pro argument is that there’s a way to avoid application development from scratch. To give your eCommerce store a boost you can use an already optimized customizable storefront compatible with popular platforms like Magento, Shopify, etc.
To sum up, surely PWA and SEO aren’t initially two pieces of one puzzle. Notwithstanding, few easy-to-implement steps can outweigh basic and search engine optimization related cons of the technology.
As a result, you receive not just a downloadable website but a powerful digital marketing instrument that’s already been stamped with a quality mark by big players. That’s why it definitely won't be redundant in the toolkit of any eCommerce store owner.
