How to Set Social Share Images in Drupal

To choose the image shown when a Drupal page is shared, set its Open Graph og:image metadata in the document head. A common Drupal setup uses the contributed Metatag module: store an image on content, map that field to Metatag with a token, and optionally use an image style to make a share-sized derivative. You can configure a fallback for a content type and override it on individual pages.

1. Choose an image source and fallback

Decide how your site should choose the image:

• Global default: a fallback image for pages without a more specific share image.
• Content-type image field: an editor selects an image for each article or other content item.
• Individual override: set a different image on a particular page when its content field is not the right choice.

Metatag supports global defaults, defaults by entity and bundle (such as a content type), and entity-level overrides. A useful pattern is a site-wide fallback plus an image field for relevant content types. Confirm how your site’s Metatag configuration resolves defaults and overrides before relying on it.

2. Add or identify the Drupal image field

1. In the Drupal administration UI, edit the fields for the content type that should have share images.
2. Add a Media reference field configured to reference image media, or identify an existing field that editors use for this purpose.
3. Set a default image if pages without an editor-selected image need a fallback. You can also configure the fallback in Metatag defaults.
4. Record the field’s machine name and the image media type’s image field machine name. These names vary by site.

For example, the Drupal.org Metatag guide uses field_content_image as the Media reference field and field_media_image as the image field on the referenced media item. These are examples; substitute the machine names from your installation.

3. Configure Metatag’s Open Graph image

Install and enable Metatag and its Open Graph support using your site’s normal Drupal deployment process. Check the current Metatag project page for release compatibility with your Drupal version; module requirements can change.

1. Open the Metatag settings for the relevant content type or entity bundle.
2. Find the Open Graph image setting, commonly under the Advanced group as Image.
3. Set its value to a token that resolves to the image URL in the content’s Media field.
4. Save the defaults, then edit a representative content item and set its image or per-item metadata override as appropriate.

For the example field names above, the original image URL token is:

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

Metatag’s image guide also shows a token that applies a named image style:

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

Here content_image is the image style’s machine name. Replace it with the actual style name. The token syntax depends on the field structure and token support available in your Drupal and Metatag setup; use the token browser or inspect the rendered output if a token does not resolve.

4. Choose original image or image-style derivative

An original upload preserves the source image’s dimensions and composition. An image style can generate a purpose-sized derivative with a controlled crop and dimensions, which can reduce transfer size and make the share preview more predictable. Choose the crop so important subjects and text remain visible at the destination platform’s display ratio.

Make sure the resulting derivative URL is publicly fetchable by social crawlers. A correct-looking tag cannot help if the image URL requires a logged-in session, is blocked by access rules, or returns an error.

Choice	Useful when	Check
Original upload	The uploaded asset is already sized and cropped for sharing.	Dimensions, file size, format, and public access.
Image-style derivative	You want a consistent crop and dimensions across content.	Style machine name, generated URL, crop, and public access.

Image dimensions are platform-specific. For LinkedIn’s sharing module, LinkedIn documents a maximum file size of 5 MB, a minimum of 1200 × 627 pixels, and a recommended 1.91:1 ratio. LinkedIn also says images narrower than 401 pixels display as thumbnails. Do not treat those values as universal requirements for every social service. See LinkedIn’s sharing guidance.

5. Verify the rendered metadata and preview

1. Save or publish a representative page with its intended image.
2. Open the public page while logged out and inspect its HTML source or browser developer tools.
3. Find og:image in the document head. Confirm its content value is an absolute URL pointing to the expected image.
4. Check related values such as og:title and og:url so the preview represents the correct page.
5. Open the page in the target service’s sharing preview or share flow and check the result there. Services can cache previews, so a changed Drupal value may not appear immediately in an existing preview.

The Open Graph Protocol defines og:title, og:type, og:image, and og:url as its four basic properties. It also defines optional image properties such as og:image:type, og:image:width, og:image:height, and og:image:alt. When a page specifies og:image, the protocol says it should also specify og:image:alt. Read the Open Graph Protocol documentation.

<meta property="og:title" content="Example article">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/articles/example">
<meta property="og:image" content="https://example.com/sites/default/files/styles/content_image/public/2026-01/share.jpg">
<meta property="og:image:alt" content="A descriptive summary of the image">

These tags illustrate the output shape; Drupal generates the actual values from your configuration. Drupal.org’s Metatag image guide also recommends checking the tags on the content page.

6. Troubleshoot missing or incorrect share images

Symptom	Likely cause	What to check or fix
No og:image in the page head	Open Graph metadata is not enabled or the relevant default/override is unset.	Check Metatag’s bundle and entity settings, save the configuration, and inspect the rendered page again.
The tag is present but empty or contains an unresolved token	The token uses the wrong field machine name or does not match the field’s entity structure.	Verify both the Media reference field and image field machine names. Use the token browser and compare with the actual field structure.
The fallback appears instead of the selected image	The content item has no image, its value is not available to the token, or a higher-level default is taking precedence.	Confirm the item has an image, then check the Metatag defaults and per-entity override behavior for that bundle.
The page source points to the wrong crop or size	The token uses the original image or an unintended image style.	Check the image-style machine name in the token and review the style’s crop and dimensions.
The image URL works for editors but not crawlers	The file or derivative is protected, blocked, or not publicly reachable.	Request the image URL without a logged-in session and check access rules, robots or firewall restrictions, and the HTTP response.
The tag is correct but the share preview is stale	The social service may be showing a cached preview.	Use the target service’s available preview or refresh mechanism and verify again after the service fetches the page.
LinkedIn shows a thumbnail or omits the image	The image may be too narrow, exceed its documented file limit, fail the recommended dimensions, or be inaccessible to LinkedIn.	Check LinkedIn’s current requirements, use a publicly accessible image at least 1200 × 627 pixels and no more than 5 MB for its sharing module, then refresh the preview.

7. Reliability and performance considerations

• Use a stable image URL. If you replace an image while retaining the same URL, a sharing service may continue to show a cached copy. A new file URL can help distinguish a changed asset, but also update the Drupal metadata and verify the result.
• Keep derivatives available. Image styles may generate files on demand. Confirm the derivative can be generated and fetched by an anonymous visitor before relying on it in previews.
• Use a fallback deliberately. A default avoids missing images, while a content-specific field gives editors control. Review whether a generic fallback is appropriate for every page type.
• Balance dimensions and transfer size. A larger source may preserve detail but take longer to fetch. An image style can produce a more suitable derivative; follow each destination’s published constraints.
• Check after configuration changes. Updates to Metatag defaults, token values, image styles, or access settings can change the final URL. Inspect a published page after changes.

Or skip the browser setup

If you need a screenshot of a Drupal page for documentation or review, ScreenshotNeo can capture the rendered page. It does not configure Open Graph metadata or replace the social platform’s preview crawler; it gives you an image or PDF capture of the page. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/articles/example -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/articles/example"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/articles/example' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for free and get 1,000 screenshots a month with no card.

Frequently asked questions

How do I set the Open Graph image in Drupal?

Configure the Open Graph Image value in Metatag to use a token for a content image field, then verify the rendered og:image URL in the page head.

Can I set a default image and override it on one page?

Yes. Metatag supports defaults at global and entity/bundle levels as well as entity-level overrides. Configure the fallback at the appropriate scope and check the individual content item’s metadata settings.

Does setting og:image guarantee the share preview uses it?

No. The image must also be reachable by the service fetching the page, and the preview may be cached or subject to that service’s requirements.

Should I use an image style?

Use one when you need consistent crop and dimensions or a purpose-sized derivative. Keep the style’s machine name correct in the token and ensure its output is accessible.

Sources

• Metatag project page
• Metatag: use images in metadata
• Open Graph Protocol documentation
• LinkedIn sharing guidance
• Drupal CMS: content modeling for social media and SEO
• Metatag features