Search code examples
facebooktwittersharepoint-2013meta-tags

Using meta tags for Facebook in a SharePoint site

I have a public-facing SharePoint Foundation 2013 site, http://www.oceanview335.com. It is NOT a SharePoint Online site. I am trying to build meta tags in the master page so I can control the data shown when posting to Facebook. I have it working except for the image, which for me is the most important part.

Here are my meta tags in the master page:

<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.oceanview335.com/SitePages/Home.aspx" />
<meta property="og:title" content="Ocean View Lodge No. 335" />
<meta property="og:site_name" content="Ocean View Lodge No. 335" />
<meta property="og:image" 
content="http://www.oceanview335.com/Pictures/OV_eye_small.jpg" />
<meta property="og:description" content="Ocean View Masonic Lodge No. 335
A. F. & A. M. Norfolk, Virginia" />

Based on suggestions I found in stackoverflow and elsewhere, I added this line:

<link rel="image_src" type="image/jpeg"
href="http://www.oceanview335.com/Pictures/OV_eye_small.jpg" />

Using the Object Debugger for Facebook, https://developers.facebook.com/tools/debug I get the following results:

og:image was not defined, could not be downloaded or was not big enough.
Please define a chosen image using the og:image metatag, and use an image that's
at least 200x200px and is accessible from Facebook.
Image 'http://www.oceanview335.com/Pictures/2015%20DDGMs.png' will be used instead.

The end result is, if I create a NEW post in Facebook, the image from my home page "2015%20DDGMs.png" is displayed. If I COMMENT on an existing post, the correct image "OV_eye_small.jpg" is displayed. I have tried various suggestions, such as resizing the image to 200x200 or a multiplication thereof. The current image is 200x200. I have tried .png and .jpg images. I have added the image_src link listed above. Nothing I found through Googling to try has removed this "image was not defined" error or given me the correct image in Facebook posts.

Previously asked on SharePoint.Stackexchange, got zero responses. Using Twitter Cards, which also use meta tags, work flawlessly: https://dev.twitter.com/cards/getting-started​

Solution

  • If the Facebook scraper detects a redirect, it will abort and not use the content you have provided.

    The right image is getting shared on the comment post because the site is already at its final destination and redirect is occurring.

    Before Redirect (og:image not used):
    https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.oceanview335.com

    After Redirect (og:image used):
    https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.oceanview335.com%2FSitePages%2FHome.aspx

    The fetched URL and canonical URLs must match or the debugger will stop.

    Also, some analysis on running your site URL through the Facebook debugger:

    1. The first time I entered the main site URL (no path), it gave the responses that you stated in your question.
    2. After several minutes of investigating the issue, I came back to the debugger tool and clicked "Fetch new scrape information". Voila! All of the Open Graph meta information was now being read properly.

    I believe that the debugger cache may not have been primed for this URL the first time around. I am now able to paste the site URL (no path) into a blank Facebook post and it pulls your Open Graph image up as the share image.