One of our clients called us yesterday afternoon and told us that as of recently, whenever he tries to share a link from his website on Facebook, only the title of the link appears, the description and the image do not. Our client was using the latest version of Joomla, 3.3.1.
We checked the generated HTML code of his website and we noticed that all the Open Graph meta tags were there, specifically og:type, og:title, og:description, and og:image, all of them were properly formatted, and so there wasn’t any reason for the link sharing on Facebook not to work.
We checked the URL on Facebook’s OpenGraph Object Debugger, and it was returning the following error:
Object at URL ‘http://ourclientjoomlawebsite.com/’ of type ‘website’ is invalid because a required property ‘og:type’ of type ‘string’ was not provided.
Hmmm… That’s odd, because we could definitely see the og:type meta property in the HTML code. So we compared the website to another client’s website (which was working) the following way:
- We created a file called test.html from the HTML source of the homepage of the non-working website.
-
We then created another file called test2.html from the HTML source of the homepage of the working website.
-
We uploaded both pages to the root directory of our client’s website (the website with the problem, of course).
-
We started removing code from both files while continuously testing those files on the Facebook’s Open Graph Object Debugger.
-
We reached a point where both files only had the basic HTML tags, and the og:type, og:title, and the og:description meta tags. For some reason, the problem was still there.
-
We then scrolled down to the bottom of the Facebook’s Open Graph Object Debugger page and we clicked on the See exactly what our scraper sees for your URL link (you can find this link under the URLs section next to the Scraped URL field). For some reason, the page with the problem showed a blank page (yes, we know, we don’t like blank pages too), but, the page that was OK was scraped properly.
-
We continued our research, and then, by coincidence, we noticed that even though the content of both files was the exact same, the page that was not working was double the size (in bytes) of the page that was working.
The last point completely puzzled us; why is it that one page is double the size of the other, despite having nearly the exact same content? We knew that by solving this riddle, we would solve the whole issue.
After doing some research, we discovered that HTML gzip compression can cause Facebook to become unable to scrape the website, and so we logged in to the backend of the Joomla site, went to the Global Configuration page, clicked on the Server tab, and changed the Gzip Page Compression value from “Yes” to “No”. We then clicked on Save on the top left.
We then tried to share the link on Facebook, and, surprisingly, the problem was solved! Additionally, Facebook’s URL Scraper was no longer displaying an empty page!
If you have problems sharing links on Facebook, and if you’re sure that all the Open Graph meta tags exist in your HTML code and are properly formatted, then try disabling GZip Page Compression on your Joomla website. If you still see the problem, then check the Facebook’s URL Scraper to see how Facebook sees your website – this should help a lot. If you need help from Joomla professionals to fix this problem, then you’re at the right place. Just contact us and we can solve the problem for you swiftly and for a very affordable price!
Wow thanks for this, I’ve been bouncing my head off of the desk for the last 4 hours trying to solve this! Much appreciated!
Same here, I’ve been bouncing my head on my laptop’s keyboard for a week now trying to figure this out. I normally do not read long texts/articles for solutions. I’m glad I did for this specific issue. Thanks for sharing.
You are wonderful!!! I researched forever trying to solve this issue. There were all my OpenGraph tags in the source code for my site, but Facebook would not present it properly for links. I finally found this post and turned off GZip Compression and Facebook found it right away. I hope that the folks at Joomla realize this and see if there is a work around.
Oh yea! Thank you! This was a pain in the…
But wait a sec.. gzip is a file format and a software application used for file compression and decompression. This means that my server will need to serve uncompressed data which means bigger loading times for my clients and load cost for my server. Why?
Hi Eythymios,
Actually enabling gzip will put more pressure on your server because it’ll need to perform an additional task (zipping the page) before sending it to the browser.
The advantages of using gzip are negligible nowadays, simply because bandwidth is cheap and Internet connection is much faster. By the way, gzip only zips the HTML content, and not media.
Thank you Fadi thank you for your response. I was really fighting over the problem like two weeks in two of my websites and I could not find any solution until I read this post.
I guess the debate then is save bandwidth over saving cpu or cpu over bandwidth. When I run yslow I got an F on gzip. When I clicked on that I read the message:
Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip. Google+ has no problem when posting articles via joomla with enabled Gzip.
Also google recomends gzip compression and many sites go through the effort zipping their css and javascript to get better response times.
Hi Eythymios,
To clarify, the gzip problem with Facebook is a Facebook issue, not a gzip issue.
As for compressing CSS/JS files (using plugins such as JCH Optimize and the likes), then that’s a different thing. You are not really gzipping the files, you are merging them into just one file and/or using a different zipping technique (removing white spaces, obfuscating the code, etc…). Some Joomla websites literally have dozens of these files and it makes them merging them (the files) into one file (one for the CSS and one for the JS) a potentially good idea, for 2 reasons: 1) load speed and 2) firewall issues (some firewalls have a limit on how many connections you can have – see: http://www.itoctopus.com/your-joomla-website-is-really-really-slow-maybe-its-your-firewall ). On the flip side, CSS/JS compression causes a lot of issues on Joomla sites, and we recommend our customers not to use it.
We have discussed gzip in details here: http://www.itoctopus.com/gzip-page-compression-in-joomla-can-cause-a-high-server-load
If you have a very high traffic website, then you will start feeling the gzip effect.
Hi!
I just want to thank you for your discovery. After struggling a lot, and without figuring out the solution, I got stressed. It’s a shame to miss gzip anyways.
Daniel
Hello,
Could please tell me where exactly in which file should the og meta tags be placed?
Thanks a lot.
Hi Ana,
Some content extensions (such as K2) automatically add the og meta tags for you. But, if you’re using Joomla’s core for content management, then you can add them in the template itself or by using a plugin.
I have that same problem even I do not have the gzip enable.
I’ve double checked the meta tags and cannot find any problem with them.
Hi MieVaan,
Have you checked your .htaccess file for any gzip compression directives?