RankpediaA plain-English encyclopedia of search

Pwa SEO

Makes a Progressive Web App crawlable, indexable, and fast enough for search engines to understand and rank it like a normal website.

If you have ever treated installability or app-like UI as an SEO signal on its own instead of ensuring real indexable content exists, you already know the app features are not the whole story.

Key points

  • Give each important page its own unique, crawlable URL and avoid fragment identifiers for routing.
  • Use canonical tags to help search engines identify the preferred URL when similar content appears at multiple addresses.
  • Do not block critical JavaScript or CSS resources in robots.txt; search engines need them to render the page.
  • Avoid caching HTML indefinitely in the service worker to prevent stale content for users and crawlers.

A PWA that hid content behind JavaScript

A PWA built with Angular had JavaScript routing that created fragment-based URLs for all 200 product pages. This broke Angular SEO best practices and hurt mobile seo — search engines could not crawl the individual URLs, and the site ranked for only 5% of its target keywords. After switching to clean, unique URLs via the History API, adding canonical tags, and submitting a sitemap, 90% of pages became indexable within two weeks. The service worker was configured to serve fresh HTML, and organic traffic from mobile searches increased by 40%. The site now ranks for over 60% of its target terms.

Three common mistakes that break PWA SEO

  • Fragment-based URLs Using JavaScript routing that creates non-unique or fragment-based URLs makes pages harder to crawl and canonicalize. Each important page should have its own unique, crawlable URL.
  • Blocking critical resources Blocking CSS or JavaScript resources in robots.txt prevents search engines from rendering the page properly, leading to incomplete indexing.
  • Aggressive HTML caching Caching HTML indefinitely in the service worker causes outdated content to persist for users and crawlers, harming freshness and accuracy.

Three ways to ensure crawlability

  • Unique URLs Give each important page its own unique, crawlable URL. Avoid fragment identifiers like # for routing; use the History API instead.
  • Canonical tags Use canonical tags to help search engines identify the preferred URL when similar content appears at multiple addresses, preventing duplicate content issues.
  • Sitemap and internal links Submit a sitemap and use clear internal linking to help search engines discover PWA routes and deeper content, especially for JavaScript-rendered pages.

Common questions

What is a PWA?

A Progressive Web App is a website that uses modern web technologies to feel like a native app while remaining accessible through the browser.

What are PWA best practices for SEO?

Ensure each page has a unique, crawlable URL, use canonical tags, avoid blocking critical resources, and configure the service worker to serve fresh HTML to crawlers.

Sources

  1. Google Search Central Official documentation on crawling and indexing PWAs.
  2. Google Web.dev Guides on PWA performance and best practices.
  3. Moz Blog post on PWA SEO benefits and considerations.
↑