Skip to content
Social

Troubleshoot link previews in Social posts

Last updated: July 21, 2021

Applies to:

Marketing Hub Professional, Enterprise
Legacy Marketing Hub Basic

When you add links to social posts in HubSpot, you’ll see a preview that includes a featured image, page title, and page description. If the image, title, or description don’t appear or you’re seeing issues with the featured image, use the steps below to troubleshoot.

Social previews are based on meta tags in the <head> section of your page HTML. 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.
  • 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: 

  • In your HubSpot account, navigate to your landing pages or website pages.

  • Hover over a page and click Edit
  • In the content editor, click the Settings tab, then click Advanced options
  • In the Additional code snippets section, enter this code snippet into the Head HTML field: 

 <meta property="og:image" content="IMG URL">

<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 networks crawlers may not be able to locate these tags.

inspect-for-featured-image


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.
  • Twitter Card Validator: Twitter caches content for 7 days after publishing a post. 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
  • 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

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
  • Twitter: 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.