5

We have developed few vf pages and exposed them to site. I have added og meta tags for facebook. But when i post the this page URL its not picking up any of these meta tags.

I have inspected the page and it shows all the meta tags properly. And when i use facebook debugger : https://developers.facebook.com/tools/debug/ i get the msg that these og meta properties are missing.

I have spent whole day searching over internet for similar problems and trying their solutions but they didn't work.

eg. Page that is being exposed : https://partsandbo-templetonportal.cs57.force.com/apex/JobDetails?jobId=a027F00000BhBD1QAN

If you see the html code of this page...you will see the open graphic meta tags..but when you click on facebook sign at the bottom..the post being sent to facebook don't have meta tags working.

Code of the vf page:-

<apex:page showHeader="false" sidebar="false" cache="false" controller="JobSearchController" id="profile" standardStylesheets="false" readOnly="true" html-prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#" doctype="html-5.0" applyBodyTag="false">

    <head>  
        <meta charset="utf-8"/>
        <meta content="width=device-width, initial-scale=1"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>  

        <meta property="og:url" content="{!$Label.SERVER_PATH}JobDetails?jobId={!jobs.id}"/>
    <meta property="og:image" content="{!$Label.SERVER_PATH}servlet/servlet.FileDownload?file={!attachmentId}" />
    <meta property="og:title" content="{!jobs.JOB_TITLE_for_add__c}" />
    <meta property="og:description" content="{!jobs.AVTRRT__Job_Summary__c}" />
    <meta property="og:type" content="article" />


        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"/>

        <style>
        --Custom styling here--
       <style> 
</head>   

    <body Style="background-color: rgba(231,231,231,1) ;">
          <div class="headers">
                  <div class="heading">
                     <p style="font-size:12px;margin:0;">National Business Broker</p>
                  </div>
                  <div class="socialIcon">
                   <div style="float:right;">
                     <a class="social-network-icon" style="color:#ffffff;" href="{!IF(jobs.RecordType.Name =='UK_JOB Business Sale','https://www.facebook.com/GrowthFocusUK',IF(jobs.RecordType.Name =='AUS_JOB Business Sale','https://www.facebook.com/GrowthFocusAu',''))}" target="_blank" data-placement="bottom" data-title="Facebook" data-toggle="tooltip" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                     <a class="social-network-icon" style="color:#ffffff;" href="https://www.linkedin.com/company/growthfocus" target="_blank" rel="noopener noreferrer" data-placement="bottom" data-title="Linkedin" data-toggle="tooltip" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
                     <a class="social-network-icon" style="color:#ffffff;" href="mailto:{!IF(jobs.RecordType.Name =='UK_JOB Business Sale','[email protected]',IF(jobs.RecordType.Name =='AUS_JOB Business Sale','[email protected]',''))}?subject=Regarding%20Available%20Businesses%20for%20Sale" target="_self" rel="noopener noreferrer" data-placement="bottom" data-title="Email" data-toggle="tooltip" title="Email"><i class="far fa-envelope"></i></a>
                   </div>
                  </div>                 
          </div>         
          <div class="logo">
             <apex:image value="{!$Resource['Header_Icon']}" id="limg" style="height:11vh; width:auto"/>
          </div>

       <div class="jobSearchForm"> 
        <apex:form > 
        <div class="fontStyle" style="margin:0;">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <apex:outPutPanel >
          <div class="card" style="border-radius:8px;">

                    <div style="margin:5% 2% 2% 0;text-align:center;">
                            <button class="btn btn-primary btn-sm" type="button" style="float:right;background-color:white;border:2px solid Black;color:Black" onClick="backToSearchAll();">Back to Listings</button><br/><br/>
                    </div> 
                    <div class="SubButton">
                           <apex:commandButton style="background-color:#0070d2" styleClass="btn btn-primary btn-sm btn-block" value="Submit Interest" onclick="window.open('{!jobs.AVTRRT__Job_Application_URL_New__c}');return false;"/>
                     </div>   
                        <div class="card-body" style="padding-top:0px;padding: 3rem;">                                             
                          <p style="margin-bottom:0px"></p>
                          <hr style="margin-top:0px; border-top:5px solid black"/>
                          <h4 class="card-title">{!jobs.JOB_TITLE_for_add__c}</h4>
                          <apex:outputLabel rendered="{!jobs.Ad_Bullet_1__c !='' && jobs.Ad_Bullet_1__c !=null}"> 
                               <ul class="bulletPoints"> 
                                 <li>{!jobs.Ad_Bullet_1__c}</li>
                                 <li>{!jobs.Ad_Bullet_2__c}</li>
                                 <li>{!jobs.Ad_Bullet_3__c}</li>
                               </ul>
                          </apex:outputLabel>
                          <hr style="border-top:5px solid black"/>
                          <p class="card-text">
                             <br/> <apex:outputText value="{!jobs.AVTRRT__Job_Description_Rich__c}" escape="false"/>
                          </p>
                          <hr/>
                            <p style="text-align: center;"> Share this Business on Social Platforms:</p>                         
                            <div class="socialIcon" style="text-align:center;width:100%;">
                               <a class="social-network-icon" style="color:#01b2de;" href="https://www.facebook.com/sharer.php?u={!$Label.SERVER_PATH}apex/JobDetails?jobId={!jobs.id}" target="_blank" ><i class="fab fa-facebook-f"></i></a>
                               <a class="social-network-icon" style="color:#01b2de;" href="https://www.linkedin.com/shareArticle?mini=true&url={!$Label.SERVER_PATH}apex/JobDetails?jobId={!jobs.id}&summary={!jobs.AVTRRT__Job_Summary__c}&title={!jobs.JOB_TITLE_for_add__c}" target="_blank" ><i class="fab fa-linkedin-in"></i></a>
                               <a class="social-network-icon" style="color:#01b2de;" href="https://twitter.com/intent/tweet?text={!jobs.JOB_TITLE_for_add__c}&url={!$Label.SERVER_PATH}apex/JobDetails?jobId={!jobs.id}" target="_blank" ><i class="fab fa-twitter"></i></a>
                            </div> 
                        </div>
                   </div>

      </apex:outPutPanel>
          </div>
          </div>
       </apex:form> 
     </div>

  <!-- Custom Js -->
  <apex:includeScript value="{!URLFOR($Resource.JSZIP, 'jQuery.min.js')}"/>

  <!-- jQuery Js -->
  <apex:includeScript value="{!URLFOR($Resource.JSZIP, 'bootstrap.js')}"/>

    <script>        
        function backToSearchAll(){
            window.open('{!$Label.SERVER_PATH}apex/JobSearch?recordTypeName={!jobs.RecordType.Name}','_self');
        }       
     </script>
   </body>

  <br/><br/><br/>
   <footer style="background-color:rgba(40,42,43,1);display: block;padding: 1.8rem;">
        <p>Copyright 2002<script>new Date().getFullYear()>2002&&document.write("-"+new Date().getFullYear());</script>-2018. GrowthFocus | All Rights Reserved |
        <a style="color:#b9b9b9;" href=" http://www.growthfocus.com.au/privacy-policy-2/">Privacy Policy</a> | <a style="color: #b9b9b9;" href=" http://www.growthfocus.com.au/sitemap.xml">Site Map</a></p>
   </footer>
</apex:page>

Can anyone spot the error.Thanks for your time!

Improve this question
4
  • 2
    Please include the relevant sections of your page code in your question, rather than directing readers to an external site.
    – David Reed ♦
    Jun 24, 2018 at 20:55
  • Hi @DavidReed I have update question with code of the page. Thanks for your time!
    – Dnyaneshwar
    Jun 25, 2018 at 8:50
  • Are you using it in classic or lightning.
    – Pranay Jaiswal
    Jun 25, 2018 at 8:52
  • Classic....But this page has been exposed via site and there these meta tags are not working.
    – Dnyaneshwar
    Jun 25, 2018 at 9:20

2 Answers 2

Reset to default
1

Posted as an answer to give more space...

Once you'd done what Daniel said, I think the next problem is that you've got the canonical URL wrong. Your page is at https://partsandbo-templetonportal.cs57.force.com/apex/JobDetails?jobId=a027F00000BhBD1QAN. But you have:

<meta content="https://partsandbo-templetonportal.cs57.force.com/JobSearch?JobSite=Selling_a_Business_UK&amp;jobId=a027F00000BhBD1QAN" property="og:url" />

Those URLs do not match. The idea of og:url is to tell Facebook what the URL should be without any extra like parameters (e.g. session ids). Facebook reads og:url first, then gets the properties from that other URL. The properties you see in the FB debugger now are the ones from the og:url URL, which doesn't have og:image and so on set up. So, you just need to fix that og:url tag to something like this:

<meta content="https://partsandbo-templetonportal.cs57.force.com/apex/JobDetails?jobId=a027F00000BhBD1QAN" property="og:url" />
Improve this answer
4
  • In header i have used html-prefix="og: ogp.me/ns# fb: ogp.me/ns/fb# article: ogp.me/ns/article#" is that correct?
    – Dnyaneshwar
    Jul 15, 2018 at 11:24
  • Hi Aidan, Thanks a lot for the reply. I corrected that error...in code and in question here......Now linkedIn shows some Image But for facebook there is not image.
    – Dnyaneshwar
    Jul 15, 2018 at 13:55
  • Facebook caches the information that it has on links. So, after you change your page, you need to go to developers.facebook.com/tools/debug then enter your url and press the button to "Scrape Again". I just did that, and the image is showing now
    – Aidan
    Jul 15, 2018 at 13:59
  • Cool Thanks...Thanks for all the help.... :) Few days ago i had given up on this issue.
    – Dnyaneshwar
    Jul 15, 2018 at 15:52
7
+50

I can tell you what the error is, but I don't know how to fix it at this stage.

The answers you seek are revealed via Test Whether Facebook User-Agent Is Handled Properly.

When Facebook requests that page using the user-agent string Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Mobile/14G60 [FBAN/FBIOS;FBAV/138.0.0.10.91;FBBV/68347313;FBDV/iPhone8,2;FBMD/iPhone;FBSN/iOS;FBSV/ the response changes.

You can see the response via the See exactly what our scraper sees for your URL.

In that case it is seeing:

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="/static/111213/js/perf/stub.js" type="text/javascript"></script><script src="/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript" type="text/javascript"></script><script src="/jslibrary/1521488830000/ui-sfdc-javascript-impl/SfdcCore.js" type="text/javascript"></script><script src="/static/111213/js/picklist4.js" type="text/javascript"></script><script src="/jslibrary/1526059412000/sfdc/VFState.js" type="text/javascript"></script><script src="/resource/1527138616000/JSZIP/jQuery.min.js" type="text/javascript"></script><script src="/resource/1527138616000/JSZIP/bootstrap.js" type="text/javascript"></script><script>(function(UITheme) {
    UITheme.getUITheme = function() { 
        return UserContext.uiTheme;
    };
}(window.UITheme = window.UITheme || {}));</script>
</head>
<body>

<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta http-equiv="Expires" content="Mon, 01 Jan 1990 12:00:00 GMT">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1">
<meta content="width=device-width, initial-scale=1" name="viewport">

My guess is that something in the site is altering the body head based on the user-agent and is either intentionally or inadvertently stripping out the extra meta elements.

I see you have defined applyBodyTag="false". I'd take it a step further and also use applyHtmlTag="false". Hopefully that will give you full control of the head tag.

Improve this answer
2
  • 1
    I can confirm that I've used the technique Daniel suggested, of having applyBodyTag and applyHtmlTage as false, then defining my own head and body tags. That works for both Facebook OG, and Twitter cards. In fact, I did a Lightning Community with public articles like this. The VF page showed the right metadata to Facebook and Twitter, but just immediately ran some JS to redirect to the community (where I couldn't control the meta directly)
    – Aidan
    Jun 29, 2018 at 14:39
  • @aidan I tried both the tags and its not working....Can you please show me how you have achieved it
    – Dnyaneshwar
    Jul 12, 2018 at 17:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .