Replace default blank image in Jetpack's Open Graph tags with a WP logo

[kraftbj]

By default for the home/front page, since there is no reasonable data for Jetpack to determine a primary image to use as the og:image tag for Facebook, etc, it uses a blank image.

Since, at the least, a WP logo is always appropriate for a WordCamp home page, let's use a WP logo instead.

[kraftbj]

Image file for the wordcamp.org/wp-content/plugins/wordcamp-jetpack/img/ directory of the patch

[kraftbj]

Should note that any image would work; I opted for the basic logo. Per Facebook's spec, square is best and must by 200x200 or greater.

[iandunn]

Looks good to me. A few minor questions:

• What about posts that have no featured image? Should we use this there too?
• Should the image be something more like 400x400 or 500x500, for retina displays? I don't think we want to make it larger than 600x315, though, because then Facebook would switch to ​the large image format, which wouldn't be appropriate for a logo.

For reference, here are some examples of Facebook showing an empty image, a small image and a large image, respectively:

• ​https://www.facebook.com/wordcampatl/posts/10201658481932354
• ​https://www.facebook.com/WordCampChicago/posts/10152063814912245
• ​https://www.facebook.com/WordCampChicago/posts/10152063842342245

​xref irc log
related #415

[Otto42]

On the main WordPress news blog, we use ​https://wordpress.org/about/images/logo-blue/blue-xl.png as a default image.

It has been suggested that we use one at least 1200px wide, which I think is slightly insane, but there may be good reasons there.

Related: #415

[kraftbj]

What about posts that have no featured image? Should we use this there too?

Let me confirm the filter I'm thinking would work for that works all the way around (home page and post pages w/o other media). It would only be the fallback if there is literally nothing else that can be used (no featured image, no image within the post, no embedded visual media, etc). I'll revise the patch in the next day or so.

Should the image be something more like 400x400 or 500x500, for retina displays? I don't think we want to make it larger than 600x315, though, because then Facebook would switch to the large image format, which wouldn't be appropriate for a logo.

Jumping off of Otto's comment too, we could go straight to the 1200x630 spec if we can find a designer to put something together. The WP logo with a "WordCamp" wordmark or something like that. As far as the actual code is concerned, we don't need to specify an image size—just replace the image with what we'd like to use. I'll double-check the FB/Twitter/G+ guidelines to make sure we aren't hurting ourselves by going with a larger size.

[iandunn]

Replying to kraftbj:

we could go straight to the 1200x630 spec

I think the larger format is intended for featured images like:

I think it'd look weird to have a logo there. If we keep it under 600x315 then the logo will just be displayed on the side, like:

What do you all think?

[kraftbj]

I'm really game either way, if the image looks good for whichever display. We could default to something smaller 500x500 (Retina concerns) and include this info for individual WordCamps once we get to allowing them to set a per-subsite default.

If we're aiming for the Facebook "side" image, I would suggest keeping it square so we can reuse it as the default Twitter Card image ( ​https://dev.twitter.com/docs/cards/types/summary-card ).

I'll work that into the next patch in addition to the more general default usage.

Couple quick notes:

1. G+ will post a similar way to Facebook's side example for any homepage. For articles/posts, they have the option for a "full-bleed" image, but that is outside of the scope of this ticket.
2. Twitter Summary Cards needs to be approved per domain (e.g. central.wordcamp.org needs to be approved, as 2014.austin.wordcamp.org, as will 2015.austin.wordcamp.org, etc). Twitter has done wildcard-level domain whitelisting before. I can look into that too. If we seek this, tweets sharing a WordCamp.org link would look like this, plus the image (as the current blank is being used here):

[kraftbj]

Attaching a revised patch that does the following:

1. (Updated from first patch) Sets a default image replacement to be used in all cases where the previous "blank" default were to be used. If any other image could be used (e.g. featured image), that will be used instead.

2. (Updated from first patch) Sets the file name to img/wp-default-og.png so there isn't a code-based suggested image size. We can upload whatever we think is best (suggested: 400x400 square logo).

3. Adds the twitter:card = summary open graph tags to the home/front page so a WC home page will pass Twitter card validation.

4. If a WordCamp does not indicate their own Twitter handle via Settings->Sharing (when Publicize or Sharing modules are active), it will set it to "WordCamp" only for Twitter Cards.

Item 4 is important for the following:
This would allow any shared link on Twitter that triggers a Twitter Card to show "WordCamp Central" instead of "Jetpack" (see Twitter Card Tester example above).

In this case, if specifically does not add "@WordCamp" when using the Sharing module to post to Twitter, to prevent the managers of @WordCamp from having to sift through a ton of tweets that were shared via a WordCamp site semi-automatically.

If a WordCamp specifies a Twitter account via Settings->Sharing, it would be used for the Twitter Card and in a "via" line if a post is shared via the Twitter sharing button (the typical behavior for Jetpack).

[kraftbj]

Refresh of patch per https://meta.trac.wordpress.org/ticket/502#comment:7

[iandunn]

Committed to our mu-plugins in [1804-wordcamp]. I used ​https://s.w.org/about/images/logos/wordpress-logo-notext-rgb.png (500x500) as the default. Tests look good, but reopen if there are any problems.

Thanks Brandon:)