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:

plots2/app/views/layouts/application.html.erb

Lines 45 to 63 in 4f68d27

	<% if @node && @node.body %>
	<meta property="og:title" content="<%= @title %>" />
	<meta property="og:site_name" content="Public Lab" />
	<meta property="og:url" content="https://<%= request.host %>/n/<%= @node.id %>" />
	<meta property="og:description" content="<%= raw strip_tags(sanitize(RDiscount.new(@node.body).to_html)).truncate(100) %>" />
	<meta property="og:type" content="article" />
	<meta property="fb:app_id" content="644692375883090" />
	<% if @node.main_image %>
	<meta property="og:image" content="https://<%= request.host %><%= @node.main_image.path(:default) %>" />
	<meta name="twitter:image" content="https://<%= request.host %><%= @node.main_image.path(:default) %>">
	<% end %>
	<p class="facebook-summary" style="display:none;">
	<%= raw strip_tags(sanitize(RDiscount.new(@node.body).to_html)).truncate(100) %>
	</p>
	<% end %>
	<p class="facebook-summary" style="display:none;"><%= translation('layout._header.summary') %></p>
	<!-- facebook needs this apparently -->
	<div id="fb-root"></div>

The facebook summary line was changed here: #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: 3dad8ad

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.