How to Build Indexable Progressive Web Apps in Google Search

/ Business, Digital Marketing, General, Google, Internet, Search Engine, SEO / By

Many exciting and new ideas are emerging in various departments and fields at our universe, such one is the Progressive Web Apps (PWA) . This is a mobile property, which is the combination of mobile web technologies , collecting responsive design, web design, native application together.

You may find this terms new and a lot of questions are going on in your head right? Here in our blog we are going to see how you can make this Progressive web apps indexable in google search.

Google has released a set of best practices now for both static and a PWA website. Here are the checklist provided by the Google officially. I have collected this checklists and pointed out shortly with simple explanations.

Checklist 1:

Making your content Crawlable : Do’s and Dont’s

  1. Users will be able to receive the content as their web request in the initial load if hybrid rendering or server-side is used.
  2. If you are not able to support server-side or hybrid rendering You can use the client side rendering. This can be done by using the Google Search Console “Fetch as Google tool” to  verify your content successfully.
  3. Your URL should be independently accessible.
  4. Do not serve error pages to users
  5. Never redirect Users accessing deep links back to your own web page.

Checklist 2:

Providing Clean URL’s: Do’s and Dont’s

  1. Never use this fragment identifiers (# and #!) in your URL.
  2. If you are using hybrid rendering or client- side rendering , check whether the browser’s navigation is accessible.
  3. Example for a clean URL :
  4. Example for a bad URL: !slide/25

Checklist 3:

Canonical URL’s should be specified: Do’s and Dont’s

  1. When there are same content for multiple URL’s , You have to specify one page as canonical and others as duplicate to avoid confusions for google on which page to index first.
  2. Use this  tag <link rel=”canonical” href=”https://www.page.com/your-url/” /> across all major pages focussing on specific piece of content.
  3. Don’t use rel=”canonical” to avoid duplicate content across multiple URL’s
  4. Do not create canonical references that is being a conflict between your pages.

Checklist 4:

Design for Multiple Devices: Do’s and Dont’s

  1. “Srcset” attribute should be used to fetch various resolution images for different type of screens in order to avoid the downloads of larger images that the device screen is not capable of capturing it.
  2. Font Size, Line Height, Padding, Margins of elements should be ensured for the legibility.
  3. ‘Chrome Developer Tool’s Device Mode’ and ‘Mobile friendly test tool’ can be used to test the screen resolution of various screens.
  4. You may show different content to Google, But never do it to the users.
  5. Note whether the content remains same even if you redirect your page.
  6. ‘Fetch as Google’ from Search console can be used to verify the content fetched Google matches the content as a user see it.
  7. Don’t use particular size fonts for all pages.

Checklist 5:

Develop Iteratively: Do’s and Dont’s

  1. Iterate on your website while adding new features one by one .
  2. If you are not using HTTPS for your site, then you can start migrating to it immediately.
  3. check it accurately whether the Rel-canonical links are pointing to the real site.
  4. Preventing google to index your site before launch is important.
  5. Do not forget to unblock the crawlers after launching your website.

Checklist 6:

Progressive enhancement: Do’s and Dont’s

  1. Before you register a service worker, check the availability of its API.
  2. if (‘serviceWorker’ in navigator) {
    …
  3. Browsers user agent should not be used to enable or disable features in your web app.
  4. Before launching your website check whether it’s accessible on all type of browsers.

The other few checklists are

  1. Test with Search Console
  2. Annotate with Schema.org structured data
  3. Annotate with Open Graph & Twitter Cards
  4. Measure page load performance
  5. Testing with various type of browsers

I hope this checklist by Google would be helpful in providing the perfect guidance to develop your Progressive Web Applications with Indexability. Check for the Samples of PWA indexability that explains in vast about the client-side, server-side, hybrid rendering etc.