Google

Building Indexable Progressive Web Apps

Last Updated: March 4, 2017 2

[sc name=”GoogleLinkAds”]

Progressive Web Apps (PWAs) are taking advantage of new technologies to bring the best of mobile sites and native applications to users — and they’re one of the most exciting new ideas on the web. But to truly have an impact, it’s important that they’re indexable and linkable. Every recommendation presented in this article is an existing best practice for indexability — regardless of whether you’re building a Progressive Web App or a simple static website. Nonetheless, we have collated these best practices to provide a checklist to guide you: Make Your Content CrawlableWhy? Historically, websites would always generate or render their HTML on the server which is the simplest way to ensure your content is directly linkable. Web applications popularised the concept of client-side rendering in which content is updated dynamically on the page as the users navigates without requiring the page to be reloaded.The modern approach is hybrid rendering, in which server-side rendering is used when a user navigates directly to a URL and client-side rendering is used after the initial page load for subsequent navigation and asynchronous requests.Our server-side PWA sample demonstrates pure server-side rendering, while our hybrid PWA sample demonstrates the combined approach. If you are unfamiliar with the server-side and client-side rendering terminology, check out these articles on the web read here and here. .boxbox { width: 100%; word-wrap:break-word; padding: 0.2em; } .badbox { background-color: #eba; } .goodbox { background-color: #ded; } .avoidbox { background-color: #ffd; } .boxbox h5 { font-size: 1em; font-weight: bold; margin: 0;} .boxbox p { margin-top: 0.6em; margin-bottom: 0.6em; } br.endboxen { clear: both; } h3.subhead { margin-top: 2em; } <!– yeah, maybe not http://2.bp.blogspot.com/-41v6n3Vaf5s/UeRN_XJ0keI/AAAAAAAAN2Y/YxIHhddGiaw/s1600/css.gif .boxbox { float:left; min-width: 31%; max-width: 300px; word-wrap:break-word; padding: 0.2em;} .badbox { background-color: #eba; } .goodbox { background-color: #ded; } .avoidbox { background-color: #ffd; } .boxbox h5 { font-size: 1em; font-weight: bold; margin: 0.5em 0;} br.endboxen { clear: both; } –> <!– Best Practice:box Avoid:box Don’t:box –> Best Practice:Use server-side or hybrid rendering so users receive the content in the initial payload of their web request.Always ensure your URLs are independently accessible:https://www.example.com/product/25/The above should deep link to that particular resource.If you can’t support server-side or hybrid rendering for your Progressive Web App and you decide to use client-side rendering, we recommend using the Google Search Console “Fetch as Google tool” to verify your content successfully renders for our search crawler. Don’t:Don’t redirect users accessing deep links back to your web app’s homepage.Additionally, serving an error page to users instead of deep linking should also be avoided. Provide Clean URLsWhy? Fragment identifiers (#user/24601/ or #!user/24601/) were an effective workaround for browsers to AJAX new content from a server without reloading the page. This design is known as…

Source: Building Indexable Progressive Web Apps

[sc name=”GoogleLinkAds”]

About the author / 

Google Webmaster Central

[sc name="searchbox"]
[sc name="responsiveads"]

Email Subscriptions

Enter your email address:

Delivered by FeedBurner

Follow us on Twitter