Set Meta Description from within Vue page

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