Imagine your site interacting with a user as an application. That is, the user can install it on any gadget, receive notifications and work with it (even without an Internet connection). It allows users to use the latest features supported by modern browsers on a website adapted for mobile devices, creating the illusion of using a mobile application. It may sound like a wonder, but that product became popular and widely-used as soon as it entered app development markets – PWA. Such type of the app is quickly emerging but there is a problem which makes many developers refuse providing PWA services and customers refuse upgrading their sites or stores to PWAs – SEO optimization. Today we are going to convince them in SEO friendliness of PWAs.
The Advantages of PWA for Business
The essence of Progressive Web Apps is quite simple – web pages or web applications look like mobile applications with similar interaction and navigation elements. The technology uses a certain concept in design, the latest features that support modern browsers, technologies and web APIs that work together, making it possible to create the best websites and mobile applications. This is an advanced form of responsive web applications with additional functionality. This opens up great prospects for promoting products on mobile devices. Obviously, over time, the progressive web apps format will supersede classic iOS and Android apps, especially for online stores. Like accelerated mobile pages, advanced web applications can complement the existing mobile version of the site, as well as a native application for iOS and Android. Also, PWAs have such benefits which stand them out from other applications:
• PWAs work when the internet connection is bad and even offline. Because of this, the business doesn’t lose conversion: the user can put goods into the basket, browsing the site without an internet connection, and place an order when the connection appears.
• Thanks to the cross-platform technology, you can develop one application, which will work on any device of any operating system. The same thing works for updates.
• It is able to send push notifications.
• PWA is an additional way to get traffic, for example, from the Windows Store.
• Other sites may link to content in your PWA.
• After installation, PWA can capture the entire user screen (as native applications do).
• Installed on the home screen: PWA allows users to easily save shortcuts on the home screen, so your icon will be displayed next to all other applications on your mobile phone. It is very user-friendly and will encourage ongoing participation.
If you’re still hesitating whether you need to create a PWA for your business or not, try out PWAs which were already built and gained success worldwide, e.g. Wikipedia, 2048, Tinder and others which you can see in our recent blog article:
https://multi-programming.com/blog/examples-of-progressive-web-apps-in-2019
The Disadvantages of PWA for Business
• PWA technology is quite new, and in many ways you have to act by touch. Creating a PWA will be a challenge in some way.
• There may be failures in support from browsers. At the time of this posting, Progressive Web Apps supports Chrome, Safari, Firefox, Edge.
PWAs & SEO: JavaScript rendering
PWA is an efficient and modern technology which is going to take over the world but this idea is easy to be destroyed if nobody can search for such applications. So it must be search-friendly which means indexable. Javascript is a thing which should be rendered by Google to see all the stuff: content, images, links, etc. But there is an issue: it should be analyzed, compiled and executed which takes a really big amount of time for sure. That’s why Javascript rendering is performed in 2 parts: firstly, the served side content is rendered and then it’s a client-side one.
Because of such restrictions, your PWA could lose its privilege among users so it’s crucial to learn the ways to avoid limitations. The very goal here is to be sure that the app’s server is able to respond to deep URLs requests with fully rendered HTML for this. It contains every items of the app: content, meta tags, links, etc.
Fortunately, there are several ways to achieve it:
Client-Side Rendering
Using CSR, the web browser(the client) gets an almost pure HTML on the underlying fetch and it’s the client who demands to cooperate in order to establish the final version of HTML on the sources and JS instructions. This way of rendering isn’t so good for SEO because of such limitations: if JS isn’t executed and the page isn’t rendered, it’s absolutely not SEO-friendly.
The most recent JavaScript frameworks adopt a JAMstack strategy. Here, completely rendered static HTML pages are produced as a component of the manufacture procedure. These are transferred to the server ‘instant’ and are gotten to in the customary manner by the two clients and bots. Once more, for users, the customer side JavaScript application will take over after the underlying page has stacked, hence giving every one of the advantages of both a PWA and a static site.
Server-Side Rendering
PWA keeps running on both the server and the browser. At the point when a URL is asked, the server will render the page itself and send the last HTML (with all the info) to the client or the bot, which won’t have to execute any JavaScript on this underlying perspective. Bots keep asking for URLs along these lines, dependent on the server-side form of the application, while for clients, this is the place the customer side rendition of the JavaScript application dominates.
Dynamic Rendering
At last, there are workarounds for where none of these methodologies are doable. Recollecting that a definitive objective is to guarantee search engines can slither, record and render content reliably, we can make and serve HTML depictions to search engines with dynamic rendering services. The HTML previews should be reflective of a regular customer side completely rendered view.
To choose the best rendering option for your PWA, you should take into consideration its size, if it’s static or dynamic, and its browser compatibility. We think that the most reliable choice is SSR or Dynamic Rendering. They can be used for both static or dynamic site as well as small or big ones and render pages carefully. Their stability and reliability wins the Client-Side Rendering for sure.
Checklist for SEO
Also, there are several crucial points to check SEO before the launch of your PWA:
• There is a secure HTTPS protocol, 301 redirects configured from HTTP to HTTPS.
• Each page must contain a canonical link using the rel = ”canonical” tag.
• When enabling PWA along a non-canonical AMP (in PWAMP configurations), you should also include the rel = ”amphtml” tag to indicate the AMP URLs.
• All pages must be adapted for mobile devices. You can check with https://search.google.com/test/mobile-friendly.
• The content should be the same both for the search bot and for users.
• Pages should be indexed by a search robot. You can check it using Fetch as Googlebot in Search Console
• You should optimize application download speed. The first boot should be fast even on 3G. Transitions between pages should be fast.
• Use Schema.org, Open Graph for Twitter, Facebook.
• All pages are loaded offline. Additionally, the application informs the user that he is offline.
• Metadata must be provided for the Add to Home screen dialog.
• The request to add to the main screen shouldn’t appear at any time.
• The site works in cross-browser mode. You need to test it in Chrome, Edge, Firefox and Safari or use cross-browser testing tools.
• Each page of the application has its own URL (deep linking implementation), don’t use the fragment # or #! at the end of the URL (use History API).
• The content of the pages doesn’t “jump” during the transition between pages.
• You should turn on caching.
• The app adapts to various screen sizes.
• PWA should not use application installation while loading.
• Push notifications are included. User information is provided on push notifications. Notifications must be current, not intrusive. The ability to enable, disable, manage notifications.
• The user can easily pay through the payment API’s own user interface.
• You should set Event Tracking in Google Analytics.
• Pressing back on the details page saves the scroll position on the previous page of the list.
• You should create sitemap.xml.
How to check PWA optimization
PWA optimization is one of the issues which determines if customers retain your app and keep using it. For the post-launch period, as for the whole lifecycle of the app, it is a must.
• Additionaly check all the requirements from Google https://developers.google.com/web/progressive-web-apps/checklist;
• Test the app on Google Lighthouse, Chrome DevTools;
• Manually check important items for SEO, such as URLs, download speed, whether Google indexed pages, fragments # in URL addresses, adaptability for mobile devices, micro-markups;
• Do an audit on Google SEO Lighthouse https://webmasters.googleblog.com/2018/02/seo-audit-category-in-lighthouse.html.
That’s it! Your PWA is search-friendly, optimized and ready to see the light.
Conclusion
Progressive Web Apps technology is a relatively new word in site building. PWA is a symbiosis of a website and a mobile application, and most importantly, it is a product that allows the business owner not to depend on the vagaries of application stores. SEO and PWA are things that feel difficulties in making friends but that doesn’t mean they couldn’t do that. In this article, we’ve prepared highly useful checklists to make your PWA search-friendly and optimized reducing risks of failures. Remember that for stable retention and conversion rates, you or your SEO professional should maintain the app SEO points and update them according to new search engine restrictions or rules.
https://multi-programming.com/blog/seo-pwa-how-to-optimize-progressive-w...
Software Development for Your Company's Growth