Getting Meta About Meta-Tags (and Facebook Open Graph tags)
March 11, 2020 7:19 PM Subscribe
When I post my blog posts on Facebook as posts (on my business page, my profile, or elsewhere), Facebook can no longer see the featured (or any) image. If I posted them in comments, they post with no problem. This has something to do with the open graph tag og:image:secure_url. This has been maddening. Please help...with small words.
I have a (Wordpress.org-based) website. I have a blog on my website. I have photos on the posts on my blog on my website. I have a headache.
Twitter likes my photos. LinkedIn likes my photos. (My mother likes my photos.) Facebook hates my blog photos and posts a big blank spot whenever I post the blog post to Facebook as a post; however, if I post it as a comment, it works perfectly.
I use All-in-One SEO Pack. (So, at least for now, Yoast-related suggestions won't help.) My Social Meta image settings are set for Select OG:Image Source as "First Image" and I have a default OG image set. In my actual posts, I believe have the social settings set properly, as all other platforms (Twitter, LinkedIn, etc) work fine.
Some background about procedure and changes over time:
* Everything worked fine until about the time my SSL certificate was added. (Of which, more later.)
* If I use the Facebook developer sharing debugger; it scrapes, the right photo appears.
* When I click the FB share button (on the computer or mobile) and a draft of a Facebook post pops up with the right photo. But once the post goes live, the graphic is gone. (The same goes if I just copy the URL into a blank post.)
* After doing quite a bit of research, I learned that you can go into Facebook, use Publisher Tools, click on the offending post, click on the three dots on the right side of the ensuing post and select "Refresh share attachment". When I learned to do this, SOME of my old posts that had this problem suddenly showed the right graphics. Most, especially those from the past year+ did not.
* After doing more research, I learned that I can use the FB developer OBJECT (not sharing) debugger. The error I get when enter the post's URL is:
==
Object at URL 'https://my-whatever-url' of type 'website' is invalid because the given value '(Image)' for property 'og:image:url' could not be parsed as type 'url'.
==
* When I check the page source code for anywhere on my site and look at the All-in-One SEO section, the meta tag says:
Aha. So, the problem isn't the size or height-to-width ratio. Facebook is looking for og:image:url and my All-In-One SEO Pack for my secure site is giving it og:image:url
My web person thought the problem was solved (while I was traveling and couldn't see it) and said she does not use All-in-One SEO. She suggested I add my Facebook Admin ID and Facebook App ID to All-in-One. I did, but that had no impact.
Without graphics, people will not click on blog posts on my FB business page. This is...bad. It's also been giving me a headache for a year and a half. Half-way fixes, like manually adding the blog posts URL to FB, watching the associated photo appear, ADDED a duplicate of that same photo, deleting the original one, and submitting, no longer works.
I'm at my wit's end. I feel like my posts seem incredibly unprofessional, and my colleagues, who all share one another's posts, have been frustrated, as well. Any guidance will be appreciated. If it's something I can do in Wordpress, I'll try it. If it's more complicated code, I'll forward it to my web person.
Thank you in advance.
I have a (Wordpress.org-based) website. I have a blog on my website. I have photos on the posts on my blog on my website. I have a headache.
Twitter likes my photos. LinkedIn likes my photos. (My mother likes my photos.) Facebook hates my blog photos and posts a big blank spot whenever I post the blog post to Facebook as a post; however, if I post it as a comment, it works perfectly.
I use All-in-One SEO Pack. (So, at least for now, Yoast-related suggestions won't help.) My Social Meta image settings are set for Select OG:Image Source as "First Image" and I have a default OG image set. In my actual posts, I believe have the social settings set properly, as all other platforms (Twitter, LinkedIn, etc) work fine.
Some background about procedure and changes over time:
* Everything worked fine until about the time my SSL certificate was added. (Of which, more later.)
* If I use the Facebook developer sharing debugger; it scrapes, the right photo appears.
* When I click the FB share button (on the computer or mobile) and a draft of a Facebook post pops up with the right photo. But once the post goes live, the graphic is gone. (The same goes if I just copy the URL into a blank post.)
* After doing quite a bit of research, I learned that you can go into Facebook, use Publisher Tools, click on the offending post, click on the three dots on the right side of the ensuing post and select "Refresh share attachment". When I learned to do this, SOME of my old posts that had this problem suddenly showed the right graphics. Most, especially those from the past year+ did not.
* After doing more research, I learned that I can use the FB developer OBJECT (not sharing) debugger. The error I get when enter the post's URL is:
==
Object at URL 'https://my-whatever-url' of type 'website' is invalid because the given value '(Image)' for property 'og:image:url' could not be parsed as type 'url'.
==
* When I check the page source code for anywhere on my site and look at the All-in-One SEO section, the meta tag says:
Aha. So, the problem isn't the size or height-to-width ratio. Facebook is looking for og:image:url and my All-In-One SEO Pack for my secure site is giving it og:image:url
My web person thought the problem was solved (while I was traveling and couldn't see it) and said she does not use All-in-One SEO. She suggested I add my Facebook Admin ID and Facebook App ID to All-in-One. I did, but that had no impact.
Without graphics, people will not click on blog posts on my FB business page. This is...bad. It's also been giving me a headache for a year and a half. Half-way fixes, like manually adding the blog posts URL to FB, watching the associated photo appear, ADDED a duplicate of that same photo, deleting the original one, and submitting, no longer works.
I'm at my wit's end. I feel like my posts seem incredibly unprofessional, and my colleagues, who all share one another's posts, have been frustrated, as well. Any guidance will be appreciated. If it's something I can do in Wordpress, I'll try it. If it's more complicated code, I'll forward it to my web person.
Thank you in advance.
Response by poster: Sorry, since it happens for every page, I didn't think anything in the URL would be useful. (I was kind of expecting, "Yeah, when you have a secure site, you have plink your plonk in the pinky field" or whatever.
So, to give you what you need, I use the developer object debugger here:
https://developers.facebook.com/tools/debug/og/object/
and put in pretty much any post link. (Most posts have the first graphic as something created in Canva using their "Facebook graphic" template for size.)
==
Object at URL 'https://juliebestry.com/2020/03/10/paper-doll-says-the-tax-man-cometh-organize-your-tax-forms/' of type 'website' is invalid because the given value '(Image)' for property 'og:image:url' could not be parsed as type 'url'.
==
For what it's worth, when I use the object debugger, even when I get such a warning, down at the bottom of the page it says, "When shared, this is what will be included" and it shows me the photo that's supposed to be there. And I find multiple (unsolved) problems on the web with people whose posts' photos don't show up on FB posts (but work fine in comments) once their sites have meta tags of og:image:secure_url instead of og:image:url.
(FWIW, almost every graphic on my site dating back 13 years is going to be the same width; smaller that FB wants, but that's currently not under my control; but none of this happened until we added the SSL certificate about 18 months ago.)
I hope this is more useful. I have no idea what I'm talking about, I just know how to search for patterns.
posted by The Wrong Kind of Cheese at 10:26 PM on March 11, 2020
So, to give you what you need, I use the developer object debugger here:
https://developers.facebook.com/tools/debug/og/object/
and put in pretty much any post link. (Most posts have the first graphic as something created in Canva using their "Facebook graphic" template for size.)
==
Object at URL 'https://juliebestry.com/2020/03/10/paper-doll-says-the-tax-man-cometh-organize-your-tax-forms/' of type 'website' is invalid because the given value '(Image)' for property 'og:image:url' could not be parsed as type 'url'.
==
For what it's worth, when I use the object debugger, even when I get such a warning, down at the bottom of the page it says, "When shared, this is what will be included" and it shows me the photo that's supposed to be there. And I find multiple (unsolved) problems on the web with people whose posts' photos don't show up on FB posts (but work fine in comments) once their sites have meta tags of og:image:secure_url instead of og:image:url.
(FWIW, almost every graphic on my site dating back 13 years is going to be the same width; smaller that FB wants, but that's currently not under my control; but none of this happened until we added the SSL certificate about 18 months ago.)
I hope this is more useful. I have no idea what I'm talking about, I just know how to search for patterns.
posted by The Wrong Kind of Cheese at 10:26 PM on March 11, 2020
Best answer: I had a beast of a time getting my site's open graph stuff to work. Works fine now. Facebook, unhelpfully, expects good open graph tags and doesn't care what else you do. I may not have a real solution for you. But hopefully this will help.
I'm looking at the source code for the page you gave in your comment. in the open graph links it has :
meta property="og:image" content="(Image)"
It should have something like :
meta property="og:image" content="https://xyz.com/images/flower.jpg"
So it looks like your SEO package is dropping the ball here. I don't use WP or SEO tools, so I can't help with that. But that should help you track it down. Sadly, the open graph tags need to go in the head element of your html, so you can't just include them in your post.
posted by y6y6y6 at 11:57 AM on March 12, 2020 [1 favorite]
I'm looking at the source code for the page you gave in your comment. in the open graph links it has :
meta property="og:image" content="(Image)"
It should have something like :
meta property="og:image" content="https://xyz.com/images/flower.jpg"
So it looks like your SEO package is dropping the ball here. I don't use WP or SEO tools, so I can't help with that. But that should help you track it down. Sadly, the open graph tags need to go in the head element of your html, so you can't just include them in your post.
posted by y6y6y6 at 11:57 AM on March 12, 2020 [1 favorite]
Best answer: Oh....... I just noticed you have two sets of open graph tags. One good, one bad. Not sure it that is the problem.....
posted by y6y6y6 at 12:02 PM on March 12, 2020 [1 favorite]
posted by y6y6y6 at 12:02 PM on March 12, 2020 [1 favorite]
Response by poster: y6y6y6, why would the og: image be an url? What the point of og:image:url be, then? (I'm not being snarky. I don't know.
And I can have my web person add it to the head element if we know what's awry.
But you're thinking that little three-liner of meta properties above the title tag is what's going on? Even though the FB object debugging error is complaining about the og:image:url, not the og:image?
posted by The Wrong Kind of Cheese at 2:07 PM on March 12, 2020
And I can have my web person add it to the head element if we know what's awry.
But you're thinking that little three-liner of meta properties above the title tag is what's going on? Even though the FB object debugging error is complaining about the og:image:url, not the og:image?
posted by The Wrong Kind of Cheese at 2:07 PM on March 12, 2020
This thread is closed to new comments.
This might be a situation where the actual links would be useful. Diagnosing OpenGraph tags without examples is pretty hard.
posted by sideshow at 8:41 PM on March 11, 2020 [2 favorites]