Preview not available – OpenGraph Tags

you likely have the “inline all CSS” option active, disable that and all should be well ??

Hello,

We did not activated the “inline all CSS” option actually.??

That is weird, as all CSS is effectively inlined. What are your CSS optimization settings?

Hello, we only checked the below options:

Optimize CSS Code? ?
Aggregate CSS-files? ?
Also aggregate inline CSS? ?
Eliminate render-blocking CSS? ?
Exclude CSS from Autoptimize: wp-content/cache/, admin-bar.min.css

Thank you!

OK, as you have “eliminate render-blocking CSS” active, do you have (auto or manual) rules on the CriticalCSS tab?

Hello,

Nope. We do not have any manual rules on the CriterialCSS tab.

Also, we are using WP fastest Cache at the same time, but we have deactivated all minification features in WP Fastest Cache. However, it seems that sometimes, our website keeps refreshing/reloading itself when you first enter the website. This problem does not exist if I deactivate Autoptimize.

Would appreciate your advice on both matters. =) Thank you!

OK, can you untick “eliminate render-blocking CSS” and then clear WPFC’s page cache? That should take care of the opengraph preview problem.

re. the “refreshing” problem; I haven’t seen this happening yet, maybe it’s only an issue for logged in users? can you try in another browser or a private/ anonymous browser window?

Hello, I am not sure why but if I untick “eliminate render-blocking CSS”, my mobile menu (I am using jetmenu) does not work. =( Any other suggestions as to how I can fix this?

With regards to the refreshing problem, I usually open the website using incognito actually.

Hello, I am not sure why but if I untick “eliminate render-blocking CSS”, my mobile menu (I am using jetmenu) does not work. =( Any other suggestions as to how I can fix this?

that sounds like a JavaScript optimization issue, does the mobile menu work when JS optimization is off?

With regards to the refreshing problem, I usually open the website using incognito actually.

I just saw it too, but to make matters even more complex; it happened while I was looking at your site with Autoptimize disabled (by adding ?ao_noptimize=1 to the URL) ..

that sounds like a JavaScript optimization issue, does the mobile menu work when JS optimization is off?

Yes, the mobile menu works well when JS optimization is off.

I just saw it too, but to make matters even more complex; it happened while I was looking at your site with Autoptimize disabled (by adding ?ao_noptimize=1 to the URL) ..

Oh, I was trying to figure out the issue by activating and deactivating autoptimize as well as other plugins. But it seems that it only happens sometimes (not all the time though) and usually when I have autoptimize activated though? =( I have autoptimize activated again so could you kindly check again?

Thanks!

• This reply was modified 2 years, 5 months ago by leedanlin.
• This reply was modified 2 years, 5 months ago by leedanlin.

OK, lets focus on the menu first; does it also work when “optimize JavaScript” is on but “aggregate JS” is off?

Hello, if I do that, the mobile menu does not work and my website does not load properly.

OK, now in the JS optimization exclusion field, can you try excluding one of below each line and report back?

* wp-content/themes
* OR wp-content/plugins
* OR wp-includes/js

Hello,

When I untick “eliminate render-blocking CSS”, and test as instructed, the results are as follows:

* wp-content/themes – Mobile menu not working
* OR wp-content/plugins – Mobile menu not working
* OR wp-includes/js – Mobile menu not working

When I tick “eliminate render-blocking CSS”, and test as instructed, the mobile menu works well for all 3 scenarios.

For all the above 6 scenarios, it still shows “Preview not available” when I send my website link.

• This reply was modified 2 years, 5 months ago by leedanlin.

how … unexpected. I don’t understand how “remove render-blocking CSS” could fix a JS issue, but there you have it. In that case you’ll have to keep that option active and either;

a) generate & copy/paste the “above the fold CSS” in the field below (more info in the AO FAQ, look for “inline & defer CSS”) OR
b) create manual rules on the “critical CSS” tab (generating critical css for each rule) OR
c) take a subscription over at criticalcss and paste your API in the field on the critical CSS tab

As for “preview not available”; let’s (re)visit that once you have above the fold/ critical CSS added shall we? ??

hope this helps,
frank