Problem/Motivation

When providing an og:image, you should explicitly provide an image style. This is not clear from the description below the og:image field, and it's currently not possible to provide an image style for a media field using the token browser.

Steps to reproduce

Enable the Open Graph submodule and go to /admin/config/search/metatag/node. Locate the field by searching (CTRL+F) for "The URL of an image which".

Proposed resolution

Change

The URL of an image which should represent the content. The image must be at least 200 x 200 pixels in size; 600 x 316 pixels is a recommended minimum size, and for best results use an image least 1200 x 630 pixels in size. Supports PNG, JPEG and GIF formats. Should not be used if og:image:url is used. Note: if multiple images are added many services (e.g. Facebook) will default to the largest image, not specifically the first one. Multiple values may be used, separated by `,`. Note: Tokens that return multiple values will be handled automatically. This will be able to extract the URL from an image field if the field is configured properly.

to

The URL of an image. You can paste in any image url you like or use tokens like [node:field_media:entity:field_media_image:wide:url] and/or [node:field_image:0:wide]. With both media fields and image fields, you need to provide an @image_style machine name (i.e. wide).
Multiple values may be used, separated by commas. Many services will default to the largest image, not the first one listed.
For best results, use an image least 1200 x 630 pixels in size. @Format: JPG, PNG, WEBP, GIF.
Tokens that return multiple values will be handled automatically.
You cannot rely on the token browser to suggest all useful tokens.
Should not be used if og:image:url is used.

@image_style is at /admin/config/media/image-styles
@Format is https://joost.blog/use-avif-webp-share-images/

It is a small increase in number of words (from 117 to 121), but a huge increase in usability.

Remaining tasks

Rewrite the text.

You could also try to make the token browser behave better around media fields, but that's a way more complicated and time-consuming task - and rather less useful IRL, to be honest.

CommentFileSizeAuthor
#5 updated.png36.52 KBchhavi.sharma
#5 before.png28.14 KBchhavi.sharma

Issue fork metatag-3515237

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

steven snedker created an issue. See original summary.

steven snedker’s picture

Issue summary: View changes
chhavi.sharma’s picture

Assigned: Unassigned » chhavi.sharma

chhavi.sharma’s picture

Assigned: chhavi.sharma » Unassigned
Status: Active » Needs review
StatusFileSize
new28.14 KB
new36.52 KB

Modified description for og:image field as per the suggestions. This needs to be reviewed.

Before:
before

Updated description:
updated