Progressive Web Apps (PWAs) are mobile properties that utilize a combination of the best mobile web technologies, bringing together all the advantages responsive web design and native applications have to offer.
Considering it is a new web technology, there are a lot of questions surrounding it, with one of the main ones being “how do I make PWAs indexable?”
Google has released its official set of best practices for making PWAs indexable. As the company notes, every one of these best practices applies to indexing in general, whether you’re dealing with a PWA or static website.
The search giant has collated the following best practices as a checklist for making PWAs indexable. I have condensed the best practices into bullet points, for full details please see Google’s full post.
Best Practices for Indexing Progressive Web Apps
- Make Your Content Crawlable: Use server-side or hybrid rendering so users receive the content in the initial payload of their web request.
- Provide Clean URLs: Provide clean URLs without fragment identifiers (# or #!) such as, https://www.example.com/product/25/
- Specify Canonical URLs: Include the following tag across all pages mirroring a particular piece of content, “<link rel=”canonical” href=”https://www.example.com/your-url/” />”
- Design for Multiple Devices: Use “srcset” attribute to fetch different resolution images for different density screens to avoid downloading images larger than the device’s screen is capable of displaying.
- Develop Iteratively: Iterate on your website incrementally by adding new features piece by piece. For example, if don’t support HTTPS yet then start by migrating to a secure site.
- Use Progressive Enhancement: Before registering a Service Worker check for the availability of its API. Use per API detection method for all your website’s features.
- Test with Search Console: Monitor your site using Search Console and explore its features including “Fetch as Google”. Provide a Sitemap via Search Console “Crawl > Sitemaps”.
- Annotate with Schema.org structured data: Verify that your Schema.org meta data is correct using Google’s Structured Data Testing Tool.
- Annotate with Open Graph & Twitter Cards: Test your Open Graph markup with the Facebook Object Debugger Tool. Familiarise yourself with Twitter’s metadata format.
- Test with Multiple Browsers: Use cross browser testing tools such as BrowserStack.com, Browserling.com or BrowserShots.org to ensure your PWA is cross browser compatible.
- Measure Page Load Performance: Use tools such as Page Speed Insights and Web Page Test to measure the page load performance of your site. Research has shown that 40% of consumers will leave a page that takes longer than three seconds to load
