Set Meta Description from within Vue page



  • 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 ?😰



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


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



  • paste your index.template.html contents



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



  • @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'
          ]
    }
    


  • 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



  • @diadal Sadly…Same.

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



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



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


  • @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
    e6e90a03-a000-44af-8def-fc4fecc21758-image.png
    When i check at metatags.io - No description
    https://smallseotools.com/meta-tags-analyzer/ - No description
    https://www.heymeta.com/ - No description



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



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



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



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


Log in to reply