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>