Let’s see what are the main areas that need special care in terms of SEO for PWAs, and the latest versions of Magento PWA Studio specifically

• Crawlability
• Accessibility by Social Media sites
• Internal links and proper use of history API
• Unique titles, meta tags, snippets
• HTTP status codes
• Lazy loading of images
• XML sitemaps and robots.txt

Crawlability

One aspect of crawlability of PWAs has to do with how the search engines process JavaScript in general. Bots render JavaScript in two waves: to be able to see content loaded by JavaScript in the browser, they have to render it, and because rendering pages requires a lot of time and resources, they defer rendering JavaScript until they have the resources available. This means crawling JavaScript applications is a less predictable and more time-consuming process.

As JavaScript applications become more and more widespread this will be less and less an issue, but currently, it is a serious consideration. Especially when it comes to PWA Studio, which by default is a purely JavaScript application without any visible HTML content present in the root HTML document.

There are three main approaches to deal with JavaScript SEO, called rendering strategies.

• Do nothing special – use a purely Client-Side Rendering strategy (CSR) only and rely on the bots slowly but consistently crawling the site.
• Use a workaround – pre-render static HTML to help the crawlers parse the site without processing JavaScript. This method generally does not require changes to the frontend codebase and is called the Pre-Rendering and Dynamic Rendering strategy.
• Render the page on the server-side partially or fully executing JavaScript on the frontend server. This approach is called the Server-Side Rendering (SSR) strategy. It usually goes hand in hand with client-side hydration that makes the static HTML segments rendered on the server-side interactable in the browser. It requires code changes both on the server-side and the client-side. SSR not only helps the bots to find content without having to run JavaScript but can improve the user experience by providing digestible content as soon as the page is downloaded and before JavaScript execution starts.

SEO and the Client-Side Only Rendering Strategy

This strategy might work without limitations soon when JavaScript applications become more popular and the search engines will handle them on an equal footing with traditional websites. Until then, good results can be achieved by sticking to the best practices.

Pros

• no extra tooling is required on top of a purely CSR based PWA

Cons

• Limitations of search bots and of social media sharing
• Potentially  lower indexing frequency
• Less control and visibility on the search engine internals
• Not all search engines can execute JavaScript

Summary

• Dev cost – no or minimal
• Infrastructural cost – no or minimal
• Recommended for Magento PWA Studio? – Yes, if the catalog does not change too often and the SEO only shoots for the biggest search engines that can understand JavaScript

SEO and the Pre-Rendering Strategy

Pre-Rendering rendering switches between client-side rendering for regular user agents and pre-rendered content for search engine bots. It requires some kind of routing to separate the user agents and infrastructure with “renderers”, headless browsers that fetch process JavaScript and render static HTML the same way as desktop or mobile browsers do. The static HTML is stored and cached for a period of time to increase response time and spare resources.

Search engines appreciate this effort and as the process produces similar content they do not consider it as cloaking.

Though it is definitely a workaround dedicated to crawlers, pre-rendering has some obvious advantages.

Pros

• It is easy to implement using dedicated services
• Has open source solutions that internal infrastructure can implement
• Traditional SEO tools can preview and analyze pre-rendered pages
• It works for search and social media bots

Cons

• Only helps SEO and search and social media bots, does not improve UX

Summary

• Dev cost – no or minimal
• Infrastructural costs – monthly costs of a middle-sized server
• Recommended for Magento PWA Studio? – YES, it is easy to set up and offers great and quick results and more control on the search engines. 

SOME OPEN-SOURCE PRE-RENDERING SOLUTIONS

Rendertron

• Rendering engine without a dashboard
• Uses headless chrome
• Maintained by the Google Chrome team
• Has different middleware

Seosap.io

• Full-fledged solution with a feature-rich dashboard
• Supports multiple websites
• Elaborate documentation
• Uses Rendeartron as the rendering engine

Prerender

• Rendering engine without a dashboard
• The open-source rendering engine of prerender.io
• Has different middlewares

SOME PRERENDERING SERVICES

Prerender.io

• Has a free trial
• Different pricing plans based on the number of cached pages and different cache refresh periods
• Easy to integrate

Seo4Ajax

• Has a free trial
• Different pricing plans based on the number of cached pages
• Dashboard with Insight for bot activity, cache freshness, duplicates, broken links
• Easy to integrate

SEO and the SSR Strategy

Using SSR for SEO optimization together with client-side hydration for optimizing user experience and performance are very promising technologies and most probably the future for PWAs. In the PWA world, Next.js, Vue.js and others have great working solutions with different approaches. For example, just rendering some meta tags on the server-side can achieve significant SEO improvements.
As far as PWA Studio concerns, UPWARD provides some basic SSR capacities via different resolvers and templates, but React SSR support via Node.js is still on the way.

• Pros:
  • Potentially an all in one solution for SEO and performance issues of PWAs
• Cons:
  • Generates a whole new set of new problems to solve
    • More complex cases need client-side re-hydration
    • Server-side needs to implement an additional layer of caching
    • Rendered dynamic content to maintain good performance.
• Dev cost – can be huge without a turn-key solution, requires considerable backend, frontend and DevOps effort and SEO expertise.
• Infrastructural costs – require a caching solution in front of the frontend server and more CPU resources.
• Recommended for Magento PWA Studio? – YES, but as of Q1 2021, it is probably better to wait for the official Node.js and React SSR support by the Magento PWA Studio team, or some well-tested open-source solution of the same kind.

Additional SEO considerations

Finally, it is worth highlighting a few additional SEO related points that require special attention.

• XML sitemaps and robots.txt
  • Pre-rendering solutions rely on and search engines honor well-maintained XML sitemaps. It is not always trivial how the sitemap is transferred to or proxied through with the proper links to the PWA application.
• Internal links and proper use of history API
  • PWA developers tend to prefer buttons to links but SEO sometimes requires links – some customization might be required here.
• Unique titles, meta tags, canonical tags, hreflang and structured data
  • These data are as essential for PWAs as for any other web application
• HTTP status codes
  • 404, 301 and 302 codes are of special importance. The best practice is to use JavaScript redirect to a URL for which the server responds with a proper HTTP status code and, ideally, directly respond with these status codes from the server-side. Here PWA studio might need some optimization.
• Lazy loading of images
  • Images can be quite costly on bandwidth and performance, which might affect search engine scores. A good strategy is lazy loading images just before the user is about to see them.

SEO testing

In general, Google’s PageSpeed Insights and Mobile-Friendly Test tool are great starting points for a quick check of how search engines actually see a PWA site, irrespective of its rendering strategy.

Google Search Console provides several tools to check the SEO performance of a web page including index coverage, error pages, 404s canonical URLs, internal links as well as availability and mobile-friendliness tests and HTML inspection for the individual pages as rendered by the Google Bot.

Interested to know more about SEO and PWA?

In case you are keen to explore our solutions further, we welcome you to talk with one of our professional Magento eCommerce specialists to answer your questions now.