Turn Your Website into an Application: Progressive Web Apps & SEO

Consider a technology that can provide you an experience of responsive website & native app in a single platform. That is a Progressive web App in a nutshell.

With more and more support for the HTML5 and advancement in JavaScript language, we have now came across some really fascinating culture of the web & That’s what we call the Progressive web Apps (PWA).

The really exciting thing about Progressive Web App is:

1) They could make an app development less necessary.
2) Your mobile website becomes your app.
3) No need to develop multiple apps for multiple platforms resulting in huge savings in app development time and effort.

Annotation:

One of the best Example can be taken from Flipkart.

Back in 2015, When The largest e-commerce site in India, Flipkart rethought about their development approach and finally combining their website & Mobile app into a Progressive Web Application, they would not have imagined that this new technology would become such a profitable deal for them.

Here are few key insights that they achieved after the launch of Flipkart Lite.

Session Duration of Users increased from 70 Seconds to 3.5 minutes.
Re-engagement rate increased by 40%.
Conversion rate increased by 70% with “Add to Home screen” feature.
Data usage dropped by x3. Previously, 63% of Flipkart Lite users were reaching the site via a 2G network and PWA proved to be a boon for fast user experience

Here is the screenshot of Flipkart’s PWA

No download or installation is required to access PWA. You can directly access it from the web browser. PWA can also evaluate user’s engagement, behavior & preferences which further helps in delivering more personalized web experience. It can also be accessed Offline.

Main Features of Progressive Web Apps (PWA)

– User-friendly: PWA supports Push notifications service that sends website updates or notices to users directly rather than waiting for them to login or sending email updates to them.

– Engaging: It offers offline functionality that enables app to run in the background & evaluate user’s engagement, behavior & preferences.

– Responsive: PWA has a highly responsive layout and can fit in any device ranging from desktop to mobile & tablets. It also has a very clear and easy navigation’s.

– Flexible Support: PWA has all types of hardware access, including Geo location, camera and microphone and screen orientation access.

– Accessible: Since, no download or installation is required to access PWA, it can be accessed directly from the web browser. It can even be accessed with lower data usage, which is important for users in slow or limited internet access areas.

Key Services

– Push notifications, for sending updates & messages directly to users without even logging in.

– Background synchronization allows updating data while a user isn’t using the page.

– Progressive Web Apps (PWA) allows users to access some functionality even when they are offline.

– Handling Geo location or other device hardware-querying data.

– User experience & engagement.

SEO Recommendation for Progressive Web Apps (PWA)

Having this much said, I would now like to introduce few SEO challenges in Progressive web apps and the best recommendation.

So, here are the 8 tips that you must follow before doing SEO for progressive web apps.

1. Avoid Cloaking to Googlebot:

According to Google:

Cloaking can be defined as a black hat SEO technique in which the webmaster presents two different contents to the user and search engines respectively.

In Simple word, two different contents are created. One is presented before search engines and the other to the users.

This technique is primarily used to hide a particular content partially or entire page from search engines without losing a grip on their ranking.

Some examples of cloaking include:

Displaying a proper of HTML text page (with proper SEO Setup) to search engines, whereas serving a different page of images or other content forms to users.
Placing the keywords or text in a webpage only when Google crawls it, not for the usual visitors.

This technique is usually used by Hackers and site owners related to Illegal activities like Pornography & Drug trafficking.

In order to cheat search engines, they cloak the webpage and hence delivering a different legit page to search engines and a different one to the visitors.

It’s also not a good idea to redirect to an unsupported browser page.

2. Use Rel=canonical when serving content from multiple URLs in order to avoid duplicate content violations.

Let us consider you have two different versions of the same page. Exactly, the same content. They differ in a way that they are in the different category of your website.

Since the content is same, you are likely to fall under content duplicity trap.

Ex: –

http://qodemedia.com/services/link building/

http://qodemedia.com/services/seo/link building

This is why Rel=canonical was invented. This usually happens in a lot of e-commerce environment.

A specific product or service page may have various URLs (landing page) depending on how you reached there. You can apply Rel=canonical as follows:

1) Select one of the two pages as the canonical version. It should be the one with more importance or priority.

2) In case of a dilemma, pick the one with the most number of links or visitors.

3) Once we pick the canonical page, It’s now time to add “Rel=Canonical” link from the page that is Non-canonical to the canonical page.

In the above example, Let’s consider that we picked http://qodemedia.com/services/link building/ as canonical URL, It is recommended to place canonical tag inside <head> section like this:

That’s all.

This Procedure combines the two pages into one from a search engine’s perspective. It’s a “Simple redirect”, without redirecting the user.

3) Avoid Using # in URL structure

Googlebot does not index URLs with “#” in them. Generally, Hash (#) is used by most of the Progressive Web Apps in their URL structure, which means the search engines is not going to care anything beyond the #.

Here is a screenshot of the URL structure of a Progressive web app.

Ex: http://www.sample-domain.com/ajax.html#key=value

The only way to get rid of it is using traditional SEO rules for URL Structure.

Since It is an important factor for ranking, Let’s focus on some URL best practices:

It is recommended to have your Primary keywords in the URL.
The URL length should be no longer than 100 characters.
URL should be static instead of dynamic.

Good Example: – www.amazon.com/clothing/men t-shirts

Bad Example: – www.amazon.com/125645564

4) Avoid the AJAX-Crawling scheme on new sites

The AJAX crawling scheme is a method by which Google and other search engines crawl dynamically generated content in a website.

This Technique had been used by Google since 2009.

This crawling scheme involved the following steps:

Firstly, you need to tell the crawler that your website supports AJAX crawling scheme by placing a special token in your hash fragments URL as shown in the example: www.example.com/ajax.html#key=value
When the crawler finds your website, it sends a request to your server for the content.
Once the request has arrived, the web server now returns the content in the form of an HTML snapshot, which is then processed by the crawler.

But in 2015, Google discontinued AJAX Crawling scheme and strongly recommends to avoid this scheme for a new website.

5) Check how Googlebot sees the page

You can make use of Google Search Console’s Fetch and Render tool to see your site exactly the way Google sees it.

6) Make sure required resources aren’t blocked by robots.txt.

From Google Search Console’s Blocked resources option tool, you can make sure that No resources have been blocked by the search engine robots. Or You may opt to check in Robots.txt

Here, we can clearly see that no resources are blocked by robots.txt.

7) Reduce the number of embedded resources on the page (especially the number of JavaScript files required to render the page), since these might not be fully loaded.

8) Use an accurate sitemap file to signal any changes to your website when using Accelerated Mobile Pages (AMP).

Conclusion

Progressive web App is a wonderful and exciting thing for Responsive web development. Google has been recommending for PWA to business owners.

At the same time, you should also consider the proper SEO approaches so that your new web app would not hurt your ranking & prove to be an Asset for the business.

If you have any query regarding progressive web apps, Feel free to contact Miami Sem; SEO Miami & Digital Marketing Company.

Turn Your Website into an Application: Progressive Web Apps & SEO