Open Graphic image not displaying

I have this code which I use in testing the open graphic and this is the code below:

<html>
<head>
    <meta charset="UTF-8" />
    <title>THE KING</title>
    <meta name="robots" content="Just About Me" />
    <meta name="description" content="All You Should Know About Me" />
    <meta property="og:locale" content="en_US"/>
    <meta property="og:type" content="article"/>
    <meta property="og:title" content="Just About Me"/>
    <meta property="og:description" content="All You Should Know About Me"/>
    <meta property="og:url" content="http://share.stephensangkn.org"/>
    <meta property="article:section" content="The King"/>
    <meta property="article:published_time" content="2016-07-31 15:58:30"/>
    <meta property="article:modified_time" content="2016-07-31 15:58:30"/>
    <meta property="og:image" content="http://share.stephensangkn.org/images/me.jpg"/>
    <script src="js/jquery.js"></script>
</head>
<body>
    <h2>THE KING</h2>
    <img src="images/me.jpg" style="max-width:500px;max-height:500px" /><br>
    <a style="cursor:pointer;">share</a>
    <script>
        url = "https://facebook.com/sharer.php?u=http://share.stephensangkn.org";
        W = "500";
        H = "800";
        $('a').click(function(){
            window.open(url, '', 'width='+W+',height='+H);
        });
    </script>
</body>
</html>

But the problem is that the image refuse to show up when the Facebook page opens, I even changed the image still same result. Here is the link to my page. Please any help?

Solution

I did try your code and I observed what you complained but I shared the link on my Facebook page and it displayed the same photo on your link so try sharing it an see