Progressive Web Apps (PWAs) taking advantage of new technologies lets you make the best of mobile sites and applications for mobile and desktop without publishing a native mobile app.
Google today published a guide providing the best practice for making this experience truly indexable and linkable regardless of whether you’re building a PWA or a simple static website.
Historically, websites always render HTML on the server-side, but the modern approach is hybrid rendering, Google said, adding, in hybrid, “server-side rendering comes in when a user directly navigates a URL,” while “client-side rendering kick in after the initial page load, and for subsequent navigation and asynchronous requests.” That’s where, “PWAs comes in as it bring together all the advantages of responsive web design and native applications by utilizing both tech.”
“Our server-side PWA sample demonstrates pure server-side rendering, while our hybrid PWA sample demonstrates the combined approach,” Google said.
In the best practice’s guide, Google notes that to ‘Make Content Crawlable’, you must either use ‘server-side’ or ‘hybrid’ rendering, so users receive the content in the initial payload of their web request.
However, if you can’t use any of these two, “use the Google Search Console “Fetch as Google tool” to verify your content successfully renders for search crawler, before starting to use client-side rendering.”
See the full collated checklist below:
- Provide Clean URLs: Provide clean URLs without fragment identifiers (# or #!) such as, https://www.example.com/product/25/. “with client-side or hybrid rendering be sure to support browser navigation with History API.”
- Specify Canonical URLs: Include following tag across all pages mirroring a particular piece of content, “<link rel=”canonical” href=”https://www.example.com/your-url/” />”. And, also use the Accelerated Mobile Pages tag rel=”amphtml”, if your sites is serving AMP pages..
- Design for Multiple Devices: Use “srcset” attribute to fetch different resolution images for different density screens to avoid downloading images larger than device’s screen is capable of displaying.
Scale font size, line height, padding and margins of elements to ensure text is legible no matter the size of the device. Test various screen resolutions using the Chrome Developer Tool’s Device Mode feature and Mobile Friendly Test tool.
- 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.
Also, ensure rel-canonical links point to the real site and that robots.txt configuration allows crawlers to crawl the new 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. And, make sure there are no errors served.
- Annotate with Open Graph & Twitter Cards: Test Open Graph markup with Facebook Object Debugger Tool, and get familiarise 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: Measure the page load performance of your site using tools such as Page Speed Insights and Web Page Test, explained Google.