Improving SEO and Meta Tag Load Times for a Quasar SPA

[dom]

My website is a single page app built using Quasar where almost every page is dynamically rendered. Users create new notes and these notes are loaded for viewing in a Vue component by querying our cloud database and distributed storage network. Each time a note is loaded, it creates a new ‘page’ which is a url pointing to the display component with dynamic segments (i.e. view/:type/:id). On each of these display pages, I have meta tags using the Quasar Meta plugin that are dynamically populated based on the database or store query.

The issue is that these pages do not load fast enough for Google to pick up the meta tags since it must wait for the database query.

Is there an easy way to improve this, or an alternate method to improve SEO for a single page Quasar app? I am trying to avoid SSR just because of how my app is currently built, but if that is the only option I will rebuild it to use SSR.

[Ilia]

@dom Google can parse dynamically created pages, but not all the search engines can yet. So the best shot would be to use SSR.
You can check how Google sees your page in there:
https://search.google.com/search-console

For example,
That’s how that works for SPA on https://www.coloban.com

There you will be able to check whether Google picks the page data fetched from the database or not.

Cheers!

[Ilia]

I assume, you have the request to the server which is fired after the page has been loaded, right?
Have a look at prefetch in that case, so you can load the data just before the website HTML is generated
https://quasar.dev/quasar-cli/prefetch-feature

(That still requires SSR though…)

[beets]

@dom As far as I know, Google won’t wait for any async request, so while as llia pointed out, google can read meta tags on a SPA, it won’t work here. SSR is the best option, but there’s a few other options here: https://forum.quasar-framework.org/topic/7187/change-meta-tags-dynamically-from-index-html?_=1609628989032

But, using one of the methods in the link above would require you to make a call to the db on the server, and then the same call to the db on the client, so it’s not as efficient for sure.

[dom]

Thank you all for responding. The dynamic meta tags that I currently have set up work fine in the sense that the browser can see them, but the major issue is the fact that I have to make and wait on an async request (to an external server) upon page load in order to populate those meta tags and it takes too long.
I thought SSR might be the only way to fix this, but I wanted to make sure there was not another option out there before I took the time to set up SSR.

Thanks again!

[dom]

@Ilia I’m looking into prefetch and this may actually solve my problem… I’m awaiting a JSON object after the page render starts which contains all data for the page. If I can have that promise resolved before the render begins, then the meta tags might be populated in time for Google to see them.

I’ll give it a try before I switch to full-blown SSR.