OpenGraph tags not recognized on initial share by Facebook for wiki pages

[jywarren]

Here is where we set our OpenGraph tags for sharing pages on social media; this sets the preview image, title, etc:

https://github.com/publiclab/plots2/blob/4f68d273c9cf1526ddd65ec059e81401d08bf73a/app/views/layouts/application.html.erb#L45-L63

The facebook summary line was changed here: https://github.com/publiclab/plots2/issues/6734 so we may need to revert that but it's worth looking at "view source" for a page to see what it inserts.

Here is where we last edited these, i think: https://github.com/publiclab/plots2/commit/3dad8ad6afe62eb4aec5c89ccf94d4d0c09aac26

cc @joyofsoy

[jywarren]

Discussion from Slack via @ebarry @joyofsoy

When posting a PL link on Facebook, photos often don’t show up in the link preview

Joe 7 days ago

I use the Facebook debugger to rescrape the link for the photo, but perhaps there is a better way to fix things on our end so this does not happen

Joe 7 days ago

This is the debugger that I use to do that: https://developers.facebook.com/tools/debug/

Joe 7 days ago

This shows the errors that Facebook sees on a PL link I just tested: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fpubliclab.org%2Fnotes%2FShannon%2F04-14-2020%2Fa-note-on-my-departure

Joe 7 days ago

It says that the problem is: Circular Redirect We could not resolve the canonical URL because the redirect path contained a cycle.

Joe 7 days ago

And this is more info about that canonical URL https://developers.facebook.com/docs/sharing/webmasters/getting-started/versioned-link#canonical-url

Joe 7 days ago

I don’t know if that is what causes the image to not display or if this is an unrelated error

lizbarry 1 day ago

This is happening on Twitter, example: when tweeting our home page publiclab.org our lead image does not display

Joe 1 day ago

Debugger for Twitter is here: https://cards-dev.twitter.com/validator (edited)

[jywarren]

Since this apparently also affects Twitter now, the facebook summary item seems unlikely to be the problem, unless the translation string has completely messed up all the OG meta tags.

So, we should check that but also whether there has been an OpenGraph policy change since Oct 2019 when we last fixed this.

[jywarren]

Facebook summary looks fine, btw:

<p class="facebook-summary" style="display:none;">
Tips for Building a Mini-Kite
Keep it light! Try to use the lightest materials available and to...
</p>

[jywarren]

Currently our OG tags are:

<meta property="og:title" content="Building Miniature Kites" />
<meta property="og:site_name" content="Public Lab" />
<meta property="og:url" content="https://publiclab.org/n/23411" />
<meta property="og:description" content="Tips for Building a Mini-Kite
Keep it light! Try to use the lightest materials available and to..." />
<meta property="og:type" content="article" />
<meta property="fb:app_id" content="644692375883090" />
<meta property="og:image" content="https://publiclab.org/system/images/photos/000/039/134/medium/IMG_2422.jpeg" />
<meta name="twitter:image" content="https://publiclab.org/system/images/photos/000/039/134/medium/IMG_2422.jpeg">

[jywarren]

Hmm, @joyofsoy this doesn't show any errors I can see:

https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fpubliclab.org%2Fnotes%2FShannon%2F04-14-2020%2Fa-note-on-my-departure

[jywarren]

@joyofsoy says:

the content has to be /new/ i.e. never shared before on Facebook

so, I think we should look in https://publiclab.org/wiki/ for content that's never been shared. If you don't see errors, try a different wiki page below! Joe will also share a screenshot of the errors he sees for comparison.

[jywarren]

Updating/confirming that the very first time a wiki link is shared, we don't see the image preview. Apparently we see it only the SECOND time it's shared:

Strangely, the Facebook debugger confirms it sees the image URL: https://publiclab.org/sites/default/files/imagecache/default/san-martin-spectro.jpg

[jywarren]

This seems to be documented behavior by other FB users:

https://stackoverflow.com/questions/27913369/facebook-open-graph-no-image-first-time

The solution seems to be to set the type (optional), width, and height:

Found the problem. Somehow this problem happens if you don't set your open graph tags properly.

Incorrect:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />

Correct:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:secure_url" content="https://asdfg.com/<%= videoId %>/image" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />

If it still doesnt work, there may be a further Facebook bug: https://stackoverflow.com/questions/41831761/facebook-open-graph-image-is-not-displayed-on-the-first-share-even-though-width

[jywarren]

OK, so we would need to do this:

        <meta property="og:image" content="https://<%= request.host %><%= @node.main_image.path(:default) %>" />
+        <meta property="og:image:width" content="500" /> 
+        <meta property="og:image:height" content="375" />

However, we don't actually know the dimensions of the images on the server side - we never decided to save them, and depending on aspect ratio, they could vary quite a bit. Gah! So, we don't have a good way to do this!

I recommend trying to share a post in some more private group first, to get the image to generate, then reposting it where you want it, if this is very important!

Alternatively, we could begin tracking dimensions with the https://github.com/teeparham/paperclip-meta gem, and we would need to run a gigantic batch process to download ALL images, calculate their dimensions, and save them. Note that we would save the dimensions for the medium size, only, as this is what we'd be sharing with FB. Note, image resize calculations docs are here: https://github.com/thoughtbot/paperclip/wiki/Thumbnail-Generation#resizing-options