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.

Progressive Web Apps

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.

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

PWA

Image Source: Google

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.

SEO technique

Image Source: Google

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.

Duplicate Content

Image Source: Google

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:

Canonical

Image Source: Google

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:

             <link rel=”canonical” href=”http://qodemedia.com/services/link building/”>

             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:

  1. It is recommended to have your Primary keywords in the URL.
  2. The URL length should be no longer than 100 characters.
  3. 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

Crawling

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:

  1. 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
  2. When the crawler finds your website, it sends a request to your server for the content.
  3. 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.

Render Tools

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

Robots

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.

One Response

  1. prabhash kumar September 26, 2017
Games Security
Business Intelligence
How Business Intelligence & Analytic Tools Contribute to Your Business Growth
Inbound Marketing
The Techniques and Channels of Inbound Marketing in 2017
Biometrics
Using Biometrics as a Means of Securing User Privacy
External Giveaway Freebie TechnoGiants Giveaway
Focusky Pro
Giveaway #41: Focusky Pro 3-months Plan Subscription
MacXDVD
Freebie: MacXDVD Gives Away 10K Free Copies of MacX Video Converter
Flipbook
Giveaway #40: FlipHTML5 Flipbook 3-months Platinum Plan Subscription
Android iPhone
Galaxy C8
Samsung Galaxy C8 – The Fastest Samsung Phone
iPhone X
How iPhone X Can Make an Entrepreneur’s Life Easy
Business App
6 Mistakes to Avoid When Creating Your First Business App
Adsense
SEO
Beginners Guide to Effective SEO
SEO
SEO Fundamentals that Remain Unaffected by Algorithm Changes
Joomla
Top Joomla SEO Tips Which You Must Enable on Your Website
MAC Software
Billing Software
9 Common Misconceptions About Billing Software
Functions
9 Brilliant Google Secret Functions to Make Your Life Super Easy
Xen VPS
How Dedicated Xen VPS is better for hosting your business website?
Blogging Social Media
Loading Speed
How to Improve Loading Speed of Your Website?
Blog Post
The Main Guide to Writing Blog Posts That Rank in Google
Website Designing
Top 10 benefits of today’s Minimalistic Website Designing
Online Presence
Infographic: How to Maintain a Professional Online Presence as a Service Provider
Smart Cities
Infographic: 3 Reasons Behind the Need for Smart Cities
Customer Loyalty
Infographic: 6 Ways Social Media Can Help Build Customer Loyalty
Messages
Infographic: Top Reasons Why Your Business Needs to Archive Text Messages