This gave rise to the client-side rendering process where the browser renders the HTML page by modifying DOM (Document Object...
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.
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
Dynamic render in PWA SEO
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 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 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
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.
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
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.
Google Search Console
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.
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 a tool like SEMrush that will help you complete SEO analysis.
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!
There are millions of websites in the world today, and each one of these sites is competing for the top spot...
It may come as a surprise to many, but at least half of the programming languages were not created in the...