How to approach PWA SEO

Please note that this guide is based on the current ScandiPWA release (as per 08.11.2019) and needs to review if any updates are released.

Migration checklist

Dynamic Rendering

To ensure the website has a stable dynamic rendering solution.

START WORK ON PROJECT PLANNING PHASE!

WORKFLOW FOR MIGRATION

1. Understand the current share of organic traffic search engines - google, bing, Yandex etc.
2. If the website is being migrated to PWA make sure you identify the number of requests relevant search engine bots is sending per
second to identify possible load on prerender solution and choose most suitable solution. For that:
a. use tools like Google crawl rate (can be accessed via GSC or through a relevant article in Webmaster). Yandex webmaster also
has a similar dashboard. Combine data to know expected hits per second for important bots.is
b. If possible request server log files of an old website and calculate the number of hits from bots. Can export file to Screaming
Frog Server Log file analyzer and calculate the average hits per sec by filtering bots. Get statistics how many pages get crawled
and what is the average rate of 200, 5xx, 3xx, 4xx errors as well as average hits per sec so that you have a benchmark to work
with later
3. Get in touch with DevOps to figure out the best setup taking into consideration the load.
4. After the solution is installed test the solution by crawling the environment and adjusting crawl speed to match the expected load on the

prerendering solution
5. QA if the solution is working together with DevOps - test solution by Mobile-friendly tool. Fetch 10 URLs, if pages are returned well
rendered. Review the loaded resources, if there are GraphQL files requested the Prerender is not working as prerendered version should
not contain any GraphQL
6. After go-live monitor the performance of the solution by reviewing server log files (approach DevOps and agree on how it will be possible
to receive the server log files daily)
7. Can also warm the cache of prerender by crawling top organic landing pages to ensure that for crawlers pages are returned quickly
8. If URLs are returned with 200 status code and overall performance is good - perfect! Just make sure to also test rendering via Mobile-
Friendly tool to ensure that pages are prerendered fully. If HTML Prerender prepares is heavy, not optimized page then page load might
be slow, not all content present etc., which might affect rankings

WORKFLOW FOR NEW PROJECT

Overall it's the same as above just might be trickier to calculate the load on Prerender. In the beginning, it might be lower but as the project will
grow it will increase, therefore, better consult with DevOps to come up with the most effective roadmap.

Please update this Confluence after Karmia project with relevant info
BACKGROUND WITH OUR PROJECTS

for Hotme and for Technodom there is used open-source prerender solution. The solution is able to handle around 2 parallel requests per second
from bots and deliver around 80% of pages without a timeout. Such a solution was more or less fine for Hotme which has around 2 requests/sec,
but still sometimes might return errors, therefore, it's not suggested to use for our projects at all.

NEXT STEPS

DevOps planning to deliver a custom SW prerender solution in the middle/end of November to update the solution Technodom has. The
solution should be usable for other projects as well.
Prerender.Cloud is paid service which could be potentially used in the short-term. It's paid thou (not so expensive as others). They claim
to handle 15-20 requests/second which is a lot (maybe they can handle even more need to consult if needed). Approach Ilja for details.

Content accessibility

Brief PMs and Devs that content in tabs, menus etc. need to be loaded on the first-page load.

Check yourself all tabs, buttons Expand, Learn more etc. in the early project phases.

Robots.txt

Ticket where you can find a default robots.txt for PWA

SWPWA-266 - Sitemap & Robots DONE

Please make sure you don't assume that it's 100% final. Make sure you check server logs of your own project and expand robots.txt if needed.

General guidelines

Overall to PWA applies the same guidelines as for any website. Therefore, all SEO GCP from current website should be migrated.

Tips and trick of QAing PWA

1. CUSTOM BOT

If you want to test prerender solution on Live it's suggested to create a custom bot to separate crawls from this bot in Server Log files. E.g., for
Technodom linabot is used. Just need to make sure that DevOps will add your bot in the list of user agents who will receive a prerendered
version of the website.

2. CHANGE USER AGENT OF YOUR BROWSER

https://bewisse.com/modheader/ - Chrome Extension to switch User-agent of your browser and see in real life how Google will see your page

3. CLEAN CACHE

Before reporting any bug to devs make sure that you clean cache for the specific page in Console (even in Incognito)

4. USE POSTMAN

Our PWA had various bugs with response codes:

Existing pages return 404

Non-existing pages return 200
Random 503

To check server response codes without any cache can send a request via Postman app

Also, it's strongly suggested to keep Console always open when doing QA and actual walkthrough of the website. Otherwise, if you stumble
upon some bug related to status codes which won't be possible to replicate easily Devs may not find out where and how to fix it. If Console is
open in the network tab there are recorded resources loaded and all errors https://prnt.sc/pul8xz This info will help developers.
FLICKERING OF TITLES AND OTHER COMMON BUGS

Some things to remember

By default Checkout, cart, 404 page etc. doesn't have titles in ScandiPWA, need a ticket for that
TEC-1459 - Titles missing for 404, Cart and other pages DONE
Pay attention to pagination from SEO perspective, if elements are loaded correctly, how is URL displayed.

Bugs

Here are some tickets which contain bugs which we have seen in both Technodom and Hotme

Title flickers

TEC-1458 - Flickering Title DONE

SWPWA-276 - HTML Head DONE

404 errors

TEC-1179 - Routing DONE

If there is a new page type, which is not CMS, PDP, PLP, HP, it might return 404 if not defined as an exisitng page by Devs