Open Graph (a.k.a. Facebook preview) broken by Shashin

I don’t use Facebook a lot so I’ll need some more detail. I have shared pages from my own toppa.com site (with Shashin photos in the posts), through “update status” on Facebook and I’ve never noticed any problems. Do you mean sharing pages in some other way?

I am talking about plain Facebook share, through the “update status” form. Apparently the issue is the “View at Picasa” text from the Prettybox enters the Open Graph text. In my case, the Facebook text preview snippet starts with eight “View at Picasa” mentions, the proper page text appears only after deleting those mentions at Facebook’s “update status” form. I cannot expect that from my visitors wanting to share my site on their Facebook.

I patched the issue by hiding the .shashinLinkToOriginalPhoto

This problem has never happened to me when I share on FB a post from my site that includes Shashin photos. Th FB share gets the title of the post and the first sentence or so, as you would expect. I just tried it again now to make sure. Would you mind temporarily unhiding .shashinLinkToOriginalPhoto on your site, and let me know the URL? Then I can try sharing a page from your site – there must be an interaction happening with Shashin and something else on your site that’s causing the problem.

Hi Mike, sorry for the absence. Here is the site: https://szaboedit.hu/utcabutor/vadak/ and – as seen in the official FB debugger – the ‘og:description’ property is parsed somehow wrong.

Thanks for the debug link – that’s helpful. I did some Googling, and it seems that if you don’t provide an og:description tag (your site has other og tags, but not the description), Facebook goes looking for other tags on the page it thinks might have what it wants.

Could you try temporarily switching to Fancybox on the Shashin settings page, and try it again? From what I read you may need to load the page in the debugger again in order to clear Facebook’s cache of your page. I ask because prettyPhoto has a div with a “pp_description” class, and the “view at Picasa” link is the only link inside that div. I’m wondering if Facebook is latching on to any tags with the word “description” in them. Fancybox does not have this div.

Same goes with Fancybox. On other posts I noticed, the captions also enter the og:description along with the “view at Picasa”.

There is indeed a special thing on my site – there are some custom fields, so the pages do not have a proper excerpt, and og:description is usually looking for that in case of WP. This could be solved by some coding, though: https://yoast.com/facebook-open-graph-protocol/

Still, it would be gainful, if prettyPhoto/Fancybox data could not enter the site meta at all.

So I’ve installed Yoast’s SEO (which is what I’m assuming you’re using to generate the Open Graph tags), and I still can’t re-create the problem.

1.The Yoast plugin is providing an og:description tag on all my posts, and Facebook is using it. Your pages don’t have og:description tags – probably because of whatever you’ve done to turn off excerpts.

2. I tried leaving the description blank for my home page in the Yoast settings (to force my home page to not have an og:description tag) and even then I can’t re-create the problem (Facebook is grabbing “Mike Toppa’s blog” from my masthead div as the description).

It seems to me this is happening because your site isn’t fully setup to use Open Graph. You should have an og:description tag (as the Facebook debugger is advising you to do), or a meta description tag.

Without those things, Facebook is scanning through the page content looking for something it thinks might be the page description. I don’t know what their algorithm is, but there must be something about the names of the shashin classes that it’s latching on to. Without being able to re-create your problem, I would be guessing blindly at renaming my shashin classes (and I’m not using “description” as a name anywhere).

It seems to me that if you want to use Open Graph, you should supply it properly with the fields it’s expecting. Otherwise there’s really no predicting what it will try to use as the page description.

Hi Mike, I am aware you cannot solve an issue you cannot recreate. Thank you for the great support anyway.
If this occurs to anyone else, there are at least two patches mentioned above. I am going to use the forced generation of og:description as mentioned on the Yoast blog.

Sorry I didn’t have a better answer for you. I learned quite a bit about Open Graph in the process. My hunch is that Open Graph is picking up on the word “caption” in my “shashinCaption” class because it can’t find any other tags on the page that look to it like a description of the page (the link text it’s grabbing is a link within the div that has that class). But making words like “caption” off-limits for CSS classes from plugins seems to me like not the right solution.