How do Progressive Web Apps Influence SEO?

Blog 220 How do Progressive Web Apps Influence SEO

If you’re building a progressive web app (PWA) for your main website, you’ll need to consider the SEO ramifications.

It’s common to have a dedicated URL to your web app as well as one to your main website. Because most web apps are essentially just single web pages, most of the search engine optimisation techniques that you’d apply to a standard website will also apply to your app.

That being said, there are a few nuances to be aware of so let’s have a brief look at the main ones.

1. Duplicate content

If your web app duplicates content from your main website, you’ll need to specify which you consider to be the authoritative version. This is particularly important if you are using more than one URL. This is done by using a canonical link element in the head of your page.

2. Avoid using hashes (#) in your URL.

Google search bots can’t be relied on to index pages with a hash in the URL so just stick to normal naming conventions and build links based on the path and filenames instead.

3. Ensure everything is accessible

It’s not uncommon to block bots from indexing parts of your website using a robots.txt file. If you want your web app to be indexed you’ll need to ensure it has access to everything. That includes all Javascript and CSS files, any frameworks that you’ve used, and so on. Google Search Console has a Fetch As Google tool which you can use to determine if anything is inaccessible. You’ll need to login and add the address of your web app. Then look under the Crawl section.

4. Reduce embedded resources

To make the app load more efficiently it’s important to reduce the number of resources. That helps ensure everything is loaded correctly. If you have lots of resources, you can’t always guarantee they all get loaded when they are supposed to. For example, you might want to compress multiple Javascript files into a single include. You can do the same for CSS files. Periodically, check if there are any resources you can drop. You might be linking to multiple web fonts when you only actually need one.

5. Use a sitemap

Sitemaps are still one of the best ways to signal to search bots that you’ve made changes to the structure of your website. Most of the services that generate them are free: see free site map tools. Once you have a sitemap, upload it to Google Search Console. Learn more about sitemaps here: Manage your sitemaps.

6. Ensure you cater for all devices

In order to reach as wide an audience as possible you’ll need to ensure your app is built using responsive design—that way the interface will adapt to whatever screen size your device has. If you’ve done a good job it will work seamlessly on laptops and desktop PCs too.

7. Be fast—Very fast!

Google also emphasises the importance of fast page loading times; in fact, if your page takes too long you’ll rank lower in search results. This is especially important for web apps because they tend to pack a lot of content in on a single page. That means you’ll need to optimise all images, avoid embedding videos, and limit the number of external HTTP requests for resources as possible. You can test your app using Google’s PageSpeed Insights tool.

8. Test updates before you deploy

Building web apps is different to building static web pages. You need to do a lot more testing. Typically, you make an update, test it, then tweak it. It can take many cycles of testing to get it working properly. Make sure it is working correctly before you update the public version. It also pays to test in multiple browsers too. Because web apps use cutting edge web technology features,  support can’t always be taken for granted. You’ll need to test using all of the popular browsers: Mozilla Firefox, Google Chrome, Apple’s Safari, and even Microsoft’s new Edge browser.

9. Regular Maintenance

In general, you want your app to load quickly, adapt to any screen size, and work as intended. If you get that right it should get indexed without any issues because in essence it’s really just a web page built with HTML, Javascript, and CSS. Add your app to Google Search Console and use the free tools on offer to maintain it in good health, just as you would for a regular website.

For more reading, we recommend: Building Indexable Progressive Web Apps.

Leave a Reply

Your email address will not be published. Required fields are marked *