Cant display rich social media post with og tags

Question

I am having trouble with the og meta tags for social media sharing.

I have links for social media sharing in my app :

 = link_to "http://www.facebook.com/share.php?u=#{request.base_url}#{request.env['PATH_INFO']}" do
    #i{class: "fa fa-facebook-square social-icon", "aria-hidden"=>"true"}
  = link_to "http://www.linkedin.com/shareArticle?mini=true&url=#{request.base_url}#{request.env['PATH_INFO']}&source=#{request.base_url}" do
    #i{class: "fa fa-linkedin-square social-icon", "aria-hidden"=>"true"}
  = link_to "http://twitter.com/intent/tweet?status=#{request.base_url}#{request.env['PATH_INFO']}" do
    #i{class: "fa fa-twitter-square social-icon", "aria-hidden"=>"true"}

each link get the absolute url of the current page and insert it in the sharing url of each specific social media.

I have a notification page with twitter, facebook and linkedn sharing buttons. I have included the following og tags :

- content_for(:page_meta) do
  %meta{ property: 'og:title', content: "J’ai voté pour mon lauréat Stars et Metiers" }
  %meta{ property: 'og:url', content: laureates_url }
  %meta{ property: 'og:description', content: "J’ai voté pour mon lauréat coup de ❤ Stars & Métiers 2016 ! Et vous, quel est votre coup de cœur ? avec lien minimisé vers la page lauréat du site" }

og: url is not the current page url because I dont want the social media post to redirect to the page where the social media buttons where but to a different one (laureates_url)

However I keep getting an error message from each social media that " the page is not found"

What am I doing wrong here ?

UPDATE

after using the facebook debugger with my url :

https://developers.facebook.com/tools/debug/og/object/?q=https%3A%2F%2Fstaging-starsetmetiers.herokuapp.com%2Fprix-coup-de-coeur-du-public%2F17701%2Fnotification

It seems that facebook is able to crawl my url. It even shows me a preview of the potential post. Two problems are still unresolved :

1) When I click on the facebook sharing link on my website I dont get the preview as in the facebook debugger. I still get a page not found error :

2) the debugger tells me

The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.

And it is true that in the preview the debugger shows me, it uses the description from the classic meta name= "description". However there is an og:description present in my page that is the description I want to show in my posts and it is present on the page :

<meta content="J’ai voté pour mon lauréat coup de ❤ Stars &amp; Métiers 2016 ! Et vous, quel est votre coup de cœur ? avec lien minimisé vers la page lauréat du site" property="og:description">

How can I fix these problems ?

Answer 1

Thanks for sharing the output of your page in the Facebook debugger as I suggested in my comment. For your two questions,

1. It looks like there is a stray closing parenthesis in your Facebook share link. If you remove it, the page should be found normally.

2. It does look like your meta tags are properly labelled with the Open Graph properties (og:url, etc), so I don't understand why the crawler isn't picking it up. The only thing I can think of is that the order of the property and content attributes in the meta tag is in the reverse order of the example shown on the Facebook site, but I doubt that matters...