No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Set Meta Description from within Vue page

    Framework
    4
    15
    1963
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      aXiDz @Hawkeye64 last edited by

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

      1 Reply Last reply Reply Quote 0
      • D
        diadal last edited by

        paste your index.template.html contents

        1 Reply Last reply Reply Quote 0
        • Hawkeye64
          Hawkeye64 last edited by

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

          A 1 Reply Last reply Reply Quote 1
          • A
            aXiDz @Hawkeye64 last edited by 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'
                  ]
            }
            
            1 Reply Last reply Reply Quote 0
            • D
              diadal last edited by 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

              A 1 Reply Last reply Reply Quote 0
              • A
                aXiDz @diadal last edited by aXiDz

                @diadal Sadly…Same.

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

                1 Reply Last reply Reply Quote 0
                • D
                  diadal last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • Hawkeye64
                    Hawkeye64 last edited by

                    @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>
                    
                    A 1 Reply Last reply Reply Quote 0
                    • A
                      aXiDz @Hawkeye64 last edited by 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
                      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

                      1 Reply Last reply Reply Quote 0
                      • A
                        Arkshine last edited by

                        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.

                        A 1 Reply Last reply Reply Quote 1
                        • A
                          aXiDz @Arkshine last edited by

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

                          1 Reply Last reply Reply Quote 0
                          • D
                            diadal last edited by

                            @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

                            1 Reply Last reply Reply Quote 0
                            • Hawkeye64
                              Hawkeye64 last edited by

                              @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

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post