CODEWITHSUNDEEP
facebook-graph-apivue.jsaxiosnuxt.js
Georgian
Georgian

Reputation: 8960

Open Graph reactive meta info

My OG meta info for a certain link (e.g. a blog post link) comes from a database (e.g. blog post takes a while to load).

I'm using Vue + Nuxt with SSR, and Axios to load the blog post.

Since axios is async, my page elements load before the post comes in. In the meantime, facebook already reads the "dummy" metadata.

I don't want prerendering, and I want to keep my data as dynamic as possible. Is there a workaround for this?

Upvotes: 0

Views: 1099

Answers (1)

aBiscuit
aBiscuit

Reputation: 4732

In order to for crawlers to read correct meta data, it should be present in html response from the server. This is the main reason SSR was implemented.

In other words, blog post data should be available in the application by the moment html is being rendered on the server. It is not Nuxt specific, by rather the way crawlers parse page content nowadays.

If you are using Nuxt in universal or generated mode, it provides asyncData and fetch hooks in page components for such cases.

Simple solution example for page component:

export default {
  async asyncData ({ app, params }) {
    try {
      const { data: { post } } = await app.$axios.get(`/api/post/${params.postSlug}`) // or any app specific url format
      return {
        post
      }
    } catch (error) {
      // handle case when no blog post is found, etc
    }
  },
  head () {
    return {
       title: this.post.title,
       meta: [
         { hid: 'og-title', property: 'og:title', content: this.post.title },
       ]
    }
  },
  // Other component's options: data, methods, etc.
}

After that post data will be available via this.post

This will ensure that content consumed by crawler is relevant to the page.

There is not reliable and universal way to force crawlers to wait for page content to be generated, before parsing it's content. Again, that is the main goal that Nuxt.js and other SSR frameworks trying to accomplish.

Upvotes: 1

Related Questions