Pictures Won't Post to Facebook

sberry11 · ‎9 7, 2017

When I schedule some posts to our Facebook account I select an image and don't get a "picture is too big" warning, but when it posts there is no picture - just a text summary of my blog post. I understand the picture was probably too big, but the original file is stored in Hubspot. Between Hubspot's and Facebook's picture compression abilities, can one of the two not shrink it so it's viewable? Maybe I'm missing something. Is there another reason this could be happening?

AshleyHovatter · ‎9 14, 2017

Hello Sarah!

Thank you for your inquiry! There are a number of reasons why Facebook may not accurately pull in an image. The two most common reasons are image size, and if there is no "open graph" image declared. Whereas you mentioned the image size warning did not appear, my best guess is that there is not an open graph tag on your page.

To implement an open graph meta tag on your image on a HubSpot landing page or website page, you can add the following code snippet to the head HTML of the page:

Replace IMG URL with the URL of your file from the File Manager. For instructions on editing the head HTML of your page in HubSpot, check out this article.

When an open graph is not declared, Facebook will crawl the page and typically choose the first image it sees, or not choose an image at all. Try the steps above, and let me know if this resolves for you!

元の投稿で解決策を見る

AshleyHovatter · ‎10 6, 2017

Hey @RhiannonV!

A social preview is dependent on meta tags, or HTML tags set in the <head> section of your page. These tags are part of an Open Graph Protocol, which is a set of tags within the HTML of your site that allows you to integrate your pages with social media sites. These tags tell Facebook, LinkedIn, Google Plus, and Twitter what to focus on when creating a preview of your shared link. The basic tags are:

og:title - The title of the content you're sharing.
og:type - The type of content you're sharing, such as a video or a web page.
og:image - The url for a photo; this will be the featured image.
og:url - The unique URL of the page.

There are more tags than are listed, but those are the basics used to generate your link previews, whether it be a Facebook link preview or a Twitter card.

These tags are automatically set for blog posts: the title, meta description, and the featured image. For landing pages and site pages, however, only the title and meta description are set automatically. The featured image must be set manually. For instructions on how to set a featured image for a landing page or website page, please see this article.

Even if you have the ideal dimensions set and have set up your og:image tag correctly, you may still come across issues with your featured image's appearance. Below are some common issues that come up with Facebook, Twitter, and LinkedIn:

Facebook: You may occasionally notice that after sharing your link on Facebook, the image looks different than it does within your HubSpot social tool. The best tool to use in this case is the Facebook Debugger. This tool tells you what Facebook will pick up for a social preview as well as what errors are present and why the preview won't look the way you intend (for example, the tool will tell you if your og:image tag is missing or if your image is too small).

元の投稿で解決策を見る

AshleyHovatter · ‎9 14, 2017

Hello Sarah!

Thank you for your inquiry! There are a number of reasons why Facebook may not accurately pull in an image. The two most common reasons are image size, and if there is no "open graph" image declared. Whereas you mentioned the image size warning did not appear, my best guess is that there is not an open graph tag on your page.

To implement an open graph meta tag on your image on a HubSpot landing page or website page, you can add the following code snippet to the head HTML of the page:

Replace IMG URL with the URL of your file from the File Manager. For instructions on editing the head HTML of your page in HubSpot, check out this article.

When an open graph is not declared, Facebook will crawl the page and typically choose the first image it sees, or not choose an image at all. Try the steps above, and let me know if this resolves for you!

sberry11 · ‎12 1, 2017

I will give your solution a try, but you're saying that if it's another website I'm SOL since I can't change their HTML code?

RhiannonV · ‎10 3, 2017

Hi, I've had a similar problem. When sharing a news article from another site to my business Facebook page, the image and description are showing in the preview, but then in the post just the shortened bit.ly link. I've checked the source code on the article and there are OG image and description tags.

Any ideas on how to fix this?

AshleyHovatter · ‎10 6, 2017

Hey @RhiannonV!

A social preview is dependent on meta tags, or HTML tags set in the <head> section of your page. These tags are part of an Open Graph Protocol, which is a set of tags within the HTML of your site that allows you to integrate your pages with social media sites. These tags tell Facebook, LinkedIn, Google Plus, and Twitter what to focus on when creating a preview of your shared link. The basic tags are:

og:title - The title of the content you're sharing.
og:type - The type of content you're sharing, such as a video or a web page.
og:image - The url for a photo; this will be the featured image.
og:url - The unique URL of the page.

There are more tags than are listed, but those are the basics used to generate your link previews, whether it be a Facebook link preview or a Twitter card.

These tags are automatically set for blog posts: the title, meta description, and the featured image. For landing pages and site pages, however, only the title and meta description are set automatically. The featured image must be set manually. For instructions on how to set a featured image for a landing page or website page, please see this article.

Even if you have the ideal dimensions set and have set up your og:image tag correctly, you may still come across issues with your featured image's appearance. Below are some common issues that come up with Facebook, Twitter, and LinkedIn:

Facebook: You may occasionally notice that after sharing your link on Facebook, the image looks different than it does within your HubSpot social tool. The best tool to use in this case is the Facebook Debugger. This tool tells you what Facebook will pick up for a social preview as well as what errors are present and why the preview won't look the way you intend (for example, the tool will tell you if your og:image tag is missing or if your image is too small).

cryptoliz · ‎12 1, 2017

Hi there, I have experienced similar issues this week with facebook posts missing the image from the preview. I've debugged the URLs with the facebook tool, and still. Also, I've posted the SAME URL via hubspot before, and the images showed up then. So, what's the issue?

AshleyHovatter · ‎12 1, 2017

@cryptoliz Hello!

Facebook, over the past few weeks, has experienced trouble crawling all third-party applications, including HubSpot. We have reached out to them in regards to the matter, but as it is something occurring on their end, we have not heard a resolve as of yet. Some noticeable third parties it has effected are YouTube:

and iHeartRadio:

The "error" appears to be sporadic, not occurring with all posts, but often enough that it has caused a painpoint for many users. We are hoping this will resolve on Facebook's end soon.

Best Regards,

Ashley

Social Tools