provide (stronger) per-page override for og:image

[pphaneuf]

• This is a question about using the theme.
• This is a feature request.
• I believe this to be a bug with the theme.
  • I have updated all gems with bundle update.
  • I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version: 8cc4e0b (latest)
• Jekyll version: latest (I believe)
• GitHub Pages hosted: yes
• Operating system: macOS

---

Expected behavior

With a splash page layout, it usually makes sense for the image or overlay_image to be of a fairly wide aspect ratio, similar to what would be used on a Facebook cover photo. But the og:image property, when used for sharing on Facebook, appears to cropped to something closer to a square aspect ratio?

So I'm thinking it might make sense to be able to easily override the og:image for splash pages, to provide a better image for the sharing preview. Maybe a page.og_image that would be the "first preference" for setting og:image in the seo.html file?

Steps to reproduce the behavior

Here's an example on a site I created recently.

Source: https://github.com/Pro10RacingUK/Pro10RacingUK.github.io/blob/master/index.html
Web page: https://pro10racing.co.uk/

Sharing in a post is not too bad (after I left a lot of white space above and below in the picture used with overlay_image, that is, if I made it tight, it didn't look right either):

When sharing as a comment, it gets cropped more square:

[pphaneuf]

Issues #937 and #943 seem to bring up sort of similar issues (so it does seem to be something other people also want?), although I would put using page.og_image as the very first thing in seo.html.

[mmistakes]

So that I understand the feature request correctly...

Let's say you have image-a.jpg used as the page's header image (overlay, splash, whatever). You want to be able to override that just for Facebook and use something like image-b.jpg so that the cropping is better when shared on FB?

Is that correct? If so that's pretty much what #943 requested. I'm not really interested in making changes to the SEO.html include as I plan on dropping it and falling back to jekyll-seo-tag instead.

Much of those other issues are related to not having a header image defined for the page... which is used for og:image. When that happens Facebook takes whatever image it feels like when it scrapes the page. There's all sorts of rules they follow which are also related to how it crops images.

[pphaneuf]

I'd say this is correct, although from my reading of #943, it wouldn't have been possible (putting the page.og_image after page.overlay_image)? But your description of it here seems to be what I want, yes.

I wasn't aware of that jekyll-seo-tag feature, I'll look into it, so that I'm ready for switching to it (at a quick glance, it does seem to have nice features!). Until then, I might make a local change to seo.html, then, thanks for letting me know your plans around this.

I've certainly experienced the behaviour of Facebook taking whatever image it thinks is appropriate when it scrapes the page, if no og:image is provided! It seems safer to explicitly tell it what image to use, leaving one free to use whatever image you want for the design of the page itself.

It is nice to be able to provide a sensible default, though, so the current behaviour (of Minimal Mistakes using the overlay_image) seems quite sensible to have.

Thanks for your help!

[mmistakes]

The Jekyll SEO Tag Plugin is pretty nice. The only reason I haven't switched over to it yet are due to some breaking changes. It isn't that big of a deal, but it would require changing some YAML Front Matter in your posts as it looks for page.image or page.image.path, and my theme is using something completely different.

I haven't looked at seo.html in some time, looks like there's opportunity to dry up the code. Specifically around page.image and this mess that's not DRY at all.

  {% if page.header.image %}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | absolute_url }}{% endif %}">
  {% else %}
    <meta name="twitter:card" content="summary">
    {% if page.header.teaser %}
      <meta name="twitter:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | absolute_url }}{% endif %}">
    {% elsif site.og_image %}
      <meta name="twitter:image" content="{{ site.og_image | absolute_url }}">
    {% endif %}
  {% endif %}

{% if page.header.image %}
  <meta property="og:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | absolute_url }}{% endif %}">
{% elsif page.header.overlay_image %}
  <meta property="og:image" content="{% if page.header.overlay_image contains "://" %}{{ page.header.overlay_image }}{% else %}{{ page.header.overlay_image | absolute_url }}{% endif %}">
{% elsif page.header.teaser %}
  <meta property="og:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | absolute_url }}{% endif %}">
{% elsif site.og_image %}
  <meta property="og:image" content="{% if site.og_image contains "://" %}{{ site.og_image }}{% else %}{{ site.og_image | absolute_url }}{% endif %}">
{% endif %}

I think I can do some smart things there, which could make the feature you're requesting trivial and easy to add.

[pphaneuf]

If I'd do it locally, I'd just change the {% if page.header.image %} of the second block into an elsif, and add a {% if page.og_image %} at the top of that block. Just the simplest thing that'll work... 😉

But I'll keep an eye on if you do anything here, too. 😃

[pphaneuf]

I'm not Jekyll expert, and even worse of a web designer, by the way! My strength is more in backend services. 😛

But I see what you mean with the DRY, you can do the image selection once, assign it to something, and then do the meta tags once, using that variable...

[mmistakes]

This feature has been added to /_includes/seo.html on the master branch.

How this works is if you set a header or overlay image for a page those are used by default for OG or Twitter Cards. You can override those by setting og_image like so:

header:
  image: /assets/images/your-page-image.jpg
  og_image: /assets/images/your-og-image.jpg

[pphaneuf]

Thanks!