SEO in PWA – when Googlebot loves your Progressive Web App

If I were to describe Progressive Web Apps (PWAs) in one sentence, I would quote Alex Russel, a Google engineer who said “they blur the line between web content and apps, but they keep the strengths of the web”.

Are PWAs the new sexy of mobile tech? Yes, sir! Why? Well, for a number of reasons: in general, users are almost three times more likely to reopen a mobile app than a website and spend the majority of their time on mobile devices in apps rather than in browsers. Bearing that in mind, best features of websites and mobile apps in combination with great user experience, offline accessibility, push notifications and SEO-friendliness make PWAs go through the roof in terms of popularity.

In fact, PWAs are favored by users, developers and… digital marketers. All of that thanks to the impact they have and visibility opportunities they offer, coming from indexability and linkability. In contrary to mobile apps, PWAs belong to the WWW ecosystem, which makes all of their content visible in Google. That’s why it is crucial to make the most out of the opportunities brought by the PWA standard. Especially, since SEO optimization in the majority of cases translates directly to improved user experience leading to conversion boost, increased engagement and better performance of the app.

Javascript SEO can be quite a challenge

But well, it’s not that easy. Progressive Web Apps are using JavaScript and as a result, Google sees a published PWA just like any other JavaScript site, and Googlebots will just crawl it as usual. Nevertheless, there are some issues that could potentially impact indexing, ranking plus crawlability, and developers should be aware of them!

Why these issues occur? Well, websites would always generate or render HTML code on the server side, because it’s the simplest way of ensuring direct linkability of the content. On the other hand, web apps use rather a client-side rendering, where content is dynamically updated on the web during browsing – without reloading the page. However, today developers would rather use the other type called hybrid rendering. In this approach, server-side is being used during navigation directly to an URL, and client-side rendering is being used only after loading the initial page, in order to process asynchronous requests for subsequent navigation. 

That is why URLs must be independently accessible, and users shouldn’t be redirected back to the homepage of the PWA. Use either server-side rendering or the hybrid approach to make the full of the SEO power of your PWA.

Let’s take a closer look:

 

Server-side rendering impact on SEO in PWA

Luckily, there’s a number of ways to render on the server-side. One of the options available is to use Vue.js, a JavaScript framework. With Vue, by default components produce and manipulate DOM in the browser as output. Nevertheless, developers can also choose to render exact same components into HTML strings on the server-side and then send them directly to the browser. Eventually, Vue would “hydrate” static markups into the fully interactive client-side application.

Why is that beneficial? It guarantees that engine crawlers will be able to see the fully rendered page, which translates to better SEO. It also speeds up time-to-content, in particular when users struggle from a slow connection or having older devices. You just don’t need to wait for the JavaScript to download and display content, so users will see the page sooner. That obviously increases user experience and affects conversion rate significantly.

 

Server-side rendering guarantees that engine crawlers will be able to see the fully rendered page, which translates to better SEO. It also speeds up time-to-content. Source: developers.google.com

 

Dynamic render in PWA SEO

Processing JavaScript is not necessarily a piece of cake and not every bot is able to do it correctly, not to mention smoothly. In order to tackle that challenge, dynamic rendering is used. It focuses on switching between client-side and pre-rendered content. It is beneficial particularly for the public, indexable JavaScript generated content that is often being changed. In this case, the WWW server must detect bots (via for example checking client of the user) and render their requests to be handled as usual. Bot requests are directed to the rendering mechanism, and user requests are processed as usual. Where necessary, dynamic rendering displays content version that is appropriate for the bot to process, say with static HTML code. This tool can work on all or just some sites.

Bearing in mind the above, when building a PWA, developers must be especially cautious regarding the Web Apps SEO issues. In order to harness the full SEO benefits of Progressive Web Apps, there are certain steps to follow. 

The ultimate PWA SEO checklist

 

Every page under the separate URL address without ‘#’

Did you know that Googlebots will not index URLs with ‘#’ or ‘#!’ fragment identifier in them? Unfortunately, many PWAs unknowingly use it in their URL structure. To avoid it, implement URL structure according to traditional SEO rules. Although AJAX crawling scheme using ‘#!’ served its purpose at its time, now it is no longer recommended as the best solution. With the History API enabling to update URL to fetch resources asynchronously, there’s no need to reload the page. That is why providing clear URLs without the fragment identifier is very important. Using ‘#’ is related to deep linking into the content on a particular page, don’t forget about that.

Focus on performance

Nobody likes to wait when the page loads. Do you? Measuring page load performance is an important PWA SEO practice because it significantly improves user experience. Although Googlebots won’t get frustrated waiting for the page to load, your users will surely do. Remember to use popular speed measuring tools, such as Web Page Test or PageSpeed Insights (we’ll get back to that later in the checklist). Doing it before launching the PWA will surely bring better results, so don’t leave it for the post-launch phase!

Measuring page load performance is an important PWA SEO practice because it significantly improves user experience. Source: https://developers.google.com

 

HTTPS

Even if you don’t deal with sensitive communication, your web solutions should always be protected. The same with your Progressive Web App – it must securely run entirely in HTTPS, with 301s redirecting users from HTTP to HTTPS. Also, avoid using non-secure resources! This can result in SEO issues with mixed content. Bear in mind HTTPS is no longer a nice-to-have, it’s a must-have – especially for PWAs!

Specify Canonical URLs

Another good SEO PWA practice would be using ‘rel=canonical’ when serving the content coming from multiple URLs. Without it, you can cause issues with indexing when the same content will be available under different URLs, regardless of the domain. Duplicated content violation and creating canonical references between your PWA pages are definitely things to avoid! Marking one piece of content as canonical reduces ambiguity and directly indicates the original source of content.

Don’t show users other content than you show Googlebots

When using dynamic serving to show how different design is displayed on different devices, always remember to check if the content is the same for users and Google search bots. Content cloaking will surely bring your PWA SEO score down, so when using redirects or dynamic serving to change the design according to the device, the content should stay the same. To check if that works, try using Google Search Console’s functionality called Fetch as Google, it will help you to verify if fetched content matches what users see. Also, make JavaScript and CSS files available for browsers – they’ll need them to fully render all types of your content!

Design for different devices

Increased responsivity assures that all users get the same and the best experience possible when using your Progressive Web App. A good solution should work, perform and display the same regardless of the device. In order to achieve that, PWA should be responsive by design –  with margins, paddings, fonts, button and all other elements scaling dynamically to different resolutions and viewports.

Use ‘scrset’ attribute

Another great UX tip increasing overall PWA SEO experience is to use ‘scrset’ attribute. The thing with images is that when they are the scaled up too small ones are as bad as the higher resolution ones – they load for ages and impact the scroll performance. Not to mention padding and margins of the given elements that just don’t scale accordingly. The ‘scrset’ attribute solves this issue by fetching different resolution images, in accordance with screen display capabilities. Remember to avoid using fixed-size fonts, because it will affect the overall usability of your PWA.

Cache

PWAs Service Worker is a great way to cache files, that allows for creating stores of responses keyed by request. It is very important from the SEO point o view. On the one hand, updating your page with relevant content with the appropriate authority will make bots crawl and re-cache it more often. On the other hand, working with caching is all about proper configuration, that allows for returning the cached layout and content by the service-worker. Your developers are responsible for choosing and implementing caching methods, they must all be explicitly requested. The most popular patterns for caching resources are on service worker installation, on user interaction and on network response. Cached items won’t expire, so remember to delete them when the time is right, especially knowing that browsers have certain storage limits!

Correct external linking

Be aware that Google will not index all external links in your PWA. What’s important, this is relevant to both internal and external linking in the app. Especially internal linking and crawling the PWA structures by Googlebots will be significantly impacted without using the traditional ‘a href’ attribute. Bear in mind that bots would only analyze anchor tags with ‘a href’ attributes and will not follow JavaScript links. Google will surely index and crawl a regular ‘a href’ link and it will skip ‘onclick’ links, even if they’re anchor. Using both ‘a href’ and ‘onclick’ attributes in one link might do the job as well.

Implement Schema.org, Open Graph or Twitter Cards

Schema.org is a kind of flexible vocabulary that summarizes the clue of your PWA as machine-processable data. It can be both very general and very specific, nevertheless it makes sense to structure this metadata. Check correctness of your Schema.org and if the data you provided is appearing without errors. Make sure the description matches the content of your PWA!

Additionally, you can annotate with Facebook’s Open Graph Protocol and Twitter Cards to improve user experience related to sharing your PWA content on social networks. Remember not to include these formats if your existing site already supports them, and don’t forget to test it!

 

Test it like there’s no tomorrow!

SEO-wise, understanding how Googlebots render your PWA content is crucial. It will surely help you to add these little amendments and optimizations that will allow your digital performance to move from average to awesome. 

The best tools and tests which can improve your PWA SEO:

 

Google Search Console

Use Google Search Console and fetch URLs with “Crawl > Fetch as Google” feature. With that Google will process and render your JavaScript, not only present the raw HTML response. Another interesting feature is “Crawl > Sitemaps”, which will help you to make sure Google crawlers know that all your pages exist. Other than that, Structured Data, Rich Cards, Sitelinks and much, much more – Google Search Console is a friend of your SEO, so explore its features and use it to monitor your results.

Lighthouse

Lighthouse is a neat open-source automated tool that will help you to improve the PWA and let you know if all of the features are in order. Working either as a Chrome extension or as a command line tool will tell you if PWA loads fine offline or with a bad connection, is it relatively fast, with the secure origin and serves the best practices for accessibility.

Google PageSpeed Insights

PWA (just like a website) should load fast, so put the spotlight on performance optimization. Tools such as Google PageSpeed Insights checks a variety of data and provides the real-time insights on what may be improved. With this tool, you will be able to see the overall performance score of your PWA. Eliminate bottlenecks and get a score above 90 – trust us, users of your PWA will love it!

Cross-browser testing tools

PWAs are loved for reliability, engagement and rich responsive experience. That’s why it’s very important to check your app looks the same across all tools and browsers. Mobile Friendly Test Tool, Chrome Developer Tool’s Device Mode, BrowserStack.com, Browserling.com or BrowserShots.org – these will help you to make sure if your PWA is cross-browser compatible.

In order to fully harness the benefits brought by PWA, you have to turn up the volume and remember that nothing is better in driving traffic that proper visibility brought by great SEO practices and index rankings. Source: developers.google.com

 

Let’s sum it up!

Progressive Web App is a great solution that engages users, thrills developers and gives goosebumps to digital marketers – it’s a fact you can’t deny. Although it has already gained momentum, we’re pretty sure it will remain on the rise for the next few years.

In order to fully harness the benefits brought by PWA, you have to turn up the volume and remember that nothing is better in driving traffic that proper visibility brought by great SEO practices and index rankings. 

The checklist above should be useful to provide guidance and support in developing a PWA with indexability in mind. Let us know how it worked in your case!

SUBSCRIBE our NEWSLETTER

Are you interested in news from the world of software development? Subscribe to our newsletter and receive a list of the most interesting information once a week.

Add comment