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.
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.
Selected image isn't displaying in the post preview
First, make sure you've selected an image for you blog post, landing page or website page. If you're sharing an external page, use your Chrome Developer tools to view the page's source, then search for the “og:image” tag to see which image will display.
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.
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.
Size requirements for featured images
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:
- Facebook: 300:175
- 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: 4MB (under 1MB recommended for PNG files to avoid pixelation)
- Instagram: 8MB
- Twitter: 5MB (15MB for GIFs)
- LinkedIn: 10MB
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.
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.