How to fix undetected OG tags on Shopify
The problem happened some days ago. One of Shopify stores I am working on doesn’t display the correct image when we share it to Facebook. At first, I think it’s a problem with missing the Open Graph meta tags (OG tags). But I was wrong. The OG tags were there when I view the page’s source. So, here’s my story how I fix undetected OG tags on Shopify store.
Yet, Facebook Sharing Debugger is still showing a warning about missing OG tags. In front of the Facebook crawler, all OG tags are missing.
My suspicion comes to the Lozad implementations to preload all the product images below the fold. However, even after I’ve removed all of the Lozad implementations, the Facebook Sharing Debugger is still showing the same warning.
The next step I try is, scrolling the Facebook Sharing Debugger page to the bottom, and see this menu: See exactly what our scraper sees for your URL.
But again, I don’t see anything wrong there. The Facebook scraper is able to see all the OG tags on every Shopify store page. Yet, it’s still showing the warning.
After thinking for a while, I try with another page from one of the WordPress sites I’ve been working too. This time, the Facebook Sharing Debugger tool doesn’t show any warning. So, there’s something misses on all of our Shopify store pages.
Once again, I clicked that “See exactly what our scraper sees for your URL”. This time, it’s showing the WordPress page’s source. I immediately notice at the top that WordPress has this attribute on its HTML tag.
prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb#"
So, it looks like something like this:
<html lang="en-US" prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb#">
With curiosity, I added that prefix attribute on the Shopify theme liquid file, and check it on Facebook sharing debugger once again.
Does it work this time? Nope. Or at least, not yet. I click the “Scrape Again” button, but the result is still the same. The warnings are still there.
Then, I notice that the Facebook crawler still sees the old HTML. It’s not seeing the updated HTML with that prefix attribute. No matter how many times I click the “Scrape Again” button.
Without any other options, I try to force Facebook to clear their cache by making an extreme change to the Shopify theme liquid, by removing all the codes there but that “content_for_layout” inside the body tag (after backing the file somewhere else)
I check again on the Facebook Sharing Debugger tool and this time **it works! ** So, I quickly reverted the extreme change I just made, to give bait to the Facebook scraper, to reload their cache.
I am sure it’s not the elegant way to do, but it does the job well.
Therefore, if you happened to know better way to fix this undetected OG tags on Shopify problem, please let me know (DM always opens).