Site image appears funny when posted in Facebook.

[kfogel]

Facebook chooses a surprising summary (thumbnail) image for https://getasmokealarm.org/ when someone posts about it -- in fact, an image that we don't actually have anywhere on the site. Example below is cropped to protect the privacy of the bug reporter, but it's the main block appearing on their Facebook page. I don't know what the technical Facebook term is for that block, but it's the topmost of the large block items appearing in the center column of the page, under the search bar, to the right of the "Favories | Pages | Groups | Friends" vertical pane, and to the left of the column of smaller blocks for "Your pages", "Recent posts", "Requests", "Invites".

[jim-mcgowan]

Available to meet on Wednesday around 10:00 AM?

On Sep 30, 2015, at 2:11 PM, Karl Fogel notifications@github.com wrote:

Facebook chooses a surprising summary (thumbnail) image for https://getasmokealarm.org/ https://getasmokealarm.org/ when someone posts about it -- in fact, an image that we don't actually have anywhere on the site. Example below is cropped to protect the privacy of the bug reporter, but it's the main block appearing on their Facebook page. I don't know what the technical Facebook term is for that block, but it's the topmost of the large block items appearing in the center column of the page, under the search bar, to the right of the "Favories | Pages | Groups | Friends" vertical pane, and to the left of the column of smaller blocks for "Your pages", "Recent posts", "Requests", "Invites".

https://cloud.githubusercontent.com/assets/401111/10203693/20b8885a-677d-11e5-92ba-2f2195d0bfd7.png — Reply to this email directly or view it on GitHub https://github.com/redcross/smoke-alarm-portal/issues/118.

[kfogel]

Yep, sounds great! Though please use email or phone for scheduling :-). We just got lucky that Cecilia happened to notice this in her GitHub issues stream and flag it! I would have seen it eventually, but because I filter GitHub issue activity notifications to a different place than emails, that might have been after Wednesday.

(I'll send you email separately to confirm.)

[kfogel]

Recent Data Friday presentation implied that @cathydeng knows trick(s) for controlling what image Facebook chooses to represent a site -- if the answer isn't obvious on the Intertubes, we should ask her what she did for http://chicagosmilliondollarblocks.com/ for example.

[cathydeng]

hi! the fb rich snippets are determined by the facebook open graph meta tags. relevant tags include:

<meta property=“og:site_name”>
<meta property=“og:title”>
<meta property=“og:type”>
<meta property=“og:description”>
<meta property=“og:url”>
<meta property=“og:image”>

to change the fb snippets, just edit the content attribute, e.g. <meta property=“og:description” content="Smoke alarms save lives. Installing a smoke alarm is the first step to keeping your family safe.">.

you can validate fb metadata for a given url here

hope that helps!

[cecilia-donnelly]

Thanks so much, @cathydeng! I'll report back here once we get it working.

[kfogel]

Hey, @cathydeng -- welcome back! How was your trip? (Er, okay to answer offline :-) .) Thanks for noticing this and responding; much appreciated.

[cecilia-donnelly]

Tested the changes from my working branch on the demo site. The debugger shows:

That's more like it!

[jim-mcgowan]

Yep, that's more like it!

[cecilia-donnelly]

Deployed and checked on Facebook:

[cecilia-donnelly]

@OhMcGoo please let me know if it also works for you/another tester! If not I will reopen this issue.

[cecilia-donnelly]

And of course many thanks to @cathydeng, who told us exactly how to fix this. :)

[jim-mcgowan]

We tested this in another Region and everything looks good! No one in Idaho will think they have to come to Chicago to get their free smoke alarm.