Feature Request: More easily set og: and twitter: tags to defaults

[keithmancuso]

Right now if we want to use the same string or variable for the regular description, facebook description and the twitter description we have to do this.

         {
            'hid': "description",
            'property': 'description',
            'content': this.short_description
          },
          {
            'property': 'og:description',
            'content': this.short_description
          },
          {
            'property': 'twitter:description',
            'content': this.short_description
          }

Its the same for title, image any any other tags. Im sure there are times when you want different values for all three of these but would love to see some option to automatically set them all with the same thing?

Maybe theres already some way to do this that im not seeing?

[anowell]

I also wanted this. For now I've opted to just use some utility functions:

export const metaDescriptions = (str: string): object[] => {
  return [
    { vmid: 'description', name: 'description', content: str },
    { vmid: 'twitter:description', name: 'twitter:description', content: str },
    { vmid: 'og:description', property: 'og:description', content: str },
  ]
}
export const metaTitles = (str: string): object[] => {
  return [
    { vmid: 'twitter:title', name: 'twitter:title', content: str + ' - MySite' },
    { vmid: 'og:title', property: 'og:title', content: str + ' - MySite' },
  ]
}

and then set these in components using the array spread operator:

  metaInfo() {
    const title = 'Some title here'
    return {
      title,
      meta: [
        ...metaDescriptions(this.short_description),
        ...metaTitles(title),
      ],
    };
  }

But it still seems like something that could be supported more natively, especially to be able to use my title/titleTemplate attributes within <meta> tags.

[TheAlexLichter]

+1 for the opportunity to reuse titleTemplate. Would be ideal for og:title!

[arpi17]

I have a related request to this issue:

It would be nice to have something like contentTemplate available on the meta objects to mimic the title and titleTemplate behaviour. For example

In the parent component

class Parent extends Vue {
  metaInfo(): {
    return {
      title: 'Parent Title'
      meta: [
        {
          property: 'og:title',
          content: 'Parent Title',
          vmid: 'og:title',
        }
      ]
    };
  }

and in its child component

class Child extends Vue {
  metaInfo(): {
    return {
      titleTemplate: '%s - Child Title'
      meta: [
        {
          property: 'og:title',
          contentTemplate: '%s - Child Title',
          vmid: 'og:title',
        }
      ]
    };
  }

My issue with the current template function is that I cannot have something like

<meta property="og:title" content="Parent Title">

when only Parent is mounted but

<meta property="og:title" content="Parent Title - Child Title">

when Child is mounted inside of Parent

Is there any solution/workaround for this in the current version?