To control the image shown when a Drupal page is shared, set its Open Graph og:image metadata in the document head. With the contributed Metatag module, a common setup is to add an image field to the relevant content type, use a token for that field as the image metadata value, and optionally apply an image style. Then inspect the rendered page source and test the preview on the service where you plan to share it.
How Drupal social share images work
Social platforms usually read page metadata rather than guessing which image on the page should represent it. The Open Graph Protocol identifies og:title, og:type, og:image and og:url as its basic properties. The og:image value is the URL of the image to use. The protocol also supports optional image properties such as MIME type, dimensions and alt text; when a page specifies an image, it says to specify og:image:alt as well. See the Open Graph Protocol documentation.
As an Amazon Associate I earn from qualifying purchases.
In Drupal, Metatag lets you set metadata at several levels: global defaults, defaults for an entity type or bundle such as a content type, and overrides on an individual entity. That makes it possible to supply a fallback image while allowing editors to choose a more specific image for a particular page. The module’s current compatibility and release information is on its Drupal.org project page; check it against your Drupal version before installing or upgrading.
Choose where the image comes from
| Image source | Best for | Trade-off |
|---|---|---|
| Global default | A site-wide fallback when a page has no more specific social image. | Easy to maintain, but may not represent an individual article or landing page. |
| Content-type image field | Giving editors an image field on the content types that need share images. | Requires a field and a Metatag token configuration, but supports relevant page-specific images. |
| Individual page override | Handling an exceptional page whose best share image differs from its content-type value. | Provides precise control, but editors must manage the override for that page. |
Drupal.org’s Metatag guide recommends a Media reference field configured for image media on the relevant content type. A default value can be useful if every page of that type should have a fallback. The field name in the token examples below is only an example; substitute the machine name and media field used on your site. The Metatag guide to using images documents the field and token pattern.
#1 Best Overall
Configure an image field and Metatag token
- Add or choose an image field. In Drupal’s content-type field configuration, add a Media reference field that accepts image media, or identify the equivalent field already in your content model. Set a default image only if that fallback makes sense for the content type.
- Optionally create an image style. Use an image style when you need a purpose-sized derivative or a controlled crop rather than the original upload. Choose dimensions and crop behavior for the target service, and make sure the resulting file URL can be fetched publicly.
- Set the Metatag image value. In the Metatag configuration for the appropriate content type, open Advanced and set the image value to a token for the media image field. For the example field
field_content_image, Drupal.org documents the original-image token[node:field_content_image:entity:field_media_image:entity:url]. Adapt the field and nested media-field machine names to your site. - Use a style token if you created a style. For a style whose machine name is
content_image, the documented example is[node:field_content_image:entity:field_media_image:content_image:url]. Replace both example machine names as needed. Confirm that the style exists and that Drupal can generate its derivative. - Save and test a representative page. Publish or update a page with the field populated, then inspect the page’s rendered HTML head for an absolute
og:imageURL. Drupal.org’s example also shows Open Graph title and URL tags alongside the image tag.
The exact administration screen can vary with Drupal version, installed modules and site configuration. Drupal CMS has a separate guide describing Open Graph title, description and image fields, dynamic tokens and responsive image styles; those defaults apply to its documented setup, not necessarily every Drupal installation. See Drupal CMS content modeling for social media and SEO.
Choose original image or image-style derivative
The original image token preserves the uploaded asset, while a named image-style token can provide a derivative with dimensions and cropping suited to sharing. A derivative can reduce unnecessary image size or make the crop predictable, but its URL must remain reachable by the platform’s crawler. A page may have a syntactically valid og:image tag and still show no preview image if access controls, hotlink protection or other blocking prevents retrieval.
Rank #2
Use an image style only when its crop and output dimensions suit the destination. Social services do not all share the same image requirements, so avoid treating one service’s guidance as universal.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Check the rendered tags and share preview
- Open the published page, not only the Drupal edit form.
- View the page source or inspect its document head and find
property="og:image". Verify that the content is an absolute URL and points to the intended original or derivative. - Open the image URL directly in a browser without logging in. If the image requires a session, is blocked, or returns an error, a social crawler may not be able to fetch it either.
- Use the destination platform’s share-preview or debugging workflow, if available, to see what it actually retrieves. A correct tag alone cannot guarantee a preview if the platform cannot access the image or has not refreshed its cached page data.
LinkedIn image requirements
For its sharing module, LinkedIn Help specifies a maximum image file size of 5 MB, minimum dimensions of 1200 × 627 pixels, and a recommended 1.91:1 ratio. It says images less than 401 pixels wide display as thumbnails and warns that protected or blocked images may not appear even when their dimensions meet the stated requirements. These are LinkedIn’s published guidelines, not universal requirements for every social network. See LinkedIn’s website-sharing guidance.
Troubleshoot a missing or incorrect image
- No
og:imageappears in the source: Confirm that the Open Graph metadata configuration is enabled, that the relevant Metatag defaults apply to this content type, and that the token is valid for the site’s actual field names. - The tag points to the wrong image: Check whether a global or bundle default is taking precedence over the page-level value. Confirm that the page’s field is populated and that any individual override is set as intended.
- The tag exists but the platform shows no image: Test the URL in a private browser window and check that it does not require authentication or get blocked. Also verify that the image response is available to a crawler and that the file is within the destination platform’s limits.
- The image is cropped badly or too small: Review the image style’s dimensions and crop settings. If the target is LinkedIn, compare the result with LinkedIn’s stated size and ratio guidance rather than relying on a generic social-image size.
- The preview still shows an old image: Inspect the current HTML first. If it is correct, the service may be showing cached metadata; use its available preview/debugging mechanism to request or check a fresh fetch.
- The derivative URL fails: Confirm the image style machine name in the token, verify the image field’s nested media field, and check that Drupal has generated the derivative and serves it publicly.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. A screenshot can help you inspect how a published page renders, though it does not replace checking the page’s Open Graph tags or the destination platform’s own preview.
One GET request returns an image or PDF. For example, this cURL request saves a WebP capture of the page:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for configuration and response details. ScreenshotNeo removes cookie/consent banners, newsletter popups and chat widgets before capture; bot checks, blank pages and failed loads are not billed; an MCP server gives AI agents screenshot tools; and the free plan includes 1,000 screenshots a month with no card, with paid plans starting at $5 for 3,000. Learn about ScreenshotNeo or sign up for the free plan.
Recommended Free Tools
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
