Progressive Web App (PWA) is a web application which utilises modern web capabilities and delivers and app like experience to users. PWA can be deployed as a Native App and like a PWA giving you the advantages of both channels. In simple words PWAs are like regular web pages or website, but can appear to be like a native mobile application.
Like Native Apps a PWA is reliable, available offline, engaging and can be installed conveniently. These are progressive and responsive, capable of working on any device, you can find its content via any search engine and can share easily.
PWA SEO Guide – UPDATED 2019
PWAs are not only focused on mobile phones but also supports Chrome OS, Linux, Windows. Only for Mac its support is under development.
Servers as a bridge between app and web worlds has numerous advantages over native apps, especially when it comes to their reach, conversion and acquisition.
To ensure that these PWAs are discoverable to search engines there are some basic requirements that needs to be taken care of. A PWA can generate additional SEO challenges due to their Web App, for example when running based on JavaScript. Hence it becomes to consider a few fundamental SEO principles to balance the way PWAs are developed.
- Available through specific URL each page should be individually craw able and should not use any fragment identifies.
- Index able content. Any meaningful content it’s important to use server side rendering (SSR) whenever possible.
- Do specify the canonical URL of each page by using canonical tags.
- Develop a responsive web design, with a viewpoint tag which is correctly configured, and should pass Google’s mobile friendly test.
- Ensure the content is always the same for users and search bots to avoid cloaking if dynamic serving is used to show different design based on different device.
- A secure website running entirely on HTTPS, 301-redirecting from HTTP to HTTPS and avoid using non-secure resources triggering mixed content issues.
- Use of PWAs along with AMP enables fast loading of web pages.
PWA Configuration and Optimization – Validation
Created by Google to verify a fundamental and ideal PWA experience the following is a checklist with PWAs best practices:
- Served over HTTPS
- Responsive on tablets and mobile devices
- All app URLs should load while offline
- Provide Metadata and add to home screen
- Fast first load even on 3G (time to interactive <10 seconds)
- Site should work across different browsers
- Page transitions should not feel like they block on the network
- Each page should have a URL
In case of a PWA there is no downloading taking place making your app experience more accessible and sharable compared to native apps.
PWA SEO Checklist
From SEO perspective it’s important to note down some critical aspects with respect to PWAs such as:
- Lighthouse tool extension
- Ensure that the site is secured with HTTPS, has a responsive design and can be loaded offline which is a key aspect for a PWA
- To take baseline reading of a PWA this lighthouse extension tool is extremely good to work with.
- It checks for: offline-accessibility; page load speed; network connection security; service worker presence; mobile-friendly design; add to home screen function.
- If lighthouse detects any issues it will notify and give insights towards solving the same.
- Testing your site across popular browsers
This is an integral step which cannot be verified via Lighthouse. Thus the visibility of a PWA and how it functions on various browsers cannot be taken care via Lighthouse. Thus it has to be done manually by testing the URL on most of the browsers and looking at its functionality. Not being a direct SEO issue but high bounce rates from users could create one for you apart from damaging overall experience of your web app.
- Annotate Pages of your Web Application with Schema.org
Using Schema.org you make Google’s job easier. Using this structured data, you are able to summarize key parts of the PWA with metadata that signals to google the purpose and intent of each individual page.
These schema.org metadata can be tested by using Google’s toolkit like structured data test.
- Consider open graph and Twitter Cards Metadata
What makes PWAs so efficient is their share ability. Easily accessible via a URL which is again easily shared on any social media platform. Do use appropriate metadata formats to ensure seamless transition while sharing your PWA.
- No # In URLs
John Mueller has explained that Googlebot doesn’t index URLs with # in them except for #!
Once the bot encounters # it stops indexing further. Hence he recommends using traditional URL structure that follows path/filename/query-parameter structure. Though tedious to implement but ensures the PWA crawls properly
- Duplicate content violation issues
Please avoid any such issues as a lot of PWAs are developed to supplement an existing website which causes a lot of content cross over.
- Test Crawl and Render
Using the Fetch As Google tool in search console you can observe how Google sees you PWA. It also shows how the page is visible to users. By using both you can compare that how a crawl bot and an actual user both view your page.
- Develop and keep it simple
Do go slow and check everything with great detail. Build your PWA step-by-step ensuring each new features added functions properly and serves the purpose. Step-by-step development will also ensure that you don’t embed too many resources in it.
Aided with lot of potential PWAs are really helpful for businesses compared to native apps. But just making a PWA is not important because it’s also important to see if your web application is indexable and discoverable in searches. Thus increasing the role of SEO alongside PWAs.