My image tags were right for Open Graph, but my images weren’t showing when when people tried to share on Facebook.
I found my answer on Stack Overflow here.
Apparently, if Facebook doesn’t already know of a page, it will not know about the image until after it is shared once (at which time it becomes aware of the page).
However, there’s a work around. You have to specify additional attributes about the image – the height and the width (where the content value is the number of pixels for width and height, respectively):
<meta property=”og:image:width” content=”450″/>
<meta property=”og:image:height” content=”298″/>
In order to reference an image from the CSS file, I added .scss at the end of the .css file and referenced the image using this syntax:
background: url(asset-path(“example.png”,image)) no-repeat;
I wondered how Twitter made all of the uploaded images have rounded corners. I found a wonderful jQuery script, jQuery corners which does just this:
apply an id to your picture, like so
then add this script: