Home
Vue.js/Nuxt.js

    Vue.js/Nuxt.js > SEO management

    SEO management

    Similarly to what we offer with responsive images, our GraphQL API also offers a way to fetch pre-computed SEO meta tags based on the content you insert inside DatoCMS.

    You can easily use this information inside your Vue.js app with the help of:

    Here's a sample of the meta tags you can automatically generate:

    <title>DatoCMS Blog - DatoCMS</title>
    <meta property="og:title" content="DatoCMS Blog" />
    <meta name="twitter:title" content="DatoCMS Blog" />
    <meta name="description" content="Lorem ipsum..." />
    <meta property="og:description" content="Lorem ipsum..." />
    <meta name="twitter:description" content="Lorem ipsum..." />
    <meta property="og:image" content="https://www.datocms-assets.com/..." />
    <meta property="og:image:width" content="2482" />
    <meta property="og:image:height" content="1572" />
    <meta name="twitter:image" content="https://www.datocms-assets.com/..." />
    <meta property="og:locale" content="en" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="DatoCMS" />
    <meta property="article:modified_time" content="2020-03-06T15:07:14Z" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@datocms" />
    <link sizes="16x16" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
    <link sizes="32x32" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
    <link sizes="96x96" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
    <link sizes="192x192" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />

    To do that, first install both vue-meta and the vue-datocms package:

    yarn add vue-meta vue-datocms

    And install the Vue Meta plugin inside src/main.js:

    // src/main.js
    import Vue from "vue";
    import App from "./App.vue";
    import VueMeta from "vue-meta";
    Vue.config.productionTip = false;
    Vue.use(VueMeta);
    new Vue({
      render: h => h(App)
    }).$mount("#app");

    Now, inside your page, you can feed content coming from a faviconMetaTags or _seoMetaTags query directly into the toHead function:

    <template>
      <div>
        ...
      </div>
    </template>
    <script>
    import { request } from "./datocms";
    import { toHead } from "vue-datocms";
    const HOMEPAGE_QUERY = `
    {
      site: _site {
        favicon: faviconMetaTags {
          attributes
          content
          tag
        }
      }
      blog {
        seo: _seoMetaTags {
          attributes
          content
          tag
        }
      }
    }`;
    export default {
      name: "App",
      data: () => ({
        data: null,
        error: null,
        loading: true
      }),
      async mounted() {
        try {
          this.data = await request({ query: HOMEPAGE_QUERY });
        } catch (e) {
          this.error = e;
        }
        this.loading = false;
      },
      metaInfo() {
        if (!this.data) {
          return;
        }
        return toHead(this.data.blog.seo, this.data.site.favicon);
      }
    };
    </script>

    Want to know more about SEO customization in DatoCMS? Check out this video tutorial:

    Questions?
    We're always happy to help with code or other questions you might have. Search our documentation, forum, contact support, or connect with our sales team. You can chat live with other developers in our Slack channel.