Preview not available – OpenGraph Tags

any news leedanlin ?

Hello Frank,

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

Tried to do this but after saving whatever I copied and pasted disappeared.

b) create manual rules on the “critical CSS” tab (generating critical css for each rule) OR

Did not try this as I don’t really know how to create manual rules.

c) take a subscription over at criticalcss and paste your API in the field on the critical CSS tab

Not really an option as it is a paid service. ??

What do you suggest I do next?

if the “above the fold CSS” does not save, the problem likely is that the CSS you pasted has a URL (for e.g. a background image) in it that contains ../ which a security component (web application firewall) is blocking as it (wrongly) considers the posted CSS being/ containing a “path traversal attack”.

in the “above the fold CSS” you’ll have to replace the ../ with the correct path (e.g. wp-content/themes/yourtheme/css/../images/image.png should become wp-content/themes/yourtheme/images/image.png) and that will not be blocked by the overzealous security component.

Hello Frank,

Sorry for the delayed response.

I generated the critical CSS using https://www.sitelocity.com/critical-path-css-generator. Downloaded the minified critical CSS file, copy and pasted everything in the “above the fold CSS” field. Unlike previously, whatever I copied and pasted stayed and good news is that the image preview shows when sharing my website link.

But the bad news is that my Google Pagespeed scores dropped by 50%. =( Did I do something wrong in the above?

Once again, thanks for your help.

Cheers,
Jasmine

I had a look at your site and currently Critical CSS is not used, instead all CSS is inlined. The preview-problem is fixed in the latest AO update, but inlining all CSS still is advised against as it makes the HTML very bulky, indeed potentially slowing down the site.

Hello,

Actually I deleted whatever I copied and pasted in the “above the fold CSS” field as my pagespeed dropped by 50%. I have pasted it back in for now.

That apart, the “incline all css?” box is not checked though. I never ever use incline all CSS actually.

Could you please take a look again?

Thanks!

the CSS generated by sitelocity is causing massive “cumulative layout shift” (CLS) which is one of the “core web vitals” Google uses to assess your site, so this drags down the overall score.

additionaly (but this will also be the case without the critcal css) the server response time is not good, so ask your host if they can activate page caching OR install a page caching plugin (e.g. KeyCDN Cache Enabler or WP Super Cache).

Oh I see. But what I copied and paste was not done incorrectly right? As in there is nothing wrong with that part right?

If I had done the critical css part correctly, then I will keep it and try out a CDN.

you did it right, but the CSS generated by Sitelocity is not OK, so try generating it elsewhere maybe?

Noted!

Thank you for the advice! It is very helpful.