Can't ad meta title dynamically following docs

PeterQF

I have the Meta plugin installed and this code in a page:

  data () {
    return {
      title: ''
    }
  },
 mounted () {
    this.title = 'My dynamic title from DB'
  },
 meta () {
    return {
      title: this.title,
      meta: {
        description: { name: 'description', content: 'Test' },
        keywords: { name: 'keywords', content: 'Quasar website' }
      }
    }
  }

This code gives me no title meta tag at all in view source.

i guess things are happening in the wrong order here. Please adwise.

clwd

How did you solve this problem?

PeterQF

@clwd i will soon answer you soon. Please wait.

dikutandi

I Have Succeed implementing meta. But the problem when try to share in facebook all custom meta doesnot appear.

clwd

How did you implement the meta and verify that it worked? Thanks!

PeterQF

Sorry for late respons.

So the way i got it working was to use preFetch in product file (or in any other dynamic object presentation file):

  preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext }) {
    const payload = { product_slug: currentRoute.params.product }
    return store.dispatch('products/fetchProductObj', payload)
  },

on preFetch i dispatch to Vuex store setting both product object and its meta

Vuex action:

export const fetchProductObj = async function (context, payload) {
  return axiosInstance.get('api/site/getProductObj', {
    params: { product_slug: payload.product_slug }
  }).then(({ data }) => {
    context.commit('setProductObj', data)
    context.commit('setProductMeta', data)
  }).catch(err => {
    context.dispatch('routeToError')
    console.log(err)
  })
}

Vuex mutation:

export const setProductObj = (state, payload) => {
  state.productObj = payload.productObj
}

export const setProductMeta = (state, payload) => {
  state.productMeta.title = payload.productObj.title_sv
  state.productMeta.description = payload.productObj.content_sv ? stripHtml(payload.productObj.content_sv).substr(0, 120) : ''
  state.productMeta.ogUrl = process.env.APP_URL + 'produkt/' + payload.productObj.product_slug
  state.productMeta.ogTitle = payload.productObj.title_sv
  state.productMeta.ogDesc = payload.productObj.content_sv ? stripHtml(payload.productObj.content_sv).substr(0, 120) : ''
  if (payload.productObj.images[0]) {
    state.productMeta.ogImage = process.env.API_URL + process.env.IMAGE_UPLOAD + payload.productObj.images[0].image_file
  } else {
    state.productMeta.ogImage = process.env.IMAGE_MISSING
  }
  state.productMeta.twitterTitle = payload.productObj.title_sv
  state.productMeta.twitterDesc = payload.productObj.content_sv ? stripHtml(payload.productObj.content_sv).substr(0, 120) : ''
}

then back in product presentation file i get the vuex product data and meta data:

  computed: {
    ...mapState('products', ['productObj', 'productMeta']),
...

now data is ready to use even for meta and the meta i set using a function mixin:

  meta () {
    return this.setMeta(`${this.productMeta.title} - ${this.$t('general.appName')}`, this.productMeta.description, this.productMeta.ogUrl, this.productMeta.ogImage)
  }

mixin function:

    setMeta (title, description, url, image) {
      return {
        title: title,
        meta: {
          title: {
            name: 'title',
            content: title
          },
          description: {
            name: 'description',
            content: description
          },
          ogType: {
            property: 'og:type',
            content: 'website'
          },
          ogUrl: {
            property: 'og:url',
            content: url
          },
          ogTitle: {
            property: 'og:title',
            content: title
          },
          ogDesc: {
            property: 'og:description',
            content: description
          },
          ogImage: {
            property: 'og:image',
            content: image
          },
          twitterTitle: {
            name: 'twitter:title',
            content: title
          },
          twitterDesc: {
            name: 'twitter:description',
            content: description
          }
        }
      }
    },

Verifying the meta i use: https://metatags.io/

Paste: https://www.hyreshuset.se/produkter/lasta/hjullastare/volvo-l20

And you see the meta result.

i hope this can help you.

PeterQF

@clwd please tell me if you have come up with a better solution.

clwd

Sorry, I have been pulled away for publishing. Thus far I have not found a better solution, and I have looked at this from a lot of angles. I will start working on this again tomorrow and let you know if I find a better solution.

Thank you for detailing how you were able to work around this problem!!

clwd

I did not find a better integrated solution after considerable research and experimentation. However, I did take a different approach.

Vue-Meta, prerendering (using history mode), and sitemap generation really did everything I needed for Google searches. Google renders the pages and could easily find the meta tags. This is great, for people using Google and Ask for searches. However, for the other search engines and the test tool that you noted, the meta data is not found because these engines do not crawl through the javascript.

After a lot of reading, I noticed a dismissive attitude on the part of some for this meta tag rendering problem, because Google accounts for the overhelmingly majority of the searches. I get it, but avoiding the challenge is not the solution in order to reach all customers. SPA, by design, is at best a 90% baked solution for all search engines.

Since I did not need dymanic meta tags, I took the post-build approach of inserting the meta tags into the index.html file for each page that was produced by prerendering. I also removed the Vue-Meta tag code from each page to remove any conflict. I inserted the meta tags into JSON, along with some basic informatoin (i.e. file path), and after the quasar build completes I run a lightweight tool to read thorugh the JSON and insert the tags on the appropriate page. The tags are human readable and readily availalbe for the test tool and for all of the search engines. The best part of this solution is that all of the tags are in a single document, easy to review and quick to modify. This took a couple of hours to setup and test.

Thanks for your suggestion, which may help someone else.

hanzoz

@PeterQF I actually follow your suggestion but ended up with undefined.

it looks like when prefetch, the value is undefined, the meta pick it up and set as undefined

anyone have any suggestion how to deal with this ‘undefined’ ?

alt text
as you can see above, the setMeta received the “title” and it only applied to the following part

return {
   title: title  <---- it works here
   titleTemplate: title => `${title} - abc`, <---- and here

but the following meta doesn’t work and get “undefined” for the value when I view page source

meta: {
          title: {
            name: 'title',
            content: title + ' aaaaaaa'
          },
          description: {
            name: 'description',
            content: description'
          },

PeterQF

@hanzoz running Google Analytics now for a while and i also still have problem with a lot of page titles registered as (not set).

I would really like to solve this. I use Quasar v1.13.0 in SSR mode.

Not a Pro when it comes to Google Analytics, is there a way to find a pattern why this happens like browser/desktop/mobile or what not?

No More Posting New Topics!

Can't ad meta title dynamically following docs