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!