SEO in PWA – How to Optimize JavaScript in Progressive Web Apps

Are PWAs the new sexy of mobile tech? Yes, sir! Why? Well, for several 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, the best features of websites and mobile apps combined 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 favoured by users, developers and… digital marketers. All of that, thanks to the impact they have and the visibility opportunities they offer, coming from indexability and linkability. Contrary to mobile apps, PWAs belong to the WWW ecosystem, making all of their content visible on Google. That’s why it is crucial to make the most out of the PWA standard’s opportunities. Especially since SEO optimization 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 Googlebot’s will crawl it as usual. Nevertheless, some issues could potentially impact indexing, ranking, plus crawl ability, and developers should be aware of them!

Why these issues occur? 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, the server-side is being used during navigation directly to an URL, and client-side rendering is being used only after loading the initial page 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.

 

Server-side rendering impact on SEO in PWA

Luckily, there are several ways to render on the server-side. One of the options available is to use the JavaScript framework Vue.js. With Vue, by default, components produce and manipulate DOM in the browser as output. Nevertheless, developers can also choose to render the 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 see the fully rendered page, which translates to better SEO. It also speeds up time-to-content, particularly when users struggle from a slow connection or having older devices. You don’t need to wait for the JavaScript to download and display content so that users will see the page sooner. That obviously increases user experience and affects the conversion rate significantly.

Server-side rendering guarantees that engine crawlers will 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 can do it correctly, not to mention smoothly. 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 the 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 a 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, developers must be especially cautious regarding the Web Apps SEO issues when building a PWA. 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 Google bots will not index URLs with ‘#’ or ‘#!’ fragment identifier in them? Unfortunately, many PWAs unknowingly use it in their URL structure. To avoid it, implement a 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 Googlebot’s 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 application 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 indexing issues when the same content is 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 source of content.

Don’t show users other content than you show Google bots

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 render all types of your content fully!

Design for different devices

Increased responsivity assures that all users get the same and the best experience possible using your Progressive Web App. A good solution should work, perform and display the same regardless of the device. 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 the ‘scrset’ attribute

Another great UX tip for increasing the overall PWA SEO experience is to use the ‘scrset’ attribute. The thing with images is that when they are 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 the padding and margins of the given elements that don’t scale accordingly. The ‘scrset’ attribute solves this issue by fetching different resolution images by 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 create stores of responses keyed by request. It is essential 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 the proper configuration that allows for returning the service workers cached layout and content. Your developers are responsible for choosing and implementing caching methods. They must all be explicitly requested. The most popular patterns for caching resources are service worker installation, user interaction, and 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 Google bots 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 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 concrete. Nevertheless, it makes sense to structure this metadata. Check the 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 them!

Test it like there’s no tomorrow!

SEO-wise, understanding how Google bots render your PWA content is crucial. It will surely help you 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 javascript 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 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 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. It is relatively fast, with a 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 various data and provides 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 crucial 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 make sure your PWA is cross-browser compatible.

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. If you wish to do detailed SEO research, you can use tools or ask a specialized team that will help you perform a complex SEO audit.

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

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

Do you have any questions about SEO in Progressive Web Apps? Contact our experts, and you will know about everything you must know.

Let's Software