So, I have this other experimental web site to track restaurants, bars, and retail shops near my home on a particularly busy street. The site is here: http://www.divisionstreetportland.com/. Anyway, I was having a strange problem with the OpenGraph tagging. I was using JFBconnect from Sourcecoast to do the Facebook and social media integration. However, upon sharing a bar or restaurant's page, Facebook was consistently grabbing an incorrect image. That is, it would grab the desired image, but ALSO grab another image from the page that I did not want to be available for sharing.
In reviewing JFBConnect's code, all looked good and proper (and it IS -- JFBConnect is a great program). They had the proper og:image tag in the header, and there were no other og:image declarations on the document. So, WHY was Facebook picking up a second image? (In my case, it was a Google map -- so not even one being sourced from my own site. The code for this was as follows (as an example):
- <img style="width:99%; border:2px solid green;" src="//maps.googleapis.com/maps/api/staticmap?center=3619+SE+Division+St,Portland+OR&zoom=17&size=1000x400">
I suspect this is an issue for many sites, as web pages are CHOCK FULL of images -- from sidebar graphics to 3rd party ads, to embedded maps like that, user avatars, commenter profile photos, and so on. So, you wouldn't think that OpenGraph would pull anything it isn't specifically *told* to pull! (And, in fairness, I'm sure there are web pages that specifically DO tell OpenGraph to pull numerous images -- and perhaps a lot of this is unintentional, as it could be 3rd party components inserting the OG tags that webmasters don't want there.)
On the other hand, OG is an increasingly growing and popular protocol, and I'm sure they're filling their scraping algorithms with a lot of artificial intelligence algorithms, ostensibly to help out sites that aren't properly implementing the protocol. So, in this case, maybe their algorithm figured that it would be helpful to scrape the Google map and make that a possible image to share along with the one tagged as og:image.
Anyway, what can one do about it? I'm sure there is a better answer than what I'm going to give here. I mean, even with Google Translate, they give you a little <span> tag to allow you to instruct Google Translate to NOT translate what's between the span tag. I would imagine that something similar could be done with OG, but couldn't find any documentation.
Instead, what I tried, and what worked, was to consider that their algorithm may be pretty smart, and might be looking for common *content* areas of web sites. When you consider the major percentage of sites run on the top 10 or so Open Source and/or Commercial CMSs, it would be pretty easy for them to isolate the content of a majority of web pages. So, figuring this might be the case, I just wrapped my image in a <div class="sidebar"> tag. I figured this was like telling OpenGraph: Hey, this is a sidebar, so it's not important (even though it was within the main article tag).
To be 100% honest, I do not know WHY this worked (unless my rationale is correct there), but it DID work. Now, when you share a page, it ONLY shows the opengraph og:image tagged image. I guess you don't always need to know why ... a suspicion is good enough.