Open Graph Meta Tags for Salesforce Article Detail Page

Question

A custom component was created to handle social sharing of article pages. When the Facebook icon is clicked to share the page to Facebook, Facebook creates a post using the Facebook logo image. We need this image to be an image from the article.

On LinkedIn, everything about sharing works correctly. The image is grabbed from the article or no image is used in the post if there is no image in the article.

On Facebook however, the use of open graph meta tags is not getting Facebook to display an image from the article.

Any ideas on how to create a Facebook post with the correct image, link, title, and possible other information relating to the Salesforce community article detail page?

Answer 1

You can check if your meta tags should be setup correctly and then if facebook is able to view them or not. Here is what we used in one of our implementation for Twitter (twitter meta tags), LinkedIn and Facebook (og tags).

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@manjit5190" />
<meta name="twitter:creator" content="@manjit5190" />
<meta property="og:title" content="{!Record.Name}"/>

<meta name="twitter:image:src" content="https://oursiteurl.com/{!Record.ImageRelativeURL__c}"/>
<meta name="twitter:image:width" content= "1200" />
<meta name="twitter:image:height" content= "700" />

<meta property="og:type" content="website" />
<meta property="og:description" content="{!Record.Summary__c}"/>
<meta property="og:image" content="https://oursiteurl.com/{!Record.ImageRelativeURL__c}"/>
<meta property="og:image:secure_url" content="https://oursiteurl.com/{!Record.ImageRelativeURL__c}"/>
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="700" />

We had a custom field to store the URL of the image. If no og:image tag is provided or is blank, Facebook tries to use one of the images from the page content. Facebook has a sharing debugger that you can utilize to review what the parser sees on your site (Similiar tools: Card validator for Twitter and Post Inspector for LinkedIn). If you do not see the image URL in the fetched meta tags, then you need make sure that

1. You are in production.
2. The page is publicly accessible.
3. The recent sitemap is generated.
4. A recent snapshot is generated.

Community sitemap setting: