Doesn't render some open graph properties

[claide]

I placed all the meta options inside my main App.vue file like below.

<template>
  <div id="app">
    <div class="container is-narrow">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  head: {
    title: {
      inner: 'Hello I'm inner'
    },
    meta: [
      {
        name: 'application-name',
        content: 'Francis Claide Magallen'
      },
      {
        name: 'description',
        content: 'Howdy! I'm a description',
        id: 'desc'
      },
      { name: 'theme-color', content: '#3F51B5' },
      { name: 'robots', content: 'index,follow' },
      { name: 'googlebot', content: 'index,follow' },
      { property: 'og:url', content: 'http://francismagallen.com' },
      { property: 'og:type', content: 'website' },
      { property: 'og:title', content: 'Francis Claide Magallen' },
      { property: 'og:description', content: 'some description here' },
      { p: 'og:image', c: '~/assets/img/dp.png' },
      { name: 'twitter:card', content: 'summary' },
      { name: 'twitter:site', content: '@someThing' },
      { name: 'twitter:title', content: 'Francis Claide Magallen' },
      { name: 'twitter:url', content: 'http://francismagallen.com' },
      { name: 'twitter:description', content: 'some description' },
      { name: 'twitter:image', content: '~/assets/img/dp.png' }
    ]
  }
}
</script>

<style lang="scss">
@import 'assets/scss/style.scss';
@import 'assets/css/fonticon.css';
</style>

[nadium]

I have the same issue, Facebook doesn't recognize the generated og:tags :/

[ktquez]

@nadium Social networks only retrieve this information when the page is rendered on the server (SSR) or when you are using prerender.

Check out this article to learn more about SSR and when to use it. https://codeburst.io/when-to-use-server-side-rendering-ssr-in-vue-js-projects-697bd925d57b