Set Meta Description from within Vue page

aXiDz

Hello,
I’m trying to change description so for each page it would be different, which is set by meta plugin([https://forum.quasar-framework.org/topic/6265/quasar-seo-tips/3](SEO TIPS)), using the following within App.vue:

import meta from './utils/meta.js'
export default {
  name: "App",
     data () {
      return {
    metaTags: {
          description: 'My description...',
          title: 'Get Started | My-site',
          url: 'https://my-wan-ip',
          image: 'https://my-wan-ip/image-1.png'
        }
      }
    },
    meta //this is the method that the plugin is using
};

index: Setting like in app and calling meta again.
Removed description from index.template.html and title so they won’t appear in header
Can see Description set within HTML:

<meta name="og:url" content="https://mywan-ip" data-qmeta="ogUrl">
<meta name="twitter:url" content="https://mywan-ip" data-qmeta="twitterUrl">
<meta rel="canonical" href="https://mywan-ip" data-qmeta="canonical">
<meta name="og:image" content="https://mywan-ip/image-1.png" data-qmeta="ogImage">
<meta name="twitter:image" content="https://mywan-ip/image-1.png" data-qmeta="twitterImage">
<meta name="og:title" content="Index page | My Site" data-qmeta="ogTitle">
<meta name="twitter:title" content="Index page | My Site" data-qmeta="twitterTitle">
<meta name="description" content="description..." data-qmeta="description">
<meta name="og:description" content="description..." data-qmeta="ogDescription">
<meta name="twitter:description" content="description..." data-qmeta="twitterDescription">

When trying the url at metatags.io the description, title appear empty nor thumbnail is seen.
Edit: I’m using pwa and tried using meta plugin tags as well, same result, I can see the pages title change but metatags.io don’t preview it
Any ideas what am i Doing wrong ?

Hawkeye64

@aXiDz You would do something like this:

<script>
export default {
  name: 'About',

  meta () {
    return {
      title: this.metaTitle,
      meta: {
        title: {
          name: 'title',
          content: this.metaTitle
        },
        ogTitle: {
          name: 'og:title',
          content: this.metaTitle
        },
        twitterTitle: {
          name: 'twitter:title',
          content: this.metaTitle
        },

        description: {
          name: 'description',
          content: this.metaShortDesc
        },
        ogDesc: {
          name: 'og:description',
          content: this.metaShortDesc
        },
        twitterDesc: {
          name: 'twitter:description',
          content: this.metaShortDesc
        },
        ogImage: {
          name: 'og:image',
          content: this.metaImage
        },
        twitterImage: {
          name: 'twitter:image',
          content: this.metaImage
        }
      }
    }
  },

  computed: {
    metaTitle () {
      return "About Page"
    },

    metaShortDesc () {
      return "This is the short description"
    },

    metaImage () {
      return 'app-logo-128x128.png'
    }
  }

}
</script>

aXiDz

@Hawkeye64 Thank you a lot for the solution, i like it more than the one in the other post, Tried just now, sadly, no success, everything is set as before and it’s empty on metatags.io, somewhy only when description and title defined on index.template.html, it works…
It’s strange, quasar.dev has same setup and it shows flawlessly on metatags.io.

diadal

paste your index.template.html contents

Hawkeye64

@aXiDz make sure to include the Meta plugin in your quasar.conf.js or you’ll get nothing: https://quasar.dev/quasar-plugins/meta

aXiDz

@diadal Thank you for the interest
Tried to remove description + title and so on… but when i do remove it at index.template.html It’s gone on all pages.

<!DOCTYPE html>
<html>
<head>
  <title><%= htmlWebpackPlugin.options.productName %></title>
  <meta charset="utf-8">
  <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
  <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
  <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
  <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
</head>
<body>
  <!-- DO NOT touch the following DIV -->
  <div id="q-app"></div>
</body>
</html>

@Hawkeye64 Thanks for reply, my quasar.conf.js plugins

framework: {
      // Quasar plugins
      plugins: [
        // 'LocalStorage',
        'Notify',
        'Dialog',
        'Loading',
        'Cookies',
        'Meta'
      ]
}

diadal

do this

<!DOCTYPE html>
<html>
<head>
  <!-- <title><%= htmlWebpackPlugin.options.productName %></title> -->
  <meta charset="utf-8">
  <!-- <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>"> -->
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
  <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
  <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
  <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
</head>
<body>
  <!-- DO NOT touch the following DIV -->
  <div id="q-app"></div>
</body>
</html>

then from your layout do something like this

  meta () {
    return {
      title: this.$route.name.charAt(0).toUpperCase() + this.$route.name.slice(1),
      titleTemplate: title => `${title} - MywebSiteName`,
      meta: {
        description: { name: 'description', content: this.$route.name + 'My description' },
        keywords: { name: 'keywords', content: `${this.$route.name + }` },
        equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' }
      },
      script: {
        ldJson: {
          type: 'application/ld+json',
          innerHTML: '{ "@context": "http://schema.org" }'
        }
      }
    }
  },

if you find this helpful you can buy me a coffee @ Patreon

aXiDz

@diadal Sadly…Same.

I have a feeling something is interfering…how come if it’s set - it doesn’t show on metatags.io?

diadal

this chrome extension help you debug this easily https://chrome.google.com/webstore/detail/mozbar/eakacpaijcpapndcfffdgphdiccmpknp
install is on your chrome refresh your project

Hawkeye64

@diadal What you are showing for intex.template.html is pre-quasar/app v2
For q/app v2 and above, use this:

<!DOCTYPE html>
<html>
  <head>
    <title><%= productName %></title>

    <meta charset="utf-8">
    <meta name="description" content="<%= productDescription %>">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
    <link rel="icon" type="image/ico" href="favicon.ico">
  </head>
  <body>
    <!-- DO NOT touch the following DIV -->
    <div id="q-app"></div>
  </body>
</html>

aXiDz

@diadal Thanks for the suggestion - it will save a bit time building
@Hawkeye64 tried the code, productName, productDescription and even all ctx settings are undefined.
I have a feeling you are talking about something to come… quasar.conf.js doesn’t have those defined.

wait a second…quasar max running is v1.9.6…

"devDependencies": {
   "@quasar/app": "^1.9.6"
}

tried:

quasar upgrade

Returns that everything is updated.

Update:
I didn’t use @Hawkeye64 code for v2 index.template.html, removed only description from my old index.template.html.
so… i used moz extension it shows @Hawkeye64 code

When i check at metatags.io - No description
https://smallseotools.com/meta-tags-analyzer/ - No description
https://www.heymeta.com/ - No description

Arkshine

Not a pro, but am I wrong or you are not using SSR mode? Dynamically changing the meta makes sense only with SSR.
You said you’re using PWA, you might need to check the doc about running SSR + PWA.

aXiDz

@Arkshine I’m not using SSR mode you are right…Maybe, that’s one way to solve it…

diadal

@aXiDz this issue smallseotools.com metatags.io only flash the html not render the app.js you can try google webmater or yandex it will definitely show your metadata

Hawkeye64

@aXiDz Yes, ignore what I said because you’re not at q/app v2 and quasar upgrade won’t upgrade major versions. If you want to, follow the upgrade steps here: https://quasar.dev/quasar-cli/app-upgrade-guide#Upgrade-Guide

No More Posting New Topics!

Set Meta Description from within Vue page