fbpx

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

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

Hello,
I use  a plugin called XT adaptive images to generate smaller images depending on the user device (https://www.extly.com/utilities/xt-adap … ages.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

Code:

<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: https://accademiainfinita.it/video/1185 … -chiarezza

Here you can download the version I have for this plugin (4.0.2) if you want to run some tests: https://1drv.ms/u/s!AsTklv288baFuRYaRAm … x?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

Code:

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

Edited by: fb_1580132693 - Jul-04-19 10:57:09
fb_1580132693
Niccolò
useravatar
Offline
72 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: OG:image tag gets a smaller image created by the adptive images plugin

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:
https://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

If you use our extensions, please consider leaving a rating and review at the Joomla! Extension Directory:
JFBConnect | SCLogin

alzander
Alex
useravatar
Offline
24428 Posts
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: OG:image tag gets a smaller image created by the adptive images plugin

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 https://accademiainfinita.it/video/1186 … a-e-denaro

<meta name="twitter:image" content="https://accademiainfinita.it/images/youtube/af7ed6fd97d6368602c54c322045cf8a.jpg"/>
<meta property="og:image" content="https://accademiainfinita.it/images/adaptive/480/images/youtube/af7ed6fd97d6368602c54c322045cf8a.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 ?

fb_1580132693
Niccolò
useravatar
Offline
72 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: OG:image tag gets a smaller image created by the adptive images plugin

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:

Code:

{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

If you use our extensions, please consider leaving a rating and review at the Joomla! Extension Directory:
JFBConnect | SCLogin

alzander
Alex
useravatar
Offline
24428 Posts
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: OG:image tag gets a smaller image created by the adptive images plugin

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

fb_1580132693
Niccolò
useravatar
Offline
72 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: OG:image tag gets a smaller image created by the adptive images plugin

I confirm that I have now solved the issue, the problem was a setting I had tweaked in the XT Adaptive plugin.
Thanks!

fb_1580132693
Niccolò
useravatar
Offline
72 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: OG:image tag gets a smaller image created by the adptive images plugin

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

If you use our extensions, please consider leaving a rating and review at the Joomla! Extension Directory:
JFBConnect | SCLogin

alzander
Alex
useravatar
Offline
24428 Posts
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.
There are 0 guests also viewing this topic
There are 0 users also viewing this topic

Board Info

Board Stats
 
Total Topics:
11859
Total Polls:
0
Total Posts:
49712
Posts this week:
6
User Info
 
Total Users:
48457
Newest User:
DavidZX
Members Online:
1
Guests Online:
1155

Online: 
JurrienPhilips
Social Stream
Hide, Seek & Defuse

Handheld Electronic Game

Alex from SourceCoast is working on a new electronic game for kids called Countdown. It's a timed game of Hide & Seek with mini-games (Whack-a-Mole, Simon, etc) to complete when you find it.

Hide and Seek Toys

Before You Leave

Let us send you a 10% off coupon

For Your Next Purchase

Please enable the javascript to submit this form

No , I don't want a discount