Can't ad meta title dynamically following docs



  • 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.



  • How did you solve this problem?



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



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



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



  • 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.



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



  • 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!!



  • 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.


Log in to reply