Troubleshoot link previews in social posts
Last updated: May 24, 2024
Available with any of the following subscriptions, except where noted:
Marketing Hub Professional , Enterprise |
Legacy Marketing Hub Basic |
When you add links to social posts in HubSpot, a preview including a featured image, page title, and page description will be displayed.
Social previews are based on meta tags in the <head> section of your page HTML. These tags tell social media sites platforms 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.
The title, meta description, and the featured image are automatically set for blog posts. For landing pages and website pages, while the title and meta description are set also automatically, the featured image must be set manually.
Please note: LinkedIn will show your featured image, page title, and URL in their preview card, but will not include your meta description.
Featured image, page title, or page description isn't displaying in the post preview
If your social post preview isn't showing the expected featured image, page title, or page description, you can troubleshoot in HubSpot or by using external debugging tools.
Troubleshooting within HubSpot
If you're linking to a HubSpot-hosted blog post, landing page, or website page, make sure a featured image is set in the page or post’s settings.
You can also manually set an og:image
tag to add a featured image:
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Content > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
- Click the name of your page.
- In the content editor, click the Settings menu and select click.
- In the dialog box, paste this code snippet into the Head HTML field:
<meta property="og:image" content="IMG URL">
- Replace IMG URL with the URL of your image file.
- To further optimize an image for X, enter this additional code snippet into the Head HTML field:
<meta name="twitter:card" content="summary_large_image">
- In the top right, click Publish or Update to set the changes live.
Troubleshooting with browser developer tools
If you're sharing an external page in your social post, you can use browser developer tools such as Chrome Developer tools to make sure the meta tags for the page are set up correctly. View the page's source, then check and confirm the following:
- The
og:image
and other meta tags are correctly displayed. - The details for each tag are correct. For example, check that the featured image URL for the
og:image
tag is correct. - There is only one occurrence of each type of meta tag. If there are multiple occurrences of the same meta tag, social networks may not select the correct one when generating a link preview.
- Your meta tags are near the top of the HTML. If you have extra code or markup before your meta tags, social network crawlers may not be able to locate these tags.
Troubleshooting with social network debugging tools
If you're seeing a discrepancy between your social preview and the meta tags, the social network may need to recrawl that page. Use the following validation tools for each social network to surface any errors or trigger a page recrawl:
- Facebook Sharing Debugger: Facebook automatically recrawls shared content every 24 hours. To manually trigger a recrawl, click Scrape Again in the Sharing Debugger.
- X Card Validator: X caches content for 7 days after publishing a post. Enter your URL and click Preview card in the Card Validator to trigger a recrawl of your content.
- LinkedIn Post Inspector: LinkedIn caches content for 7 days after publishing a post. Click Inspect in the Post Inspector to trigger a recrawl of your content.
In general, any posts published prior to recrawling the page will still retain the incorrect image. 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 security software is used to prevent page crawling.
Featured image display issues
If your social post preview is displaying the expected featured image, but the image is displaying incorrectly, you can check the following.
Image size or ratio is incorrect
If the featured image isn't appearing 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: 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
Ensure that any media included 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 appear when creating the social post. These are the maximum file sizes for each social network:
- Facebook: 8MB (under 1MB recommended for PNG files to avoid pixelation)
- Instagram: 8MB
- X: 5MB (15MB for GIFs)
- LinkedIn: 10MB
Differences in image color
Embedded color profiles may impact how your featured image appears in your social post. Different systems process uncommon color profiles in different ways, which is why the colors may 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 an external photo editing tool like Photoshop, then republish the page before publishing your social post.
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 for each network. If your image doesn’t conform with a social network’s requirements, a warning will appear in HubSpot’s social publishing tool to help adjust your image accordingly.