function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
jls_74_txjls_74_tx 

Facebook Open Graph Tags Meta og:image

Does anyone have recent documentation about using open graph tags on a sites.com page? I have tried several combinations of <apex:page> tags and I can't get the Facebook DeBugger to read my page correctly. I have tried:
  • applyBodyTag true and false
  • applyHtmlTag true and false
  • contentType text/html
  • docType html-5.0
I have built a company profile page and implemented sharing buttons but Facebook doesn't pick up my open graph tags.

<apex:page sidebar="false" showHeader="false" cache="false" standardController="Locator_Friendly__c" id="profile">
<html>
<head>
    <meta property="og:image" content="http://locatormls.com/staticfiles/misc/metadata_facebook.jpg" />    
    <meta property="og:image:width" content="1300" />    
    <meta property="og:image:height" content="650" />    
    <meta property="og:title" content="Check out my professional profile on LocatorFriendly.com" />    
    <meta property="og:site_name" content="Locator Friendly Professional Profiles"/>    
    <meta property="og:url" content="http://www.locatorfriendly.com" />    
    <meta property="og:description" content="A marketplace to promote apartment locators and apartment communities who demonstrate integrity, performance, and trust. LocatorFriendly.com celebrates role models in the industry by publishing professional reviews that reflect marketplace behavior." />
    <meta property="og:type" content="profile" />    
    <meta property="article:author" content="https://www.facebook.com/jodisouthwick" />    
    <meta property="article:publisher" content="https://www.facebook.com/locatorfriendly" />
</head>
<body>
<apex:form >
<p style="text-align: center;">
    <apex:image url="http://www.locatormls.com/staticfiles/misc/locatorfriendlylogo.png"/>
</p>
</apex:form>
</body>
</html>
</apex:page>

Depending on the variations of the <apex:page> tags I have tried, the Object Debugger error messages include:
  1. Object at URL 'http://aim.force.com/locatorfriendly/test?ID=a0lF00000064g36' of type 'website' is invalid because a required property 'og:title' of type 'string' was not provided.
  2. Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree. Please fix this in order for the tags to be usable. (I do not have tags in the body)
  3. The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
  4. The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
  5. The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
If I use these <apex:page> components:
<apex:page sidebar="false" showHeader="false" cache="false" standardController="Locator_Friendly__c" id="profile" applyBodyTag="false" applyHtmlTag="false" contentType="text/html" docType="html-5.0" >

It pulls the meta data directly from my home page http://locatorfriendly.com - which I guess would work, but not my objective. I have searched the internet for articles about this and can't find any documentation specifically about VisualForce pages. 

Has anyone had success passing Open Graph tags to Facebook from a Sites.com page?

Thank you in advance for your help!
 
Best Answer chosen by jls_74_tx
pconpcon
I took the visualforce page below and exported it as a site [1] and ran it through Facebooks opengraph debugger [2] and it seems to work.  I think some of the issue is that the original og:image you provided returns a 404 and does not work.

User-added image 
<apex:page sidebar="false" showHeader="false" cache="false" id="profile" html-prefix="og: http://ogp.me/ns#" doctype="html-5.0" applyBodyTag="false">
    <head>
        <meta property="og:image" content="http://www.locatormls.com/staticfiles/misc/locatorfriendlylogo.png" />
        <meta property="og:image:width" content="1300" />
        <meta property="og:image:height" content="650" />
        <meta property="og:title" content="Check out my professional profile on LocatorFriendly.com" />
        <meta property="og:site_name" content="Locator Friendly Professional Profiles"/>
        <meta property="og:url" content="http://pcon-trailhead-developer-edition.na34.force.com/" />
        <meta property="og:description" content="A marketplace to promote apartment locators and apartment communities who demonstrate integrity, performance, and trust. LocatorFriendly.com celebrates role models in the industry by publishing professional reviews that reflect marketplace behavior." />
        <meta property="og:type" content="profile" />
        <meta property="article:author" content="https://www.facebook.com/jodisouthwick" />
        <meta property="article:publisher" content="https://www.facebook.com/locatorfriendly" />
    </head>
    <body>
        <apex:form >
            <p style="text-align: center;">
                <apex:image url="http://www.locatormls.com/staticfiles/misc/locatorfriendlylogo.png"/>
            </p>
        </apex:form>
    </body>
</apex:page>

What do you see when you run your site through the opengraph debugger?

[1] http://pcon-trailhead-developer-edition.na34.force.com/
[2] https://developers.facebook.com/tools/debug/og/object/

 

All Answers

pconpcon
I've not use open graph before, but I think you're missing the prefix="og: http://ogp.me/ns#" on your html tag.  Your visualforce page should probably be
  
<apex:page sidebar="false" showHeader="false" cache="false" standardController="Locator_Friendly__c" id="profile" html-prefix="og: http://ogp.me/ns#" doctype="html-5.0" applyBody
Tag="false">
    <head>
        <meta property="og:image" content="http://locatormls.com/staticfiles/misc/metadata_facebook.jpg" />
        <meta property="og:image:width" content="1300" />
        <meta property="og:image:height" content="650" />
        <meta property="og:title" content="Check out my professional profile on LocatorFriendly.com" />
        <meta property="og:site_name" content="Locator Friendly Professional Profiles"/>
        <meta property="og:url" content="http://www.locatorfriendly.com" />
        <meta property="og:description" content="A marketplace to promote apartment locators and apartment communities who demonstrate integrity, performance, and trust. LocatorFriendly.com celebrates role models in the industry by publishing professional reviews that reflect marketplace behavior." />
        <meta property="og:type" content="profile" />
        <meta property="article:author" content="https://www.facebook.com/jodisouthwick" />
        <meta property="article:publisher" content="https://www.facebook.com/locatorfriendly" />
    </head>
    <body>
        <apex:form >
            <p style="text-align: center;">
                <apex:image url="http://www.locatormls.com/staticfiles/misc/locatorfriendlylogo.png"/>
            </p>
        </apex:form>
    </body>
</apex:page>

 
jls_74_txjls_74_tx
Thank you so much for your reply. Unfortunately that didn't work. Using your suggested code, Facebook pulled images and metadata from my website www.LocatorFriendly.com and completely ignored the metadata on the VisualForce page. After many trial and errors yesterday I ended up using regular meta tags so at least I get the title and description I want:

 <title>{!Locator_Friendly__c.Name} Professional Profile On LocatorFriendly.com</title>
 <meta name="description" content="A marketplace to promote apartment locators and apartment communities who demonstrate integrity, performance, and trust. LocatorFriendly.com celebrates role models in the industry by publishing professional reviews that reflect marketplace behavior." />

But I'm unhappy with the image it's pulling in. For whatever reason I cannot get Facebook to recognize open graph meta tags to save my life....however, LinkedIN and Twitter recognize them from the VisualForce page no problem. I have share buttons on the profile page I created, Facebook is the only share button that doesn't work as desired.
pconpcon
I took the visualforce page below and exported it as a site [1] and ran it through Facebooks opengraph debugger [2] and it seems to work.  I think some of the issue is that the original og:image you provided returns a 404 and does not work.

User-added image 
<apex:page sidebar="false" showHeader="false" cache="false" id="profile" html-prefix="og: http://ogp.me/ns#" doctype="html-5.0" applyBodyTag="false">
    <head>
        <meta property="og:image" content="http://www.locatormls.com/staticfiles/misc/locatorfriendlylogo.png" />
        <meta property="og:image:width" content="1300" />
        <meta property="og:image:height" content="650" />
        <meta property="og:title" content="Check out my professional profile on LocatorFriendly.com" />
        <meta property="og:site_name" content="Locator Friendly Professional Profiles"/>
        <meta property="og:url" content="http://pcon-trailhead-developer-edition.na34.force.com/" />
        <meta property="og:description" content="A marketplace to promote apartment locators and apartment communities who demonstrate integrity, performance, and trust. LocatorFriendly.com celebrates role models in the industry by publishing professional reviews that reflect marketplace behavior." />
        <meta property="og:type" content="profile" />
        <meta property="article:author" content="https://www.facebook.com/jodisouthwick" />
        <meta property="article:publisher" content="https://www.facebook.com/locatorfriendly" />
    </head>
    <body>
        <apex:form >
            <p style="text-align: center;">
                <apex:image url="http://www.locatormls.com/staticfiles/misc/locatorfriendlylogo.png"/>
            </p>
        </apex:form>
    </body>
</apex:page>

What do you see when you run your site through the opengraph debugger?

[1] http://pcon-trailhead-developer-edition.na34.force.com/
[2] https://developers.facebook.com/tools/debug/og/object/

 
This was selected as the best answer
jls_74_txjls_74_tx
Turns out after playing with it more, I had too many meta tags. I was able to make it work with the following code:

<apex:page sidebar="false" showHeader="false" cache="false" standardController="Locator_Friendly__c" id="profile" html-prefix="og: http://ogp.me/ns#" doctype="html-5.0" applyBodyTag="false">
    <head>
        <link REL="shortcut icon" HREF="{!URLFOR($Resource.favicon)}"></link>
        
        <meta property="og:image" content="http://www.locatormls.com/staticfiles/misc/metadata-1230x630.jpg" />
        <meta property="og:image:width" content="1230" />
        <meta property="og:image:height" content="630" />
        <meta property="og:title" content="{!Locator_Friendly__c.Name} professional profile on LocatorFriendly.com" />
        <meta property="og:description" content="A marketplace to promote apartment locators and apartment communities who demonstrate integrity, performance, and trust. LocatorFriendly.com celebrates role models in the industry by publishing professional reviews that reflect marketplace behavior." />
        <meta property="og:type" content="profile" />            
    </head>
    <body>
        <apex:form >
            <p style="text-align: center;">
                <apex:image url="http://www.locatormls.com/staticfiles/misc/locatorfriendlylogo.png"/>
            </p>
        </apex:form>
    </body>
</apex:page>

Thank you for pointing out the additional <apex:page> tags and removing the <HTML> - that's what I needed to make it all work!