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:

A document <head> manager for React such as vue-meta
Our vue-datocms package.

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>

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.