Recently we noticed that when we’d try to make a post on Facebook and include the URL of either a blog post or our website, the open graph information wasn’t displaying. No image, no page title, no nothing. Just an error message. “No open graph info for you. You suck.”
Ok, maybe that's not exactly what the message stated. It still hurt, ok?
First things first, this post isn’t about what open graph protocol is and why it’s important. Briefly, it’s a way to control the look of your social shares. If you want a deeper dive, here’s a great article: Go take a peak and let us know when you’re back.
You’re back? Great. Ok, so why is open graph important? Because when you’re sharing links across social media you want it to stand out as best it can which means including eye-catching images, fun and snappy titles and copy.
Often times when your open graph is having issues, the wrong image is displayed—or in our case, no. You can start to diagnose the problem by using Meta’s (f.k.a. Facebook) Sharing Debugger tool. On this page you’ll find information to give you insight on what meta information is getting scraped from your site to then be displayed in a Facebook post for example. If there are any warnings, they’ll let you know so you can go fix it.
At first, everything appeared to be in order…besides the fact that it wasn’t scraping the OG image or anything else. But then we noticed the canonical URL looked weird. What is a canonical URL you ask? Here’s what Google Search Console has to say:
A canonical URL is the URL of the best representative page from a group of duplicate pages, according to Google. For example, if you have two URLs for the same page (such as example.com?dress=1234 and example.com/dresses/1234), Google chooses one as canonical. Similarly, if you have multiple pages that are nearly identical, Google can group them together (for example, pages that differ only by the sorting or filtering of the contents, such as by price or item color) and choose one as canonical. Google can only index the canonical URL from a set of duplicate pages. A duplicate can be in a different domain than its canonical (such as example.com/mypage and example2.com/myduplicate).
Errrr… what? Basically, sometimes search engines get confused if there’s duplicate content, so you want to make sure your Global Canonical Tag is set so that Google can easily know which page is the “real” one. This helps improve SEO. You can also bury a peeled potato in the backyard under a full moon to improve SEO. And cure your eczema. And your Megabreth®.
In Webflow, our platform of choice and where we built bivinsbrothers.com, they’ve happily put a section in the SEO tab in your site settings where you can enter your canonical URL.
And I did exactly this, entering https://www.bivinsbrothers.com/ then saving and publishing. And then…ghosts in the machine. For reasons unexplained, the canonical URL wasn’t: https://www.bivinsbrothers.com/ but https://www.bivinsbrothers.com/bivinsbrothers.com. Fortunately, my eye went to this as I scanned the Sharing Debugger and recognized this as the most likely culprit for our open graph woes. Not sure how or why this hiccup happened, though it’s almost certainly 100% my fault.
I went back into my Webflow project, deleted the URL I’d set for the canonical, republished, and then returned to the Sharing Debugger. I scraped the site and voila! Graphs wide open for business. Strangely enough, I went back to Webflow after this and re-entered https://www.bivinsbrothers.com/ as our canonical URL expecting it might break the open graph again…but it didn’t. Tis the season for spooks I guess.
If your open graph info is not displaying, visit the Meta For Developers sharing debugger. Check to see what warnings they’re showing but also take a look at all the scraped information to make sure it’s correct. And if you’re setting your canonical URL in Webflow, make sure the correct URL is showing up in the scrape.
