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.jsimport 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 {attributescontenttag}}blog {seo: _seoMetaTags {attributescontenttag}}}`;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: