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.
How social previews work
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.
Link posts vs. social posts
When creating a social post in HubSpot, the image's behavior will vary depending on which type of post you share. There are two different kinds of social posts:
- Link post: a post that consists mostly of text and contains a URL.
- Photo post: a post where the primary content is an image.
LinkedIn allows users to select which photo is used in the link post, but Facebook and Twitter will automatically select an image. If you want to include a specific photo in your Facebook or Twitter social post, create a photo post in HubSpot by inserting an image in the post before publishing.
Frequently asked questions
Below find answers to frequently asked questions about social post previews.
- Why isn't the image that I selected displaying in the social preview?
- What should I do if my featured image isn't displaying correctly?
- Why do the featured image's colors look different after publishing my social post?
- Why are my social media post images blurry when publishing through HubSpot instead of directly on my social media accounts?
Why isn't the image that I selected displaying in the social 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.
What should I do if my featured image isn't displaying correctly?
If your featured image 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: 2:1
- 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.
Why do the featured image's colors look different after publishing my social post?
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.
Why are my social media post images blurry when publishing through HubSpot instead of directly on my social media accounts?
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.