Before you publish a social post, you can preview how the featured image will display in your post. Learn how to troubleshoot issues with the featured image in your social previews.
A social preview is built on meta tags in the <head> section of your page HTML. These tags are part of the Open Graph protocol, which enables any web page to become a rich object in a social graph. These tags tell social media sites like Facebook, LinkedIn, and Twitter what to focus on when creating a preview of your shared link. The basic meta tags are:
og:title: the title of your content.
og:type: the type of your content, such as a video or a web page.
og:image: the URL of the image to represent your content.
og:url: the unique URL of your content that will be used as its permanent ID.
og:description:the description that summarizes your image.
Featured image, page title, or page description isn't displaying in the post preview
If the preview of your social post isn't showing the featured image, page title, or page description that you expect, there are several debugging tools you can use to resolve the issue.
Confirm that you've specified a featured image and your meta tags are discoverable
If you're linking to a blog post, landing page, or website page hosted with HubSpot, make sure you've selected a featured image.
If you're sharing an external page in your post, use your browser's developer tools, such as Chrome Developer tools, to view the page's source, then search for the og:image tag to see which image will display.
If you've confirmed that the og:image tag is present and your featured image URL is correct, but you're still not seeing a link preview for your post, you can also check the following:
Confirm there is only one occurrence of each type of meta tag: if there are multiple occurrences of the same meta tag on your page, some social networks may not pick the correct one when they try to generate a link preview.
Ensure that your meta tags are near the top of your HTML: if you have extra code or markup before your meta tags, some social networks crawlers might not be able to locate them.
Use social network debugging tools to validate your image and meta tags
If you see a different image in the social preview than what is set as the og:image tag, the social network may need to recrawl that page. You can use the following validation tools to trigger a page recrawl and surface any errors that may affect publishing:
Facebook: use the Facebook Sharing Debugger to surface any warnings or errors with your meta tags, or to scrape the content URL again so it generates the most current Facebook link preview.
Twitter: use the Twitter Card Validator to surface any warnings or errors with your meta tags, or to scrape the content URL again so it generates the most current Twitter card preview.
LinkedIn: use the LinkedIn Card Inspector to surface any warnings or errors with your meta tags, or to scrape the content URL again so it generates the most current LinkedIn card preview.
Please note: LinkedIn will show your featured image, page title, and URL in their preview card, but will not include your meta description.
If the og:image tag has not been set for a page, the social network will scan the page to find the most appropriate image to include in social posts, which is usually the first image it finds. A link preview image may not appear at all if a robots.txt file, or certain security software, is being used to prevent page crawling.
The following dimensions are recommended for featured image optimization on each network:
Twitter: 16:9 for photo posts and 1.91:1 for featured images in link posts
Instagram (square): 1:1
Instagram (portrait): 4:5
Instagram (landscape): 1.91:1
LinkedIn (landscape): 1.91:1
Make sure that any media you include in your social posts follows the file size guidelines for each network. If HubSpot determines that a file is too large to post to a certain network, a warning will display. Maximum file sizes for each social network are listed below:
Facebook: 8MB (under 1MB recommended for PNG files to avoid pixelation)
Twitter: 5MB (15MB for GIFs)
Image color and clarity discrepancies
Differences in image color
Embedded color profiles might impact how your featured image displays in your social post. Different systems process uncommon color profiles in different ways, which is why the colors might look different when previewing the image in your file manager. You can run your image URL through an external tool to see if it’s using an uncommon color profile. If necessary, you can remove the interfering color profile in a photo editing tool like Photoshop, then republish the page before publishing the social posts.
Differences in image clarity
HubSpot’s file manager uses image compression on JPEGs and PNGs to help optimize loading speeds on your HubSpot-hosted content. Social media networks also use image compression in posts, which may vary in quality from what you see in HubSpot. For this reason, it’s recommended to use relatively high resolution images (in the recommended aspect ratio) for each network. If your image doesn’t conform with a social network’s requirements, a warning will show in HubSpot’s social publishing tool to help adjust your image accordingly.