Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. OG:image tag gets a smaller image created by the adptive images plugin

Topic-icon OG:image tag gets a smaller image created by the adptive images plugin

Active Subscriptions:

None
4 years 9 months ago - 4 years 9 months ago #65506 by fb_1580132693
Hello,
I use a plugin called XT adaptive images to generate smaller images depending on the user device (www.extly.com/utilities/xt-adaptive-images.html)
The problem is that the og:image tag generated by JFBConnect always gets the adaptive "mobile" image instead than the normal size image I set in the "full article image" option of the article, this resulting in Facebook displaying a small square thumbnail in any shared post instead than a full image (because the image size is too small I guess).

Here is an example of some tags which are being generated
<meta name="twitter:image" content="https://accademiainfinita.it/images/youtube/8237e60f35dfd9a887ffe56d9bf45bf8.jpg"/>
<meta property="og:image" content="https://accademiainfinita.it/images/adaptive/480/images/youtube/8237e60f35dfd9a887ffe56d9bf45bf8.jpg"/>
<meta property="og:image" content="https://accademiainfinita.it/images/fb-default-image-3.jpg"/>

you can see that the twitter:image tag gets the right full image path, while the og:image does not, it gets the smaller image path

page example to check the issue: accademiainfinita.it/video/1185-percezio...-come-fare-chiarezza

Here you can download the version I have for this plugin (4.0.2) if you want to run some tests: 1drv.ms/u/s!AsTklv288baFuRYaRAmHtaBjKigx?e=XPKePE

I am running on JFBConnect 8.2.2, my subscription expired I think but I'll be happy to renew if you fix this

Thank you


UPDATE 1
<div class="pull-none item-image"> <img srcset="https://accademiainfinita.it/images/adaptive/480/images/youtube/8237e60f35dfd9a887ffe56d9bf45bf8.jpg 480w, https://accademiainfinita.it/images/youtube/8237e60f35dfd9a887ffe56d9bf45bf8.jpg 1280w"  sizes="100vw" src="https://accademiainfinita.it/images/adaptive/480/images/youtube/8237e60f35dfd9a887ffe56d9bf45bf8.jpg" alt="" itemprop="image"/> </div>

this is the srcset generated by the adaptive images plugin, I guess JFBConnect should pick from there the largest image "1280w" instead of picking the image from the src tag


UPDATE 2
I have contacted the plugin developer about the same issue and here is their reply

In theory, JFBConnect reads the page to detect the "main image" and auto-fill the OG:image tag. It assumes that it can scan the image and find "the right image".

However, when you have a site with Adaptive Images and Platform Specific Caching, the selection of the main image is not so trivial. The main image is defined in the original content item, and the rendered images are dependent on the user device.

So, it looks like JFBConnect is picking the last rendered image of a visiting device, assuming that all rendered pages include the best possible image for the OG:image tag.

Since the issue is on JFBConnect side, it is better if you ask them how the issue can be solved. If Adaptive Images is rendering the image with the full srcset attribute, then several image resolutions are already included; and JFBConnect could also parse the image srcset attribute to gather all the available resources.
Last edit: 4 years 9 months ago by fb_1580132693.
The topic has been locked.
Support Specialist
4 years 9 months ago #65530 by alzander
Niccolò,
I'm very sorry for the delayed response. In looking at your above post and doing some research on the topic, I believe JFBConnect is working properly. Let me explain though and make sure we're on the same page.

First off, it's important to understand how Open Graph tags work. They describe the page in question, but are static values. They are not meant for the current viewer of the page or for browsers in general. They are not meant to change whether the page is being viewed in mobile or a desktop browser. They are meant for crawlers, like Facebook, to be able to scan a page and store a representation of what the page is about so they can generate a thumbnail, title and description.

Additionally, the tags themselves are not supposed to change over time. Facebook will generally cache the Open Graph tag values for 7+ days at a time.

The point is that the image tag should be a static value, meant for desktops. Facebook has guidelines on how big the images should be and it can cut them down depending on how the shared link is being viewed by the current user.

The srcset tag is a newer browser feature. Older browsers can't see the srcset tag and will only use the src tag. The src tag is also what JFBConnect is using because the src value is what should be set to the best representation value of this page, since it's what bots and older browsers would only see.

So, when you say:

The problem is that the og:image tag generated by JFBConnect always gets the adaptive "mobile" image i

That seems to indicate that the src value is always set to the mobile image size and not the larger size. I think that sounds like incorrect behavior and I would think that the Adaptive image plugin should be setting the src value, the default image for the page, to the largest size.

For reference though, the Open Graph tags are only used when Facebook scans the page and it has *nothing* to do with the current user. Please use the Facebook URL Debug tool to see which tag Facebook is actually seeing:
developers.facebook.com/tools/debug/

I hope that helps. If there is something we can do better on our end, we gladly will investigate further.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
4 years 9 months ago #65548 by fb_1580132693
Hello Alex,
thanks for explaining in such detail.

USER wrote: So, when you say:

The problem is that the og:image tag generated by JFBConnect always gets the adaptive "mobile" image i

That seems to indicate that the src value is always set to the mobile image size and not the larger size. I think that sounds like incorrect behavior and I would think that the Adaptive image plugin should be setting the src value, the default image for the page, to the largest size.


That is a good point and I'll have to investigate. I have forwarded your reply also to Adaptive Images plugin developer so they can help.

Another question come to mind though.

How comes the twitter:image tag always contains the right image? Here is an example from this page accademiainfinita.it/video/1186-spiritualita-e-denaro

<meta name="twitter:image" content="accademiainfinita.it/images/youtube/af7e...c54c322045cf8a.jpg"/>
<meta property="og:image" content="accademiainfinita.it/images/adaptive/480...c54c322045cf8a.jpg"/>

It seems like in order to get the twitter:image content you look directly in the database (the url of the image uploaded as full article image) and not in the src tag of the generated joomla article. Why not do the same for the og:image ?
The topic has been locked.
Support Specialist
4 years 9 months ago #65552 by alzander
That's a good question on why the Twitter:image tag is different. We use the same logic for both og:image and for twitter:image, so they should be equal. I'll have to investigate this further, but just to confirm, you haven't manually set the twitter image on the page using an Easy-Tag, like:
{SCOpenGraph twitter:image=https://.... }
I doubt you have, but I have to check as that's the only reason I can immediately think of for them to be different.

Keep me posted on the adaptive plugin developer's feedback. We'd like to get this resolved as best we can and if we're doing something wrong, we have no problem making updates on our end.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
4 years 9 months ago #65553 by fb_1580132693

USER wrote: I'll have to investigate this further, but just to confirm, you haven't manually set the twitter image on the page using an Easy-Tag

No, I haven't.
I just have put twitter:description in the "skip tags" textarea in "social meta > settings"

Thank you
The topic has been locked.
Active Subscriptions:

None
4 years 9 months ago #65554 by fb_1580132693
I confirm that I have now solved the issue, the problem was a setting I had tweaked in the XT Adaptive plugin.
Thanks!
The topic has been locked.
Support Specialist
4 years 9 months ago #65558 by alzander
Alright! So it all works as expected now? I know you said that, but just want to make sure everything is resolved.

I'm really glad to hear it and, of course, if you need anything else, let us know!

Thanks,
Alex
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. OG:image tag gets a smaller image created by the adptive images plugin
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS