Content: How to define article properties like meta tags for SEO?

[jualoppaz]

Hi!

I have developed a blog with nuxt and vue-meta with a database solution, so I ask for every meta tags for each page. But this git-based solution is very elegant and simple.

I would like to know which is the right mechanism for share meta info between content articles and component head method.

After reading nuxt/content docs I tried defining meta info like author near to title property like this:

// content/home.md
---
title: Home
author: Juan Manuel López Pazos
---

# Welcome to my blog

Then I load that info in asyncData method:

// views/_slug.vue
async asyncData ({ $content, params }) {
    const articles = await $content('articles').fetch()

    const path = params.slug ? `articles/${params.slug}` : 'home'
    const doc = await $content(path).fetch()

    return {
      articles,
      doc
    }
  },

And finally use doc.author property as author meta tag in head method:

// views/_slug.vue
head () {
  return {
    title: this.doc.title,
    meta: [
      {
        hid: 'author',
        name: 'author',
        content: this.doc.author
      }
    ]
  }
}

This solution works and the author meta tag is added to document. However I don't know if this is the right and cleaner way.

In case that this solution is right, I think properties section in .md files can turned into a garbage.
Is developer's responsibility to keep it clean? Or is nuxt/content going to offer a more sophisticated mechanism for this stage?

Thank you so much.

[cschweda]

This would be my approach.

I haven't done it yet with @nuxt/content specifically -- but your approach in the head() function in _slug.vue is how I load meta info on a page-by-page basis in my current Nuxt sites.

You say:

In case that this solution is right, I think properties section in .md files can turned into a garbage.

What do you mean by the 'properties section' -- the YAML in each .md file?

If so -- I'm not sure what the alternatives are.

I mean, you could always use the content:file:beforeInsert hook to add page-specific metadata that isn't in the YAML (if the concern is keeping the YAML concise).

[jualoppaz]

Hi @cschweda !

Yes, I was refering to YAML section. I though this was a custom nuxt/content syntax for that purpose.

I also think that my initial proposal could be valid. I don't think is a bad decision be completely free for define your properties, but I missed a little section indicating how to define custom info for each .md file.

Force developers to define all custom properties in a data field could be also a good idea.

Thank you for the quick response.

[benjamincanac]

Hey @jualoppaz

You're right the documentation was a little light on custom properties, so I added this section: https://content.nuxtjs.org/writing#front-matter.

In my opinion, what you did to define meta tags is the right way whether data comes from $content() or any other API.

You can learn more on the Nuxt.js documentation.

[jualoppaz]

Thank you @benjamincanac ! Now article properties definition is explained very clear 👌

[jackdomleo7]

The method suggested works really well when working with JavaScript. But when working with the TypeScript class API, it errors when trying to access title: this.doc.title.

You get the following error:

Property 'doc' does not exist on type 'Vue'.

I wasn't able to find a solution for using TypeScript in this scenario, so I'm using JavaScript for now in this one file until I can find a solution, any suggestions?

[jessequinn]

@jackdomleo7 i also ran into this error with TS.

[jackdomleo7]

@jessequinn Let me know if you find a solution, I have not been able to yet, so I'm still using JavaScript for that specific file.

[benjamincanac]

@jackdomleo7 @jessequinn From this issue https://github.com/nuxt/typescript/issues/380, it seems that you need to duplicate the properties in data():

export default Vue.extend({
  data() {
    return {
      doc: {}
    }
  }
})

It it doesn't solve you're issue, please create a new one with a reproduction link.

[jessequinn]

@jackdomleo7 have you tried this?

  data() {
    return {
      article: {
        description: '',
        title: '',
      },
    }
  },

Property 'article' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
    151 |           hid: 'og:description',
    152 |           name: 'og:description',
  > 153 |           content: this.article.description,
        |                         ^
    154 |         },
    155 |       ],
    156 |     }

The error still persists unless i am doing something wrong here.

[TorbjornHoltmon]

Any update on this? Having the same issue as jesse