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:
The title, meta description, and the featured image are automatically set for blog posts. For landing pages and website pages, the featured image must be set manually.
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.
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:
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:
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.
If the featured image for a link you inserted is not displaying correctly in your social preview (e.g., the image is cut off or the ratio is incorrect), you may need to edit the image so it has the right dimensions for the social network you're posting to, then republish the page. The following dimensions are recommended for featured image optimization on each network:
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:
You can also choose to publish your social post as photo post instead of a link post, which will allow for more control over which photo will display. Learn more about the difference between link posts and photo posts.
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.
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.