I don’t see a problem opening that post in the debugger, there’s no error shown.
Also, if you experience problems with a plugin (not just Yoast SEO), try updating it first. The bugs might have already been resolved.
@pascal — if you looked at the post in the debugger, then you wouldn’t have seen an error because it would have been the second time Facebook scrapes the post. The error only occurs the first time a URL is entered into the debugger. This issue happens to me for each and every post as well… I have gotten into the habit of debugging each new URL twice immediately upon posting to make sure this issue is avoided.
This is what I am suspecting. I will inform my client of the necessity to scrape new info after posting new products if he wants it to show immediately after publishing. It seems to be the only solution..
Thank you for confirming. If somebody has any other ideas, please let me know.
For more info on this you can also visit this link:
https://wpml.org/forums/topic/facebook-open-graph-not-working-on-duplicate-pages/
@marcusfuto: I just now found this plugin and thought of this thread right away! I haven’t tried it yet, but I definitely will! I hope this helps you and your client 🙂
Facebook Open Graph Scraper
Hmm, after looking into it a bit further, Facebook is actually aware of this issue in regards to images, and says:
There are two ways to avoid this and have images render on the first Like or Share action:
1. Pre-cache the image with the URL Debugger
Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.
2. Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
Running the Facebook debugger, as we’re already doing, is the first suggestion, but it’s annoying and time-consuming.
So, adding the “temporary fix” code from here (found via the wpml link above) implements the required og tags, as per Facebook’s second suggestion. I’ve tested this and the height and width have now been added to my og metadata, but I haven’t had the chance to post anything new and see if it works.
Also note that the Facebook Open Graph Scraper plugin’s author says:
This plugin only tells Facebook to empty its Open Graph cache, so that you always have the newest images and heading when people share your pages.
It might still be a good solution to help cover all potential scenarios, but then again, the plugin might not be useful if you don’t update posts often, and mostly just publish new ones… Likewise, it’s my assumption that one would only want the Facebook Open Graph cache cleared if changes were made to the relevant og metada (title, description, image). I’ve asked a few questions regarding how the plugin works, feel free to follow along…
hey!
Thanks for that. I have actually tried both options.
I agree with your arguments on the facebook scrape plugin.
The width and height are actually there, but still it does not work..
looks like this nowadays.
haha, I have tried everything. But I will just let my client create a facebook developer account and scrape himself. I think it is very unprofessional. But what can I do.
<!-- This site is optimized with the Yoast SEO plugin v3.0.7 - https://yoast.com/wordpress/plugins/seo/ -->
<title>Coast Classics • COMPANY • Classic Cars</title>
<link rel="stylesheet" href="http://www.coast-classics.com/wp-content/plugins/sitepress-multilingual-cms/res/css/language-selector.css?v=3.3.5&f72cd8" type="text/css" media="all" />
<meta name="description" content="With indepth knowledge skilled craftsmanship understanding of history and attention to detail Coast Classics are experts breathing life back to classic cars"/>
<meta name="robots" content="noodp,noydir"/>
<link rel="canonical" href="http://www.coast-classics.com/company" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:image:width" content="978" />
<meta property="og:image:height" content="500" />
<meta property="og:title" content="Coast Classics • COMPANY • Classic Cars" />
<meta property="og:description" content="With indepth knowledge skilled craftsmanship understanding of history and attention to detail Coast Classics are experts breathing life back to classic cars" />
<meta property="og:url" content="http://www.coast-classics.com/company" />
<meta property="og:site_name" content="Coast Classics" />
<meta property="article:publisher" content="https://www.facebook.com/Coast-Classics-126559650763546" />
<meta property="fb:admins" content="503505115" />
<meta property="og:image" content="http://www.coast-classics.com/wp-content/uploads/2015/01/cover.jpg" />
<meta property="og:image:width" content="978" />
<meta property="og:image:height" content="500" />
<!-- / Yoast SEO plugin. -->
I wonder why you’ve got og:image:width and og:image:height twice in there? For me they only appear once each… I doubt that would make a difference but maybe it’s worth looking into…
Thanks for noting that!
I guess it might be that yoast has updated to include it by its own. So that the code I have in functions is doubling it.
hmmm. I will look into this.
Hello!
I tried to remove the following fix I had in by functions.php:
/**
* Temporary fix
* OpenGraph add a og:image:width and og:image:height for FB async load of og:image issues
*
* https://github.com/Yoast/wordpress-seo/issues/2151
* https://developers.facebook.com/docs/sharing/webmasters/optimizing#cachingimages
*/
function WPSEO_OpenGraph_Image() {
global $wpseo_og;
// will get a array with images
$opengraph_images = new WPSEO_OpenGraph_Image( $wpseo_og->options );
foreach ( $opengraph_images->get_images() as $img ) {
// this block of code will first convert url of image to local path
// for faster process of image sizes later
$upload_dir = wp_upload_dir();
$img_src = str_replace($upload_dir['url'], $upload_dir['path'], $img);
$size = getimagesize($img_src);
// display of this tags with Yoast SEO plugin
$wpseo_og->og_tag( 'og:image:width', $size[0] );
$wpseo_og->og_tag( 'og:image:height', $size[1] );
}
}
if(class_exists('WPSEO_OpenGraph_Image')) {
add_filter("wpseo_opengraph", "WPSEO_OpenGraph_Image");
}
When removing it it removed both sets of og:height and og:width..
So the function seems to be calling for it twice. Any thoughts on this?
Hmm, no, none at all. I’ve double-checked my own source code and the tags only appear once each. And I double-checked the code I’m using in my functions file and it matches yours exactly line by line.
But I do notice a few differences in the output generated by Yoast, so the only thing I can think of is that it’s got to be something in our plugin settings, because it does look like we’re both using the same version…
<!-- This site is optimized with the Yoast SEO plugin v3.0.7 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="Keen to get away from Ontario for the winter, I decided to take a Western Canada road trip to British Columbia. The biggest hurdle was transportation."/>
<meta name="robots" content="noodp,noydir"/>
<link rel="canonical" href="http://niackery.com/journiackery/travel-tales/western-canada-road-trip/" />
<link rel="publisher" href="http://www.google.com/+JulieDupuis"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="375" />
<meta property="og:title" content="Western Canada Road Trip | JourNiackery" />
<meta property="og:description" content="Keen to get away from Ontario for the winter, I took a Western Canada road trip to British Columbia. The biggest hurdle was transportation." />
<meta property="og:url" content="http://niackery.com/journiackery/travel-tales/western-canada-road-trip/" />
<meta property="og:site_name" content="Niackery" />
<meta property="article:publisher" content="http://www.facebook.com/niackery" />
<meta property="article:author" content="http://www.facebook.com/niackery" />
<meta property="article:tag" content="City Walks" />
<meta property="article:tag" content="CouchSurfing" />
<meta property="article:tag" content="Country Walks" />
<meta property="article:tag" content="Road Trips" />
<meta property="article:section" content="Travel Tales" />
<meta property="article:published_time" content="2016-01-14T19:50:33+00:00" />
<meta property="article:modified_time" content="2016-01-15T09:42:56+00:00" />
<meta property="og:updated_time" content="2016-01-15T09:42:56+00:00" />
<meta property="fb:admins" content="519320502" />
<meta property="og:image" content="http://niackery.com/wp-content/uploads/2016/01/Invermere-Calgary-Hitchhiking-Moose-Meadows.jpg" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content="Keen to get away from Ontario for the winter, I took a Western Canada road trip to British Columbia. The biggest hurdle was transportation."/>
<meta name="twitter:title" content="Western Canada Road Trip | JourNiackery"/>
<meta name="twitter:site" content="@niackery"/>
<meta name="twitter:image" content="http://niackery.com/wp-content/uploads/2016/01/Invermere-Calgary-Hitchhiking-Moose-Meadows.jpg"/>
<meta name="twitter:creator" content="@niackery"/>
<meta itemprop="name" content="Western Canada Road Trip | JourNiackery">
<meta itemprop="description" content="Keen to get away from Ontario for the winter, I took a Western Canada road trip to British Columbia. The biggest hurdle was transportation.">
<meta itemprop="image" content="http://niackery.com/wp-content/uploads/2016/01/Invermere-Calgary-Hitchhiking-Moose-Meadows.jpg">
<!-- / Yoast SEO plugin. -->
But by the way, I only just added the “temporary fix” code the other day when I found it, and before I did that, I had checked the Yoast output to make sure Yoast hadn’t added it themselves, and no it wasn’t there until I added the “temporary fix” code… So it’s not Yoast doing it…
If you figure out, I’d be curious to know!
