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
    2627
    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 last edited by 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 ?😰

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

        @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>
        
        A 1 Reply Last reply Reply Quote 0
        • 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