Disclaimer: I've google it and read some Q&A here so please avoid these suggestions.
The Problem: I'm trying to set an image to display when the url of my site is being mentioned on FB like this:
<head>
<meta property="og:image" content="http://example.com/image/theImage.jpg"/>
<link rel="image_src" href="http://example.com/image/theImage.jpg"/>
</head>
and it doesn't work!
The image facebook selected is located on the body section like this:
<img src="images/Jil.jpg" alt="Jil" class="img-responsive">
What makes this even stranger is that the selected image is is not the first <img> tag in the body section, so I don't understand the logic of how facebook selects the image to display
When debugging Facebook tagging issues like this, it's worth using the debug page: https://developers.facebook.com/tools/debug/
In this case, it sounds like it told you that your image size was too large.
Additionally, it's always good to validate your HTML, as what might work for a browser might not work for whatever Facebook is using to parse that HTML server-side. (The HTML in the question is fine, I'm just providing this advice for future folks that find this answer.)