New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
pphaneuf opened this Issue Oct 24, 2017 · 8 comments

Comments

Projects
None yet
2 participants
@pphaneuf

pphaneuf commented Oct 24, 2017

  • 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):

image

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

image

@pphaneuf

This comment has been minimized.

Show comment
Hide comment
@pphaneuf

pphaneuf Oct 24, 2017

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.

pphaneuf commented Oct 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Oct 24, 2017

Owner

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.

Owner

mmistakes commented Oct 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@pphaneuf

pphaneuf Oct 24, 2017

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!

pphaneuf commented Oct 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Oct 24, 2017

Owner

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.

Owner

mmistakes commented Oct 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@pphaneuf

pphaneuf Oct 24, 2017

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 commented Oct 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@pphaneuf

pphaneuf Oct 24, 2017

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...

pphaneuf commented Oct 24, 2017

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 added a commit that referenced this issue Oct 26, 2017

Refactor seo.html include and add `page.header.og_image` override
DRY up handling of page images (`page.header.image`, `page.header.overlay_image`, `page.header.teaser`, and `site.og_image`).

Allow page images to be set with `header.og_image` page variable in YAML Front Matter as per feature request in #1316.

@mmistakes mmistakes closed this in 869a0e5 Oct 26, 2017

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Oct 26, 2017

Owner

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
Owner

mmistakes commented Oct 26, 2017

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

This comment has been minimized.

Show comment
Hide comment
@pphaneuf

pphaneuf commented Oct 27, 2017

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment