0

I have an issue with the Google search crawler that I need some help resolving. We have a vue.js application that reaches out to our Prismic CMS for meta tag data. For example, title, description, etc. Once Prismic returns the data, we inject it into the head of the page. The problem we're facing is that when we test our site in the Google Search Console, we get inconsistent results. Sometimes it comes back with the meta tag content we're expecting, sometimes not. We suspect this is because the call to Prismic is asynchronous, and therefore, the Google search crawler doesn't wait for the data to be returned and injected in the head. Sometimes it comes back before the crawler attempts to read the page, sometimes not.

One idea we had was to await the call to Prismic, but in attempting to implement this solution, I found that I had to make the created() hook async:

...
async created() { 
  await this.getContent();
}, 
methods : {
  async getContent () {
    let document = null;
    try {
      document = await this.$prismic.client.getSingle(...);
    } catch(err) {
      return;
    }

    // add content to meta tags
  },
  ....

This makes the problem more complicated because it means we have to somehow tell Vue to await the created hook. I have no idea how to do that.

In the end, this didn't work. The Google Search Console is still giving us inconsistent results, and when I tested this locally, I confirmed Vue doesn't wait for created() to finish (I put console logs in created() and mounted(), which comes after created(), and mounted() spits out the console message first).

Is there a way to set meta tags asynchronously so that the Google Search crawler will be guaranteed to find them?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.