Home
Vue.js

    Vue.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 @vueuse/head and the vue-datocms packages:

    yarn add @vueuse/head vue-datocms

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

    // src/main.js
    import { createApp } from 'vue'
    import { createHead } from "@vueuse/head"
    import App from './App.vue'
    const app = createApp(App)
    const head = createHead()
    app.use(head)
    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 setup>
    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
        }
      }
    }`;
    const data = ref(null);
    const error = ref(null);
    const loading = ref(true);
    onMounted(async () => {
      try {
        data.value = await request({
          query: HOMEPAGE_QUERY,
        });
      } catch (e) {
        error.value = e;
      }
      loading.value = false;
    })
    useHead(() => {
      if (!data.value) {
        return {};
      }
      
      return toHead(data.value.blog.seo, data.value.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.