open graph Meta Tags in Vue JS don't show image

Bernard-marie Onzo picture Bernard-marie Onzo · Dec 4, 2017 · Viewed 10.1k times · Source

I design a blog and I would like that when sharing to social networks, the preview image displays like in Medium's posts

<meta property="og:image" content="https://medium.com/js-dojo/getting-your-head-around-vue-js-scoped-slots-281bf82a1e4e"/>

I using vuejs2 with webpack and vue-meta to change the dynamic image of my post. But for Facebook, there don't working even when I put them in index.html.

I find this article on medium where it is said that it is necessary to use Server Side Rendered, but it is not said how to migrate from a totally designed project with a basic configuration (without SSR) to a project solving the problem. already the architecture is different and I have no reference

here is my code vue-meta

metaInfo () {
  return {
    title: '41devs | blog',
    titleTemplate: '%s - le titre',
    meta: [
      {name: 'viewport', content: 'user-scalable=no'},
      {property: 'og:title', content: 'title'},
      {property: 'og:type', content: 'article'},
      {property: 'og:url', content: 'http://c5e3b0ec.ngrok.io/blog/s'},// here it is just ngrok for my test
      {property: 'og:description', content: 'description'},
      {property: 'og:image', content: 'https://firebasestorage.googleapis.com/v0/b/dev-blog-2503f.appspot.com/o/postsStorage%2F-KxXdvvLqDHBcxdUfLgn%2Fonfleck?alt=media&token=24a9bf5b-dce2-46e8-b175-fb63f7501c98'},
      {property: 'twitter:image:src', content: 'https://firebasestorage.googleapis.com/v0/b/dev-blog-2503f.appspot.com/o/postsStorage%2F-KxXdvvLqDHBcxdUfLgn%2Fonfleck?alt=media&token=24a9bf5b-dce2-46e8-b175-fb63f7501c98'},
      {property: 'og:image:width', content: '1000'},
      {property: 'og:site_name', content: '41devs | blog'}
    ]
  }
}

Answer

Jeff picture Jeff · Dec 4, 2017

When Facebook checks your page to find the meta data, they don't run your Javascript. Vue never runs, your tags are never replaced. This is a limitation of Facebook's crawler.

This means you would indeed have to render those tags at the server level, whether by Vue's server side rendering or by some other method (I don't know what type of server you are running). But yes, ultimately, you must be able to hard-code this value into your server response, otherwise it won't display in Facebook.