Social media networks will automatically pull an image to feature in the share previews from your content. This guide will help you understand which image is preferred. In order for an image to be pulled, Metro Publisher code includes Open Graph meta tags in accordance with social media best practice for website markup.
Open Graph tags are bits of code that allow your content link URL to be turned into a rich content sharing preview, meaning an image, a title and possibly description are displayed when you or your readers share one of your articles or other content.
Please note that social media companies will occasionally make exceptions to their own rules and pull a preferred image, even if that one hasn't been designated the Open Graph image. It is important that you comply with image requirements set by social media networks to make sure that is not the reason an image is skipped.
Teaser Images as Social Media Previews
A teaser image you set will not appear within the article (unless you were to add that specific image to the article text via the media slot as well). It will only appear on Sprockets that feature the article AND it is the image that Facebook will use when you share the article.
There is no option to select which image from the article gets pulled as the sharing image, aside from that.
The teaser image is chosen preferentially, with media slot images being the second choice. This means there can be multiple Open Graph images tagged but the teaser image should generally be pulled first.
Wide feature images on articles are skipped in favor of the teaser Image or the first media slot image if no Teaser is set. This is because the proportions of the wide feature image, while ideal for modern desktop screens, are not ideal for Facebook post display. The image would be cropped.
When you post on Facebook using their web app a carousel of available images is displayed, giving you the option to select one.
Image Specifications for Social Media
NOTE: Image requirements and size limits for the various social media platforms are subject to change. We cannot guarantee that the recommendations listed below are always current, so please look up the current requirements should you ever run into preview image issues.
Facebook image requirements:
- The minimum allowed image dimension is 200 x 200 pixels.
- The size of the image file must not exceed 8 MB.
- Use images that are at least 1200 x 630 pixels for the best display on high resolution devices.
- At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. If your image is smaller than 600 x 315 pixels, it will still display in the link page post, but the size will be much smaller.
- Link page posts are designed so that the aspect ratio for images is the same across desktop and mobile Feed. Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in Feed without any cropping.
X (formerly Twitter) image requirements:
- Minimum image size of 600 by 335 pixels is recommended
- Photos can be up to 5MB; animated GIFs can be up to 5MB on mobile, and up to 15MB on web.
- GIF, JPEG, and PNG files are accepted
- BMP, TIFF or other file formats are NOT accepted.
Bluesky image requirements
- JPG or JPEG, PNG, WebP, and HEIC/HEIF (Apple format) are accepted
- maximum file size is 1 MB
- maximum image size is 2000 x 2000 pixels
Social Media Preview Images for Pages
On Pages, the Social Media Logo uploaded in the Design Builder is used when sharing a Pages page URL.
You can override this by using the Header field on the respective Page's editing page. You can enter code to specify the Open Graph image for social media following this format:
<meta property="og:image" content="/downloads/123456/download/image-of-your-choice.jpg" />
You would need to replace this part:
/downloads/123456/download/image-of-your-choice.jpg
with the path to the image you'd like.
You can copy that path from the image page in your Files center. Log in as Editor and click on the Files tab in your dashboard to reach your Files overview table.
Ideally, you would also specify the og:image:height and og:image:width tags as well.
If you want to use that option you cannot have a default Social Media Logo uploaded in your Design Builder settings, however. The override will not work if one is set due to the way Facebook reads the code at this time, unfortunately, so it's an either/or decision.
Comments