If you want to choose progressive web application (PWA) for your business goals, it would be better to for you to be clear that you have all details.
Like any new technology, PWA has technical specifics that can impact SEO performance. So, let us to provide you more detailed information about search engine optimization for PWA for your business on the Web.
What is PWA?
Before we will describe how to optimize PWA for search engines it makes a sense to understand what PWA is.
Mobile traffic overtook desktop for many industries, so business needed a solution to provide the best mobile experience for customers.
A few years, ago you had to choose between mobile website or mobile app. Many business owners chose traditional websites with responsive design. But, even today, mobile website speed and usability remains poor for many websites. Mobile applications have the additional cost of design and development.
So, it seems obvious to create something that can be accessed like a normal website but offer the increased functionality of native mobile applications. Thanks to HTML5 and JavaScript, Google developers created this mix in 2015 and presented during a session at Google I/O 2016.
A PWA is a type of application built using common web technologies, including HTML, CSS, and JavaScript, with no requirement for users to upload and to install the web apps via Apple App Store or Google Play. Therefore, PWA can work on any platform that uses a standards-compliant browser.
In a few words, PWA is a website that is used as a mobile app, with high performance. A user can add PWA to a home screen of a mobile device, get push notifications, and work without Internet connection (use the automatically cached copy of any information from the user’s last online access).
There are main advantages of PWA:
- Accessibility to all internet users, since the requirement to download the app or pay for the app is completely eliminated.
- PWAs are designed with extremely fast load times and lower data usage, especially important for users in areas with slow or limited Internet access.
- They have highly responsive layout and easier navigation than the full desktop website on a mobile device.
- This type of app has built-in intelligence that captures user behaviors and preferences so the app can deliver a more personalized experience.
- Offline functionality that allows the app to continue running in the background.
- When a PWA is published online, it is completely linkable and deployed to a host that supports HTTPS, that makes PWA secure, and allows its use for ecommerce.
These advantages make PWA popular to use for business and ecommerce websites.
Using PWA for business websites and ecommerce
PWA seems to be a good alternative solution and it has already given good results for many companies. There are facts that confirm that using a PWA has a positive impact on business goals and opportunities.
“AliExpress gained a 104% increase in conversion rates for new users with its PWA compared to the traditional website and app.
Petlove saw a double increase in its conversions by switching to a progressive app and the average session length on their site increased significantly, too.
eXtra Electronics noted a 4x increase in re-engagements, and 100% more sales from users arriving after they’ve added push notifications.”
Today website owners can build PWA from scratch or migrate their websites to PWA.
To migrate website to PWA, you can use some plugins to bring PWA capabilities or hire web developers who have the experience in web app development.
Some examples of solutions:
The plugin for WordPress
Woocommerce plugin for PWA
Extension for Joomla
Advanced PWA Prestashop addon
OpenCart progressive web application
CS-Cart Progressive Web Application
PWA Drupal module
Magento PWA Studio isn’t a module or an extension, but it is a great opportunity to create mobile experience for customers of Magento 2 stores.
As you can see, you need to spend money to use a progressive web app. That is why it is important to be sure that this investment will return money. The traditional website with responsive design remains a good solution for many cases. But it is better to use PWA for ecommerce websites that have significant mobile traffic.
The first thing to understand is that a PWA doesn’t bring any SEO advantage just because it’s a PWA. If you (and your customers) are happy with the current site, then there is no reason to implement a PWA. Also, you need to be aware that using PWA requires additional cost for search engine optimization. That is why you need to know more about SEO for PWA.
The SEO for PWA
We try to avoid too difficult an explanation, although the main problem of SEO for PWA comes from the technical side.
Does Google crawl and index PWA sites? The short answer is “Well, yes, absolutely it can.” But it’s not that easy. There are some issues that could potentially impact crawlability and indexing because PWAs are using JavaScript.
Use the separate unique URL address without # or #!
If you develop a PWA from scratch, pay close attention to URLs.
Although most SEO specialists recommend keeping a simple URL structure and clean URL address for the each page, this step is often ignored.
SEO starts with a URL. Googlebot visits websites, it detects links on each page, and adds them to its list of pages to crawl. Google’s crawl process begins with a list of web page URLs, generated from the previous crawl processes, and augmented with Sitemap data. That is why Google recommends using a simple, human-readable URL.
The fragment identifier syntax (# and #!) isn’t compatible with some web tools. So, you must use a URL without # and #!.
Indexing your PWA
PWAs are using JavaScript and, as a result, search engines see a published PWA just like any other JavaScript site. It means that crawlers might not be able to find content on the page. Certainly Google bot can process JavaScript, but you may face some search-related JavaScript issues that will block your content from indexing and showing up in Google Search. Crawler has to see all content on pages.
To avoid these issues, Google recommends not to depend on JavaScript. First, you can use static content from the server side. In this way, Google won’t index content that is rendered from the client side (browser). So, this way is good if your significant content is static. Second is to use dynamic rendering. This way is good to index JavaScript-generated content that changes rapidly. So, not all sites need to use dynamic rendering.
To be indexed everywhere and to be shown on legacy browsers (IE8) or platforms (like old Androids), you should use isomorphic JavaScript, which means the combination of client and server rendering.
An experienced team of web developers can help to choose the right solution and to save your budget.
Make your CSS and JavaScript files available for browsers. Also check if the content is the same for users and Google search bots. Cloaking is a bad SEO practice that can bring your PWA SEO score down.
To avoid confusing Google, it is important to specify canonical URLs, when the same content will be available under different URLs.
Improving page quality and search visibility of PWA
Use meta tags <title> and <description> for the each PWA page.
For internal and external links use “href” attribute and real anchors instead of “onclick” or click listeners. The reason there is that bots would only analyze anchor tags with “a href” attributes and will not follow JavaScript links.
So, for SEO purposes, it is better to avoid code like these:
<a onclick=”alert(‘something’);”>Click something</a>
or
<a href=”javascript:alert(‘something’);”>Click something</a>
Using native HTML elements where possible makes PWA fully accessible and improves SEO. Also, this approach will help crawlers better understand content of PWA pages.
Implement Schema.org and Open Graph (OG). Schema.org structured data is a vocabulary for summarizing the most important parts of your page as machine-processable data. In other words structured data help Google to understand content of pages better.
We recommend using Schema.org where it’s sensible. It is good for ecommerce sites, news sites, job posting, recipes, and pages with customer reviews. Open Graph will influence the performance of your links on social media.
Also it is a good practice to use the “scrset” attribute for images.
Generally, you need to follow Google guidelines for SEO traditional websites, like using responsive design, cross-browser compatibility, using alt attributes, etc.
Also, you need to remember that Google is in the process of restructuring its PWA training resources. It means that Google is going to provide significant changes.
Test your PWA
It is important to test your PWA to check indexing and performance and then fix issues.
Test PWA with Google Search Console
Use the URL inspection tool to know how Google sees your PWA. With this tool, you get enough information about the SEO performance of your PWA.
You will be sure that Google knows that all your pages exist and all URLs were indexed. You can check how Googlebot sees the content of pages. Also, you can see which pages are canonical. The tool includes a mobile-friendly test.
So, with Google Search Console you will get detailed information about availability of your PWA for Google.
Test PWA with Lighthouse
Lighthouse is a great tool that helps provide audit websites and PWAs. You can use this tool from Chrome devtools or WebPagetest Lighthouse Test. With Lighthouse, you will know if all of the features are in order.
As you can see, you get all information about PWA itself and more information about PWA audit with Lighthouse.
Also, you can read more about Debug Progressive App.
Cross-browser testing tools
Visitors choose PWA because this application provides the best web experience for users. So, they expect that your PWA will work the same on similarly sized devices ,whether an iPhone or an Android mobile phone, Chrome or Firefox browser.
Google recommends using BrowserStack.com, Browserling.com, or BrowserShots.org to ensure your PWA is cross-browser compatible.
Conclusion
As you can see, the creation of PWA or migration of a website to PWA is a complex and challenging exercise. In other words, PWA isn’t for all cases.
If you decide to implement PWA, please make sure that you completely understand the stack of technologies, cost, possible tech problems, and SEO issues. Using plugins or modules to migrate a website to PWA also leads to challenges.
You need always remember that you create PWAs for users and to get traffic from search engines. PWAs can boost your business via the Web, if you will focus on opportunities. As a business owner, you cannot depend on the vagaries of application stores. Your customers will get a good web experience with a technology that is a symbiosis of a website and a mobile application.
PWA is no longer a new technology, so you can get the quality web services from developers and SEO specialists.
