Image OG data not readable inside row layout

  • Resolved backpackingseries

    (@backpackingseries)


    5 years, 3 months ago

    Hello,

    I use Jetpack to provide image-related Open Graph data for Facebook, Twitter, etc. Typically, Jetpack picks up either

    1) the featured image,
    2) the first image on the page/post, or
    3) if no image is detected, then a specified default image.

    Now, there’s no featured image on my site’s pages. I’m using a 2-column Kadence row layout (with Advanced Header and an image block) as the page header. In this scenario, I expect Jetpack to detect the image inside the row layout. But it does not (and instead returns a default site image).

    I consulted Jetpack on this problem. They’ve verified things and advised me to seek guidance here.

    Is this a bug with Kadence blocks or am I missing a simple configuration?

    Kind regards,

Viewing 9 replies - 1 through 9 (of 9 total)
  • hannah

    (@hannahritner)

    Hey,
    Sorry for the delay. Do you mind posting a link to your site?
    Thanks!

    Hannah

    Thread Starter backpackingseries

    (@backpackingseries)

    Sure, it happens on all pages redesigned with Kadence. Here’s an example.

    https://www.unakriti.com/website-development-plans/

    PS: The blog posts work okay, since these have featured images.

    Kind regards,

    Hey,

    I consulted Jetpack on this problem. They’ve verified things and advised me to seek guidance here.

    Can you tell me exactly what they said? I’m at a loss for how our plugin would affect the detection of an image block. To me, this certainly sounds like a bug on their end since it shouldn’t be necessary for any block plugin to have to detect and tell jetpack that a core image block is nested in a page.

    I wonder if any of the jetpack team would be willing to respond here to clarify:

    @jeherve
    @kokkieh
    @supernovia

    Ben

    Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    I can’t find any previous thread about this here in the www.remarpro.com forums, so I may be asking questions you’ve already answered via email, maybe. Sorry if that’s the case.

    In any case, let’s try to clarify things a bit!

    I’m using a 2-column Kadence row layout (with Advanced Header and an image block) as the page header. In this scenario, I expect Jetpack to detect the image inside the row layout. But it does not (and instead returns a default site image).

    it happens on all pages redesigned with Kadence. Here’s an example.

    https://www.unakriti.com/website-development-plans/

    In this example, I see that your site’s Open Graph Meta tags include an image tag:

    <meta property="og:image" content="https://i0.wp.com/www.unakriti.com/wp-content/uploads/2019/08/FB-OG-Image-1200x1200-px-by-Unakriti.jpg" />

    Is there another post or page where you’re running into the issue? If so, could you link to it here?

    It would also be helpful if you could edit that page in the block editor, and choose the “code editor” option like so:
    https://cl.ly/248434a04231

    I would then be interested in seeing the markup for the image that Jetpack’s Open Graph Meta Tags can’t seem to pick up. Something like this:
    https://cl.ly/9f9a1da1b3e5

    @britner When one uses the 2-column Kadence row layout with an image block, is the block a core image block, or a custom block you’ve developed?

    Thank you!

    • This reply was modified 5 years, 3 months ago by Jeremy Herve.

    @jeherve

    When one uses the 2-column Kadence row layout with an image block, is the block a core image block, or a custom block you’ve developed?

    It’s the core image block. Nothing custom. You can see this on the page: https://www.unakriti.com/website-development-plans/

    As you pointed out the og:image is pulling https://i0.wp.com/www.unakriti.com/wp-content/uploads/2019/08/FB-OG-Image-1200×1200-px-by-Unakriti.jpg

    Which is not the first image on the page:
    https://i0.wp.com/www.unakriti.com/wp-content/uploads/2019/08/Icon-Services-Website-Design-and-Development-by-Unakriti.png

    Ben

    Thread Starter backpackingseries

    (@backpackingseries)

    Thank you @britner and @jeherve

    @britner
    I am able to get a proper image on Facebook and WhatsApp when using a core image block only (i.e. without nested blocks). However, when using a core image block inside a 2-column Kadence row layout block, the test fails (with Jetpack picking up a default site image). Looking at the results, Jetpack email support had suggested to make the Kadence team aware of this.

    What I am after is for Jetpack to pick up the image as shown here:
    https://adam-images.d.pr/1WVaYJ

    @jeherve, hope its okay to use this URL from the email I received from Jetpack support.

    Is there another post or page where you’re running into the issue? If so, could you link to it here?

    Yes, it is at – https://www.unakriti.com/holistic-wellbeing-workshops/ and here’s the markup for the image, as requested.

    <div class="wp-block-kadence-column inner-column-2 kadence-column_013805-25"><div class="kt-inside-inner-col"><!-- wp:image {"id":14167,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.unakriti.com/wp-content/uploads/2019/08/Icon-Service-Wellbeing-and-Mindfulness-Workshops-and-Training-by-Unakriti.png" alt="" class="wp-image-14167"/></figure></div>
<!-- /wp:image --></div></div>

    Hope this helps and appreciate your support.

    Kind regards,

    Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    Thank you both for the extra details. I looked into this and uncovered a bug with the way Jetpack looks for images inside content created with the block editor. It is not currently able to fetch images that are inside nested blocks, such as Kadence’s row layout block or WordPress’ column block.

    I took note of the issue here:
    https://github.com/Automattic/jetpack/issues/13338

    I’ll aim to get this fixed in a future Jetpack release. We’re already in the Beta period for Jetpack 7.7, but I’ll aim to get this fixed in Jetpack 7.8.

    Until then, I would recommend using WordPress’ Featured Image field whenever you really want a specific image to be used in Open Graph Meta Tags.

    Sorry for the trouble, and thanks again for helping me uncover this!

    Thanks for responding @jeherve
    Ben

    Thread Starter backpackingseries

    (@backpackingseries)

    Thanks @britner and @jeherve

    Appreciate your support.

    Kind regards,

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Image OG data not readable inside row layout’ is closed to new replies.