No wonderthe concept of writing one app to run on all platforms …
Mike Jackowski 16 Jul 2019 20 min to read
SEO in PWA – when Googlebot loves your Progressive Web App
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.
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
Dynamic render in PWA SEO
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!
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
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.
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
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
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.
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!
Who is a Senior Software Developer? A typical software developer career path consists …
In today's article we'll look at the leaders of several industries and …
Leave your email address or phone number.
We will contact you promptly to discuss next steps.