HowTo: Use images in Metatag

Last updated on

31 January 2023

The following outlines how to use an image field on a content type for populating image meta tag information.

Content image field

On each of the content types that require a content image add a field to provide an image for that content.

Create a Reference Media field Content image on the content type, configured for Media type > Image and select a default image.

The machine name for the content image field in this example is field_content_image

Image style for field (optional)

Create a separate image style for the Content image and use the open graph guidance for sizing Images in Link Shares

For creating an image style read Setting Up an Image Style

Metatag content configuration

Update the Metatag settings for content (/admin/config/search/metatag/node).

Populate the Advanced > Image field with the appropriate token for the image.

Reference media entity with original image token

[node:field_content_image:entity:field_media_image:entity:url]

Reference media entity with image style: "content_image"

[node:field_content_image:entity:field_media_image:content_image:url]

field_content_image is the machine name for the field on the content type.

content_image is the image style and can be changed for any image style defined on the site.

Example Metatag content configuration

The example includes the use of Open Graph tags.

Updated content page meta tags

Add/edit a content item where the Content image is required then visit the page to check the HTML meta tags.

Example HTML head

<head>
<meta charset="utf-8" />
<link rel="canonical" href="http://local.site/article/one-article" />
<link rel="image_src" href="http://local.site/sites/default/files/styles/content_image/public/2021-04/drupal-ams.png?itok=5KpR2_6C" />
<meta property="og:determiner" content="An" />
<meta property="og:site_name" content="Local site" />
<meta property="og:type" content="Article" />
<meta property="og:url" content="http://local.site/article/one-article" />
<meta property="og:title" content="One article" />
<meta property="og:image" content="http://local.site/sites/default/files/styles/content_image/public/2021-04/drupal-ams.png?itok=5KpR2_6C" />
<meta property="og:locale" content="en_GB" />
...
</head>