10

Good day all. I'm using a "amp" generator on a wordpress site, one of the actions of this plugin is to add a biolerplate tag just before the </head> and a <noscript> tag with a fallback. Google search console keep warning me about a specific error: "The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect."

So I start to investigate. What I've found is that "something" is injecting the </head><body> just before the <noscript> opening tag, if I change the place where I put the noscript tag, the other two are moved too.

this is the code rendered:

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
</head><body><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

I have done a lot of tests and seems that the <noscript> tag is the point of this error. I've read also some other answers that are saying that the document should not be strict xhtml 1.1, which is not the case, infact these are the first things rendered on the page:

<!DOCTYPE html>
<html amp lang="it-IT"><head><meta charset="utf-8"><link rel="dns-prefetch" href="https://cdn.ampproject.org">

I'm trying to figure out what I can do to solve this error that is present across many sites, with different plugins and themes (and also wordpress versions).

UPDATE: I've tried to add manually a <noscript> tag in the code, and everytime I add it in the <head> section, the section get closed, and the <body> section is opened, without any class (so it's seems like a bug). if you like to see the bug, just go here and look for the code:

https://www.assistenzamalasanita.com/2015/07/errori-medici-durante-il-parto-come-si-valutano/amp/

UPDATE 2 Disabling ALL plugins and switching to default theme has no effect on this. Also, I have copied the entire site as is on another server, in which the problem is not present, the WP sites are identical, and also the serer configurations should be, BUT on the site that is working I can see that the HTTP request has an attribute about the php version (7.0.2) which the other site doesn't have.

is that possible that this can influence the rendering of the page?? to see the site that works: https://www.doors.it/iride/2017/10/risarcimento-malasanita/amp

UPDATE 3 this is the part of the plugin that is actually write the code of the boilerplate (which has the head and body mistaken tags).

add_action( 'amp_post_template_head', 'amp_post_template_add_boilerplate_css' );
function amp_post_template_add_boilerplate_css( $amp_template ) {
    ?>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <?php

    }

As you may notice, the entire block is inserted in one shot, there is no logic behind it and the page should be rendered as is (in that code, I've tried to change the tags into <nonscript> and everything was fine, the head tags isn't been closed and the body tag is opened in the right place, with the right classes.

Matteo Bononi 'peorthyr'
  • 2,170
  • 8
  • 46
  • 95
  • 1
    Can you let me know the plugin you are using for AMP? – Outsource WordPress Sep 15 '18 at 06:18
  • AMP for WP - Accelerated Mobile Pages for WordPress – Matteo Bononi 'peorthyr' Sep 18 '18 at 08:50
  • 1
    You need to provide a [mcve]. There is no way for us to tell why the HTML is being inserted in the wrong place without seeing the PHP that is inserting it. – Quentin Sep 18 '18 at 10:56
  • So, when you disable all plugins (except the AMP plugin), and/or switching to a default theme (e.g. Twenty Seventeen), does the same problem persist? If so, the theme or one of your other plugins might be causing the problem. – Sally CJ Sep 18 '18 at 11:03
  • @MatteoBononi'peorthyr' can you tell me which plugin are you using, or simply move tag just after – Bachcha Singh Sep 18 '18 at 11:08
  • @Quentin: Sorry but I cannot understand what you are asking... if I could do that... I had solved the problem – Matteo Bononi 'peorthyr' Sep 18 '18 at 11:17
  • @BachchaSingh: actually I'm using only Elementor, Astra (theme) and the "AMP for WP", I've deactivated anything else. consider that both Elementor and the Astra theme are those that I used in many other projects with the Amp plugin, and if I deactivate them nothing happens. (I just cannot deactivate them in production for long times. – Matteo Bononi 'peorthyr' Sep 18 '18 at 11:20
  • @MatteoBononi'peorthyr' check in function or header file this code must be render from there, can you please share your files. – Bachcha Singh Sep 18 '18 at 11:42
  • I'll post the part that render that in the question as "update 3" – Matteo Bononi 'peorthyr' Sep 18 '18 at 11:43
  • Can you just confirm whether you are using latest version of the 'Accelerated Mobile Pages for WordPress' plugin? – Outsource WordPress Sep 18 '18 at 13:13
  • yes, it's updated. – Matteo Bononi 'peorthyr' Sep 18 '18 at 13:13
  • Can you switch to default 'Swift' theme in the plugin and let me know whether the issue fixed? – Outsource WordPress Sep 18 '18 at 13:25
  • this was already tested and unfortunately has not solved the issue (I've also duplicated the site on another server which appear to not be affected by this issue, links are in the question). – Matteo Bononi 'peorthyr' Sep 18 '18 at 13:27
  • 1
    The callback/hook `amp_post_template_add_boilerplate_css` may have been moved/relocated from `amp_post_template_head` to `amp_start` or `ampforwp_body_beginning` - the latter two would add the `noscript` tag in the `body` and not the `head`. To confirm, try adding this code in `functions.php`: `add_action( 'ampforwp_body_beginning', function(){ var_dump( $GLOBALS['wp_filter'] ); } );` and then share/inspect the `var_dump()` output. – Sally CJ Sep 18 '18 at 13:43
  • Its looking like something in your code rendering `` after the first occurrence of ``. Can you try changing something without `` in plugin's `amp_post_template_add_boilerplate_css()` function directly and check whether it fixes the issue? – Outsource WordPress Sep 18 '18 at 14:41
  • @OutsourceWordPress: I've already done some tests, the trigger is the tag – Matteo Bononi 'peorthyr' Sep 18 '18 at 15:18
  • Oh it's very strange then. If possible, add a code with ` – Outsource WordPress Sep 18 '18 at 15:51
  • "*is that possible that this can influence the rendering of the page??*" - @MatteoBononi'peorthyr' although I'm not positive about that, it could be. Your server is not delivering the `X-Powered-By` header and there's a `Upgrade: h2` and `Connection: upgrade` in the header. In case that may help.. You should also check the AMP → Settings → Advance Settings → "Enter HTML in Body" (and "Enter HTML in Head"). And the SEO → "Head Section" on the same settings page. And compare the settings with those on the site that works (i.e. without the `noscript` issue). – Sally CJ Sep 19 '18 at 00:41
  • Can you post access to your staging site for people to do test on their own? As this problem might caused by a number of custom code scripts.. Is this allowed here, asking for an access to a site with issues that need fixed? – heero Sep 19 '18 at 10:33
  • @SallyCJ: thanks for the answer, I noticed the same discrepancies too, the enter html in head and body are the same on both, but I still need to try your previous check, which is interesting in any case (to see if there is something in the wp_filter). – Matteo Bononi 'peorthyr' Sep 19 '18 at 12:09
  • 1
    Alright @MatteoBononi'peorthyr', but you can also try this: remove the action - `remove_action( 'amp_post_template_head', 'amp_post_template_add_boilerplate_css' )` and copy the entire HTML from `amp_post_template_add_boilerplate_css()` and add it via the settings page/UI - the AMP plugin uses output buffering (so even with manual HTML addition via the UI, the `noscript` might still be pushed into the `body`), but you can try.. – Sally CJ Sep 19 '18 at 14:53

1 Answers1

1

As the comments have suggested and the third edit says, this is being caused by a hooked function. Luckily that typically is a pretty straightforward fix!

Like @sally-cj mentioned in the comments, use remove_action( 'amp_post_template_head', 'amp_post_template_add_boilerplate_css' ); to stop this function from firing altogether.

If we didn't want to enter in the styles into the admin, you could just duplicate the filter in your theme code without the offending </noscript> tag.

add_action( 'amp_post_template_head', 'so_52185596_custom_boilerplate_css' );
function so_52185596_custom_boilerplate_css( $amp_template ) {
?>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
<?php

}
GFargo
  • 383
  • 4
  • 9