Make crawlers read header meta tags after page has finished loading Nuxt

Question

I am using Nuxt for a website where we have different content types like events, blog articles etc.

We have an API where the content is being pulled from, so for example, if a new article is written, it will show up in the API and then show up as a dynamic route on the nuxt app.

We have SEO tags, like title, keywords, description, image etc. And also og meta tags for Facebook and such. I am using the nuxt-seo plugin https://nuxt-seo.frostbutter.com/

The meta tags loads correctly in the browser when testing and on Facebook. However, for the dynamic routes, because the content is pulled from the API, the header meta tags are only updated once the content is pulled in, i.e. once the page has finished loading. However, Facebook grabs the meta header tags as soon as it can (which will only be the default header tags) and does not wait for the page to finish loading so that it can read the updated correct meta tags.

Is there anything one can do to force crawlers to wait for the page to finish loading before grabbing the meta tag info in the headers?

Thanks

Answer 1

I figured out what my mistake was. I was fetching my content in the mounted part of the page lifecycle. So I was loading default seo tags inside my head() function and then updating them after loading content from mounted().

I moved my code to the asyncData function, which now fetches the data before the page loads. This also then ensures that the correct meta tags are available and ready for crawlers to read once the page is finished loading.

See example below:

This is correct:

async asyncData({ $seo, params, store }) {
  ...
  content = fetch content here from store or api.
  ...
  const meta = {
    templateTitle: '%title% - %name%',
    canonical: 'auto',
    charset: 'utf-8',
    lang: 'en',
    language: 'English',
    title: content ? content.title : '',
    description: content
      ? content.summary
        ? content.summary
        : content.description
        ? content.description
        : ''
      : '',
    image: content ? content.image : '',
    twitter: {
      card: 'summary',
      title: content ? content.title : '',
      description: content
        ? content.summary
          ? content.summary
          : content.description
          ? content.description
          : ''
        : '',
      image: content ? content.image : ''
    },
    openGraph: {
      title: content ? content.title : '',
      description: content
        ? content.summary
          ? content.summary
          : content.description
          ? content.description
          : ''
        : '',
      type: 'article',
      article: {
        author: content.author ? content.author : '',
      },
      image: {
        url: content ? content.image : '',
        alt: content
          ? content.summary
            ? content.summary
            : content.description
            ? content.description
            : ''
          : ''
      }
    }
  }
  $seo(meta)
}

Instead of this:

async mounted() {
  const meta = {
    title: content ? content.title : '',
    ...
    ...
  }
  $seo(meta)
}

and instead of this:

head( { $seo } ){
    const meta = {
      title: content ? content.title : '',
      ...
      ...
    }
    return { $seo(meta) }
  }