PWA SEO: SEO Best Practices to Improve Your PWA Ranking

By 2019, Google officially announced mobile-first indexing as a default method for all websites, including eCommerce. So, for all practical purposes, a mobile-first approach to your online business can impact your store’s ranking on the SERPs. Hence, the PWAs come into the picture!

So, what exactly is PWA?

PWA or a Progressive Web Application is an application software built with modern APIs and delivered through web browsers. Built using standard web tech like CSS, HTML, JS, etc., PWAs are commonly used by eCommerce businesses to boost website traffic and conversion rates. Since 2021, PWAs are fully or partially supported by Apple Safari, Google Chrome, Firefox for Android, and Microsoft Edge. It is a relatively new trend, and stats support PWA optimization to yield impressive results.

So, in all its glory, a PWA is a website having a distinct advantage for mobile users. It has the look and feel of a native mobile app but is delivered via web browsers. Another advantage is that it beats the hassles of downloading an app from the store. A PWA also helps overcome issues regarding slow networks and data limitations. Hence, it can be said that PWAs are reliable, enhance the website loading speed, and enhance the user experience. A growing eCommerce business needs to ensure that its online store conforms to the requirements of PWA. Twitter and Gmail are two of the most popular PWAs that render impeccable UX to their visitors.

There are four core technologies on which a PWA works:

Web App Manifest File: One of the main features of a PWA is that it is available to install directly on the home screen via a website that has already been visited. Users do not need to download the app from the app store. For this functionality, the PWA requires a manifest.json file. This will allow the developer to control the launching of the app and its appearance.
Service Worker: The service Worker is what makes the PWA fully functional with limited internet connectivity. It is a JS file that runs independently in the browser’s background, detached from the web page. This JS file can handle and intercept network requests, cache and retrieve resources and deliver push messages when necessary.
TLS, Transport Layer Security: One of the essentials to deploying the service worker on a website is to set up an HTTPS on the server. This is because of the service worker’s ability to fabricate and filter responses and hijack connections. Hence, you must register service workers on the pages served over HTTPS to protect data integrity.
Application Shell Architecture: The application shell is the minimum HTML, CSS, and JS required to power up the PWA’s UI. Application shell files can be cached on the first visit using the service worker to ensure good performance and faster load times. This helps the application to load instantly on repeat visits.

Leveraging these four techs, all modern web browsers now support PWAs with a superior user interface and user experience.

Hence, to stay ahead of the competition, brands are now constantly implementing and optimizing their PWAs, to meet their customers where they are. Where are you?

But the question remains! How are PWA and SEO related?

How does PWA benefit SEO?

App developers are constantly striving to increase the visibility of their apps. Herein, PWAs come to the rescue of native app developers by carrying several SEO benefits. With users avoiding installing more apps, PWA has become a boon for eCommerce companies catering to mobile users. PWAs are known to boost SEO and enhance online visibility.

PWAs speed up indexability. Marketing strategies factor indexability in Google to a greater extent. After being optimized for mobile usage, PWAs render enhanced user experiences with each visit.
Increased user engagement is another benefit because of better performance. PWAs load and work much faster than native apps. Search engines like smooth-performing and faster-loading apps for ranking results.
An added benefit of PWAs is push notifications. This again helps to enhance UX and CX.
Users now prefer PWAs to native apps because of the minimized steps involved in installing, logging on, and using the apps.

Since now better SEO directly translates to better user experience and PWA’s take the user experience through the roof, we shall move on to PWA and SEO practices. Let’s dig into indexing the PWAs for better online visibility.

PWA Indexing for SEO: JavaScript Rendering

Fundamentally, PWAs are websites and need to be optimized to rank on SERPs. But JavaScript SEO is a challenge. So, SEO for PWA is definitely not easy!

Google considers every published PWA as a JS website and Googlebot crawls it as usual. But there are PWA-specific issues that potentially impact the indexing, SERPs ranking, and crawl ability. Your developers must be aware of the issues before facing them.

What are the issues PWAs face while Javascript rendering?

Usually, websites generate or render the HTML code on the server side. It is the easiest way to make sure direct linkability of the content. Whereas, web apps prefer client-side rendering while dynamically updating the content on the web during browsing, without reloading the web page. However, developers today prefer using hybrid rendering. The server-side rendering is used during direct navigation to an URL while the client-side is used after loading the first web page to process asynchronous requests for subsequent navigation. This causes major time lag, sometimes even while the visitor is browsing the web page.

Hence, URLs should be independently accessible and the visitors should be redirected back to the homepage of the PWA. It is advised to use either the server-side or the hybrid rendering to fully unlock the SEO potential of your PWA site.

Server-side Rendering for SEO in PWA

You can go via multiple ways to achieve this. One of the most popular options is to use the JS framework, Vue.js. By default, in Vue, the components can produce and manipulate DOM in the browser as the output. You can also render the same components into HTML strings. You can send them directly to the browser after rendering them on the client side. Vue would “hydrate” the static markups and render them as a fully interactive client-side application.

This process almost always guarantees that the search engine crawlers notice the fully rendered page, thereby translating into better SEO. The process also reduces the time to content, especially when the visitors are suffering from slow or limited internet connectivity. You wouldn’t have to wait for the JS files to download and display the content. This enhances the overall LCP of your website. This will positively affect the user experience and boost your conversion rate.

Dynamic or Hybrid Render in PWA SEO

By far we have learned that processing JavaScript is easier said than done. But to make it a little easier along the way, dynamic rendering is preferred by most developers these days. The process goes back and forth between client-side and pre-rendered content. It is beneficial for the visitors in terms of UX. Here, the www server needs to detect bots and render the visitor’s request to be processed as usual. Bot requests are directed to the rendering process and visitors’ requests are again processed as usual. Where necessary, a dynamic rendering serves the content version appropriate for the bot to read, for instance with static HTML code. This works on most PWA websites.

Keeping in mind the above, developers need to be extra cautious about the Web Apps SEO issues during the PWA development itself. To harness the full SEO benefits of Progressive Web Apps, there are certain best practices one needs to take care of.

Best PWA SEO Practices

Here are some PWA SEO tips that will further improve the usability and visibility of your sites.

Ensure Search Engine Crawlers can Access JS and CSS files: Never block Googlebot’s access to your JS and SEO files, especially if JS renders the content. Remove any no-index tags or disallow tags from the code to let your web page be crawled upon and visible on the search result. For instance, this will allow anything like https://example.com/deep/style.css?something=1 or https://example.com/deep/javascript.js, while leaving no space for misinterpretation for other search engines.
Optimize for Google and Other Search Engines: Remember, Google is the most popular search engine, but it is not the only one. Googlebot might crawl your PWA at its finest, but other search engines might not. Holistic online visibility is necessary for your business.
Unique URLs for Web Pages without the #: Google Bots do not index the URLs with a ‘#’ or a ‘#!’ Unfortunately, it is not common knowledge. To avoid this serious mistake, implement a URL structure adhering to the traditional SEO rules. With the History API facilitating the updating of the URL to fetch the resources asynchronously, the need to reload the web page diminishes. This is the reason why you should provide clear and unique URLs without the fragment identifier.
Secure Mobile Website: Make sure your PWA site runs on HTTPS and is secure, with ample 301-redirects from HTTP to HTTPS. Avoid non-secure resources even if your business does not deal with sensitive information. If not taken care of, this would result in drastic SEO issues with mixed content. HTTPS is no longer a good-to-have, instead, it is a must-have, even for PWAs.
Use Canonical URLs: There are online businesses that might deploy PWAs but leave their original desktop and mobile websites in place. This will cause duplicate content if the web pages are not canonicalized appropriately. Ensure to provide each web page with its unique URL using a ‘rel-canonical.’ Avoid duplicate content violations to perform better at the SERPs
Page Load Speeds: Performance matters! Always! This one needs special attention. Firstly, no visitor wants to wait. Secondly, as page load speed directly affects the Google Core Web Vitals and the page ranking it is imperative to check your website performance both pre-launch and post-launch at regular intervals. Enhance your page load speed by using PWAs with AMP or PWAMP.
Dynamic Serving: Dynamic serving is often used to deliver different designs based on the user’s device. Ensure to provide consistent content for search bots and the users while avoiding cloaking the secure PWA site. Content cloaking brings your SEO score down and negatively affects the ranking. Try using the Google Search Console’s functionality, Fetch as Google, to check if your dynamic serving is on point.
The Cache: Leverage the PWA’s service worker to cache the files creating stores of responses keyed by visitor’s requests. This is essential from the SEO perspective. Simultaneously, updated relevant page content with appropriate authority will help the bots crawl and re-cache the page more often. Also, optimizing caching to suit your website needs a proper configuration that enables returning the service worker’s cached content and layout. Your developers are the ones responsible for choosing and implementing appropriate caching methods. Changing methods should be explicitly requested. The most popular caching pattern includes service worker installation, visitor/user interaction, and network response. Cached items do not expire, hence, remember to delete them when you want to, keeping in mind the browser’s storage limits.
Correct Linking: Google does not index all external and internal links in your PWA. Crawling by bots is significantly impacted when the ‘href’ attribute is not used. Bots only analyze the anchor tags with a ‘href’ tag and do not follow JS links. Google is sure to index, follow and crawl a regular ‘href’ link and will skip the ‘onclick’ ones, even if they are anchored. You can also use both the ‘href’ and ‘onclick’ attributes in the link to get the job done.
Correct Schema.org
Schema.org is a flexible vocabulary that summarizes your PWA as machine-processable data. It can be general and specific. Check the correctness of your Schema.org along with data errors if any. Ensure that the description matches the PWA content.

Test, Check, Repeat!

SEO-wise, understanding the cruciality of Googlebots, crawling and SEO practice for your PWA visibility is imperative. And, to test if the efforts that you have put in are in the right direction is equally important. You can leverage popular tools like the Google Search Console, Lighthouse, Google PageSpeed Insights, SEMrush, and cross-browser testing tools like BrowserStack.com, Broswerling.com among others, which can help you create a rich and responsive experience for your customers.

Wrapping Up

The benefits of having a PWA are significant for boosting your online business’s revenue if you are spot on with your PWA SEO. Before the PWA development, ensure to analyze its positive and negative impacts on your business as the resources used in PWA development and optimization are extensive.

Remember, Test, analyze, test and repeat! Check how Google reads your pages and use their actionable insights. Always consider the substantial impact PWAs have on SEO and the online visibility of your digital commerce. Involve PWA and digital marketing experts to maximize the benefits of your online presence.

ecommerce seo best practicesPWAPWASEOSEO for PWA

Shivi Rao is a content marketer with Krish. She has worked in various industries spanning technology, science, rural marketing, startups & unicorns, eCommerce business, and digital marketing, believing that content is the foundation to facilitate the visibility of any organization and ensuring her words do the same. In her free time, you can either find her lifting weights in the gym or feeding the strays.

How to Choose the Shopify eCommerce Development Company in 2023

21 December, 2022 After WooCommerce, Shopify is the 2nd most loved and used eCommerce platform worldwide. Shopify is an entirely feature-rich eCommerce platform. It offers many drag-and-drop options, and its apps work tremendously for store owners. In addition, Shopify is easy to use as it doesn't require depth coding.

4 min read By: Zenul Jinwala

Back To Insights