When you create and publish a social post in HubSpot, the corresponding social network will attempt to generate an image preview for your post. Based on the link you entered for the post, the social network will scan the meta tags in the source code of your page, and crawl your website's robots.txt file.
If you're hosting your website on an external provider such as WordPress, and the preview for your post doesn't appear as expected, follow the instructions below.
Update your robots.txt
A robots.txt file informs search engines how to index your website. If you haven't added or configured your robots.txt file properly, social networks will not be able to parse the content of your pages. Facebook and X both provide the user agent strings that you'll need to add to your robots.txt file:
User-agent: facebookexternalhit
Disallow:
User-agent: Twitterbot
Disallow:
LinkedIn doesn't provide documentation for their user agent string, but you can use the LinkedIn post inspector to confirm whether LinkedIn can crawl the contents of your website.
Add meta tags to the <head> section of your website pages
Search engines and social networks will parse the head section of your HTML to look for the metadata needed to generate a preview of the page. You should include the metadata for Facebook and X after your primary meta tags:
<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Title of your Website Page">
<meta property="og:description" content="Description of your Website Page">
<meta property="og:image" content="https://example.com/image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/">
<meta property="twitter:title" content="Title of your Website Page">
<meta property="twitter:description" content="Description of your Website Page">
<meta property="twitter:image" content="https://example.com/image.png">
Fill in the content attributes for each of the meta tags above with the corresponding values for your page. You can validate your meta tags using the Facebook debugger tool, X card validator, and LinkedIn post inspector.
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. If you're posting to Facebook, you can learn more about their featured image requirements in their documentation.
The following dimensions are recommended for featured image optimization on each network:
- Facebook: 1.91:1
- X: 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)
- Instagram: 8MB
- X: 5MB (15MB for GIFs)
- LinkedIn: 10MB
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.
If you're still encountering issues with your link previews not appearing properly, check out our troubleshooting guide.
Marketing Hub
Professional
,
Enterprise
