Home open graph Meta Tags in Vue JS don't show image
Reply: 1

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

Bernard-marie Onzo
1#
Bernard-marie Onzo Published in 2017-12-04 18:28:24Z

I design a blog and I would like that when sharing to social networks, the preview image be display 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 whith webpack and vue-meta to change dynamic image of my post. But for facbook 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'}
    ]
  }
}
Jeff
2#
Jeff Reply to 2017-12-04 19:51:26Z

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.301617 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO