Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

wordpress: adding a <noscript> tag makes the <head> tag autoclose

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.

like image 699
Matteo Bononi 'peorthyr' Avatar asked Sep 05 '18 12:09

Matteo Bononi 'peorthyr'


1 Answers

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

}
like image 124
GFargo Avatar answered Oct 29 '22 09:10

GFargo