No OG Image when sharing

(@opajaap)

A link please…

Thread Starter

(@roxchou)

https://d2dinc.org/shelter-events-photos/

and here

Thank you!

Plugin Author

(@opajaap)

You have other sharing plugins or settings that interfere with the photo oriented wppa social media feature. Use only the wppa embedded social media feature.

If you want to share the page and not the photo, use shortcode [wppa type=”share”][/wppa]

Thread Starter

(@roxchou)

Hi Jacob, I disabled the other sharing plugins for pages, wppa and all photos but I still have the same issue.

Thank you for your time!

Plugin Author

(@opajaap)

The page source of https://d2dinc.org/shelter-events-photos/wppaspec/oc1/cv0/ab1/ptShelter%20dinner%20August%202015 says:


<!DOCTYPE html>
<html  xmlns:fb="https://www.facebook.com/2008/fbml"  xmlns:og="https://ogp.me/ns#" lang="en-US">
<head>

		<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11" />
	<link rel="pingback" href="https://D2Dinc.org/xmlrpc.php" />	
<title>Shelter Events Photos – Dast2Dast</title>
<link rel='dns-prefetch' href='//D2Dinc.org' />
<link rel='dns-prefetch' href='//s0.wp.com' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="Dast2Dast &raquo; Feed" href="https://D2Dinc.org/feed/" />
<link rel="alternate" type="application/rss+xml" title="Dast2Dast &raquo; Comments Feed" href="https://D2Dinc.org/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Dast2Dast &raquo; Shelter Events Photos Comments Feed" href="https://D2Dinc.org/shelter-events-photos/feed/" />

<!-- WPPA+ Og Share data -->
<meta property="og:site_name" content="Dast2Dast" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://d2dinc.org/shelter-events-photos/?occur=1&cover=0&album=1&photo=ShelterdinnerAugust2015" />
<meta property="og:title" content="Shelter dinner August 2015" />
<meta property="og:image" content="https://D2Dinc.org/wp-content/uploads/wppa/218.jpg?ver=1" />
<meta property="og:description" content="See this image on Dast2Dast:" />
<!-- WPPA+ End Og Share data -->

<!-- WPPA+ BEGIN Facebook meta tags -->
	<meta property="fb:admins" content="1190758087" />
	<meta property="fb:app_id" content="609392842464216" />
<link rel="image_src" href="https://D2Dinc.org/wp-content/uploads/wppa/218.jpg?ver=1" />
<!-- WPPA+ END Facebook meta tags -->
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/D2Dinc.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.6.1"}};
			!function(a,b,c){function d(a){var c,d,e,f,g,h=b.createElement("canvas"),i=h.getContext&&h.getContext("2d"),j=String.fromCharCode;if(!i||!i.fillText)return!1;switch(i.textBaseline="top",i.font="600 32px Arial",a){case"flag":return i.fillText(j(55356,56806,55356,56826),0,0),!(h.toDataURL().length<3e3)&&(i.clearRect(0,0,h.width,h.height),i.fillText(j(55356,57331,65039,8205,55356,57096),0,0),c=h.toDataURL(),i.clearRect(0,0,h.width,h.height),i.fillText(j(55356,57331,55356,57096),0,0),d=h.toDataURL(),c!==d);case"diversity":return i.fillText(j(55356,57221),0,0),e=i.getImageData(16,16,1,1).data,f=e[0]+","+e[1]+","+e[2]+","+e[3],i.fillText(j(55356,57221,55356,57343),0,0),e=i.getImageData(16,16,1,1).data,g=e[0]+","+e[1]+","+e[2]+","+e[3],f!==g;case"simple":return i.fillText(j(55357,56835),0,0),0!==i.getImageData(16,16,1,1).data[0];case"unicode8":return i.fillText(j(55356,57135),0,0),0!==i.getImageData(16,16,1,1).data[0];case"unicode9":return i.fillText(j(55358,56631),0,0),0!==i.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity","unicode9"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
.
.
.
etc

However, the fb debugger ( https://developers.facebook.com/tools/debug/ )says that the scraped url reads:

<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="https://ogp.me/ns#" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="pingback" href="https://D2Dinc.org/xmlrpc.php">
<title>Shelter Events Photos – Dast2Dast</title>
<link rel="dns-prefetch" href="//D2Dinc.org">
<link rel="dns-prefetch" href="//s0.wp.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//s.w.org">
<link rel="alternate" type="application/rss+xml" title="Dast2Dast ? Feed" href="https://D2Dinc.org/feed/">
<link rel="alternate" type="application/rss+xml" title="Dast2Dast ? Comments Feed" href="https://D2Dinc.org/comments/feed/">
<link rel="alternate" type="application/rss+xml" title="Dast2Dast ? Shelter Events Photos Comments Feed" href="https://D2Dinc.org/shelter-events-photos/feed/">
<!-- WPPA+ BEGIN Facebook meta tags --><meta property="fb:admins" content="1190758087">
<meta property="fb:app_id" content="609392842464216">
<!-- WPPA+ END Facebook meta tags --><script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/D2Dinc.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.6.1"}};
			!function(a,b,c){function d(a){var c,d,e,f,g,h=b.createElement("canvas"),i=h.getContext&&h.getContext("2d"),j=String.fromCharCode;if(!i||!i.fillText)return!1;switch(i.textBaseline="top",i.font="600 32px Arial",a){case"flag":return i.fillText(j(55356,56806,55356,56826),0,0),!(h.toDataURL().length<3e3)&&(i.clearRect(0,0,h.width,h.height),i.fillText(j(55356,57331,65039,8205,55356,57096),0,0),c=h.toDataURL(),i.clearRect(0,0,h.width,h.height),i.fillText(j(55356,57331,55356,57096),0,0),d=h.toDataURL(),c!==d);case"diversity":return i.fillText(j(55356,57221),0,0),e=i.getImageData(16,16,1,1).data,f=e[0]+","+e[1]+","+e[2]+","+e[3],i.fillText(j(55356,57221,55356,57343),0,0),e=i.getImageData(16,16,1,1).data,g=e[0]+","+e[1]+","+e[2]+","+e[3],f!==g;case"simple":return i.fillText(j(55357,56835),0,0),0!==i.getImageData(16,16,1,1).data[0];case"unicode8":return i.fillText(j(55356,57135),0,0),0!==i.getImageData(16,16,1,1).data[0];case"unicode9":return i.fillText(j(55358,56631),0,0),0!==i.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity","unicode9"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script><style type="text/css">
img.wp-smiley,
img.emoji {
.
.
.

This means that facebook sees the url without the querystring. This means that /ptShelter dinner August 2015 or – in the share link – &wppa-photo=Shelter dinner August 2015 is missing.

Additionally to my previous recommendation to remove other sharing tools, make sure you do not have a plugin/setting that removes querystrings from urls.

Notes:
– To make troubleshooting easier, Tick the box in Table IX-A3, as recommended here: https://www.ads-software.com/support/topic/table-ix-a3-allow-wppa-debugging/
– Also: ass the twitter share button, then you can better see what is happening with the share url.
– Once fb has ‘seen’ an url, the resulta are remembered, so when you change the page content, make sure you re-scrape the url in the fb debugger!

Thread Starter

(@roxchou)

Hi Jacob,

thank you for your reply and recommendation. I have enabled WPPA debug and twitter share button. I don’t have any plugins installed that remove querystrings from urls.

What I find interesting is that og image is working property for wppa photo of the day. For example, when I share this link, the image and title is posted accurately as photo of the day. However, sharing any other pics from the album results in the og image and title/description missing.

Thanks again for your time and support!

Plugin Author

(@opajaap)

Found it.

Fb removes spaces in urls, so when the photo name contains spaces, the fb scraper uses an url with a photo name that does not exist. This means that wppa+ decides to omit the og:image because the photo is unknown.

I tried to replace spaces by %20 or + but fb persists in destruction of the urls.

My recommendation is to untick Table IV-A3, or to change the spaces in photo names to _

Thread Starter

(@roxchou)

Hi Jacob,

you sure did find it and solved it for me. Thank you so much. Un-checking IV-A3 resolved it for me.

Thank you very much for your time, support and patience. You’ve been very gracious!

Thread Starter

(@roxchou)

I just noticed that one thing was not resolved. When I share the page of the photo album where I have inserted [wppa type="cover" album="1" size="auto" align="center"][/wppa], there is no og image.

Thank you for your assistance.

Plugin Author

(@opajaap)

That is correct. There is only an og:image when a photo is specified in thr shortcode or url

Thread Starter

(@roxchou)

Okay thank you for your guidance again!

Plugin Author

(@opajaap)