â–Ľ
Streaming live at 10am (PST)

Odd Open Graph fail

So I sent a link to a friend via Facebook messenger for a page on my new Webflow site, and she got a preview of an entirely different site of mine (i.e., a different graphic and a different link).

Screenshot of my Open Graph Settings for the page I sent a link to within Facebook Messenger:

Screenshot of what appeared in my message to my friend in Facebook Messenger:

So, as you can see, I put in the URL for one website, and it pulled the Open Graph image from another of my sites.

A probably relevant piece of information: I am not publishing my site to Webflow’s servers, but to a third-party web host, which is also hosting the site who’s Open Graph image populates the message by mistake.

But I still don’t get the problem: the sites are stored in different folders that are pointed to by entirely different URLs. And the files in the folder are the correct ones, created by Webflow.

See screenshot below:

Might anyone have an idea what could be causing this odd issue, and what could be the means to solve it?

(I suppose if no one on this forum might know what’s causing this problem, the next place for me to turn would be the technical support for my host, but I thought I’d try here first.)

Thanks!


Here is the live link to the page in question: https://www.chuckbraman.com/quintet

Here is my site Read-Only: https://preview.webflow.com/preview/chuckbraman?utm_medium=preview_link&utm_source=designer&utm_content=chuckbraman&preview=61d59a35585180f1e37a292d977edd9a&mode=preview

So I’ve had the tech folks at my webhost Siteground look into this, and they said, in part:

The main page of the website shows a proper preview as it has been
configured to do so. From our end upon testing the subpage /quintet
doesn’t have a preview as well.

Please, have in mind that this is considered website development not a
technical issue, which is out of the scope of our support.

In case you need further assistance on the matter, I would recommend for
you to consider hiring professional assistance.

Despite Siteground’s assurance regarding the home page, when on Facebook I posted a link to the homepage, instead of showing the open graph photo referenced, showed a blank placeholder:

http://bit.ly/2UH3xHy

I would appreciate a lot if someone from the Webflow team could take a look at this and the issue described above. It would help me, of course, but it would also possibly lead to insight with a possible issue regarding the software, which, if that is the case, would also have value to Webflow.

1 Like

Hi @Chuck_Braman!

You can use the facebook debugger to update og image.
https://developers.facebook.com/tools/debug

I think it will help you :wink:

cheers!
Eve Kayser

Thank you very much, @evekayser, that was very fast. And that is a great resource I was unaware of.

Being a designer and not a developer, I don’t know how to interpret the results or what actions may be implied for me to undertake by the information displayed under the heading “Warnings That Should Be Fixed.” Particularly because the correct previews are in fact displayed below, and the data that these warnings indicate as missing are all in fact listed under the heading “Based on the raw tags, we constructed the following Open Graph properties”

But also, isn’t this stuff that’s should be handled by the files that Webflow outputs?

Whoah, I just re-entered the indentical URL into the debugger a second time and got entirely different results. In this case, it again displays an image from the wrong website, as before. The inconsistency, in addition to the problem itself, is baffling.

But I do think I have a lead.

The page that intermittently pulls the incorrect image has a rel-canonical to the website that has that image.

That reassures me that I haven’t entered the Twilight Zone, but still, that shouldn’t be happening, as far as I understand. A rel-canonical is to redirect Google-juice to the referenced site, not to pull images from the referenced site.

The URL in question is https://www.chuckbraman.com/quintet

Hi again @Chuck_Braman!

why are you using this canonical url?

I think removing it you can test if it solves the problem.

Eve Kayser

Hi @evekayser,

The purpose of the canonical URL is to tell Google not to index and rank the page in question, but to rank the similar page on a different website instead.

The reason I have it on this particular page is because this is a site I send to clients that I cold-call, that I want to make a personalized impression on. The site that it is re-canonical-ing (or however you say it) to is a site that I purposely built to be found easily in Google, and is primarily for a different market. I’ve spent years and many thousands of dollars getting that site to rank on the top of page 1. This site (the source of the canonical URL), I don’t particularly care how it ranks, and in fact, it’s better if it doesn’t directly compete.

The other reason to have a rel-canonical is so that Google does not penalize either site for what is substantially the same content.

I suspect if I remove it, that would solve the problem as well. But it would create a different set of problems, of course.

But… whether this would solve it or not… shouldn’t this not be happening?

This would seem, so far at least, to be caused a bug in the software. Could someone from the Webflow team look into this? Thanks.

Hi @Chuck_Braman, the canonical url should be set to your root domain or www domain for chuckbraman.com, facebook is rendering the share preview based on the canonical url.

I am not sure what other problems will happen that you mention, but it is normal to set the canonical url to be your root domain or www domain.

Webflow uses the default domain set in Webflow when hosting in Webflow as the canonical domain, but if you set this to another value then facebook will share the post and preview using the canonical url.

There is no bug in Webflow, it is just that Facebook uses the canonical url for the share.

1 Like

@cyberdave,

Thank you very much for taking the time to look into this and providing the clarifying screenshot.

This site is actually not hosted on Webflow. The code was exported from Webflow, and the site is hosted on Siteground. On Siteground the canonical URL for the site as a whole is set to the www domain for chuckbraman.com. You’ll see that if you type the non-www URL into a browser, it loads the www version.

In Webflow, in the settings for the head tag on that single page, I added the rel-canonical tag for that single page. (You can see that in the screenshot a couple of posts above yours.) My motive is to avoid a penalty for duplicate content, as the content on the two pages on the two sites is very similar, and send any Google-juice back to the other site, which I assume this still achieves.

So when Facebook sees a rel-canonical tag in the head tag of a page, it is normal behavior to put the preview from the other site? If so, this just ends up being an unwanted byproduct that I’ll have to live with.

Anyway, thanks again.