og:image token fails in a nested Paragraphs > Media structure

Created on 29 August 2025, about 1 month ago

og:image token with JPEG image_style fails on a source WebP image in a nested Paragraphs > Media structure

Problem/Motivation

When setting an og:image meta tag, we are trying to source the image from a deeply nested entity structure: Node > Paragraph Field > Paragraph Entity > Media Reference Field > Media Entity > Image Field.
The original source image is uploaded in WebP format. To ensure compatibility with all social media platforms (like LinkedIn), we are using an image_style processor to convert the WebP image to a JPEG.
While a token for the original WebP image URL works, adding the JPEG-conversion :image_style processor to the token causes it to fail completely. This results in no og:image tag being rendered in the HTML at all.
We have confirmed through direct URL access that the image style itself works correctly: visiting the styled URL successfully generates and displays a JPEG from the WebP source. The issue seems to be with the Metatag module's ability to process a token that is both deeply nested and invokes an image style that performs a format conversion.

Steps to reproduce

1. Create the Entity Structure:
o Create a Media Type (e.g., "Social Image", machine name: social_image) with an Image field (field_media_image).
o Create a Paragraph Type (e.g., "SEO Meta", machine name: seo_meta) with a Media reference field (field_social_media_image) that targets the "Social Image" media type.
o Create a Content Type (e.g., "Basic Page") with a Paragraph field (field_seo_paragraph) configured to accept the "SEO Meta" paragraph.
2. Create an Image Style:
o Create a new image style (e.g., "Social Share JPEG", machine name: social_share_jpeg) that includes a "Convert to JPEG" effect.
3. Configure Metatag:
o Edit the Metatag defaults for the "Basic Page" content type.
o Set the og:image field to use the following token: [node:field_seo_paragraph:entity:field_social_media_image:entity:field_media_image:entity:image_style:social_share_jpeg]
4. Create Content:
o Create a new "Basic Page" node.
o Add an "SEO Meta" paragraph to the field_seo_paragraph.
o In the paragraph, upload a WebP image and add it as a published media item to the field_social_media_image field.
o Ensure the node, the paragraph, and the media item are all published.
5. Observe the Result:
o View the HTML source of the newly created page as an anonymous user.

Expected Result

The page's HTML should contain a valid og:image meta tag pointing to the URL of the styled JPEG image, which was successfully converted from the WebP source. Example:

Actual Result

No og:image meta tag is rendered in the page's HTML. The token appears to fail and returns an empty value.
Additional Information
• We have confirmed that a simpler token ending in :url (without the image style) does work and outputs the URL of the original WebP image.
• We have confirmed that directly visiting the URL for the styled image correctly triggers the conversion and displays the final JPEG in the browser.
• We have confirmed that the "Anonymous" user role has permission to view published Paragraphs and Media.
• This issue points to a potential problem in how the token system passes the entity context through multiple levels of nesting when an image style processor is invoked, specifically when that processor involves a format conversion (WebP to JPEG).

Proposed resolution

Turns out that it is not the nested structure, but the way the image style is referenced

Example that does not work:

... field_media_image_1:entity:image_style:social_share_jpeg]

Example that does work (as in the parent case):

... field_media_image_1:social_share_jpeg:url]

Remaining tasks

Follow the parent cases explanation and add it asap to the gui.

User interface changes

See parent case.

API changes

Data model changes

🐛 Bug report
Status

Active

Version

2.1

Component

Miscellaneous

Created by

🇦🇹Austria maxilein

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @maxilein
  • 🇦🇹Austria maxilein

    I am not sure if this is correct but if it is, then token system has evolved and meta tag isn't using it:

    1. The "Shortcut" Syntax (:social_share_jpeg:url)
    This syntax is a holdover from the older, simpler token system. It was designed as a convenient shortcut for the most common use case: getting a URL for a styled image. It's a special-case syntax that is hardcoded to look for an image style and then a URL.

    2. The "Explicit" Syntax (:entity:image_style:social_share_jpeg)
    This syntax is a direct reflection of the modern, more powerful Entity API introduced in Drupal 8. In this system, everything is an "entity," and you can chain methods together to get data. The token system mirrors this.

    ...:field_media_image_1 gets you the field.

    ...:entity gets you the File entity that the field points to.

    ...:image_style:social_share_jpeg accesses the "image_style" property of that File entity and passes the "social_share_jpeg" argument.

  • 🇦🇹Austria maxilein

    Although I found a solution in the parent case I leave this case in order for someone to evaluate if there is something to be done about it.

  • 🇺🇸United States damienmckenna NH, USA

    Thank you for reporting the issue. It does seem like this is more of a documentation issue instead of a bug, because Metatag has nothing to do with how individual entity tokens work.

  • 🇩🇪Germany Anybody Porta Westfalica

    Also see #6 and #8 in 💬 Can't find the right token (URL) for og:image in Drupal 10 Active . I think the very special behaviour leads to unexpected results for people used to tokens. Especially as the same token behaves differently everywhere else.

    Maybe a better solution would be to provide more powerful tokens so that the special behaviour can be removed here?

Production build 0.71.5 2024