Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

AMP validation error – Tag or text which is only allowed inside the body section

  • #4745
    Avatar photo[anonymous]

    After publishing a site I have received the following validation error from Google Search Console.

    Tag or text which is only allowed inside the body section found outside of the body section.

    Sadly no further details are provided. However I suspect this might be due to the following code in the HEAD of the page, as I think AMP stylesheets have to be embedded in the BODY, not in the HEAD:

    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" type="text/css">
    #4747
    Avatar photoBob

    URL please

    #4751
    Avatar photo[anonymous]
    #4752
    Avatar photoBob

    It’s strange, I’ve checked some “Simple” theme installation and AMP, especially the analytics block works as should https://search.google.com/test/amp?utm_source=gws&utm_medium=onebox&utm_campaign=suit&id=4kbxqIhafVkFrApiwIKokg

    Have you modified the AMP files? I’m asking because I can see different analytics component markup in the AMP Theme:

    Your site:

    <amp-analytics type="gtag" data-credentials="include">
       <script type="application/json">
          {
             vars": {
             "gtag_id": "G-xxxxxx",
             "config": {
                "G-xxxxxx": {
                   "groups": "default"
                   }
                }
           }
       }
       </script>
    </amp-analytics>

    Generated by Publii:

    <amp-analytics type="googleanalytics" id="analytics1">
        <script type="application/json">
            {
                "triggers": {
                    "trackPageview": {
                        "on"     : "visible",
                        "request": "pageview"
                    }
                },
                "vars"    : {
                    "account": "G-xxx"
                }
            }
        </script>
    </amp-analytics>
    

    The Analytics component on your site loads into the <head> section, but Publii loads it in the footer https://github.com/GetPublii/Publii/blob/master/app/default-files/theme-files/amp-footer.hbs

    One more question: Have you pasted the analytics code via the Custom HTML tool?

    #4754
    Avatar photo[anonymous]

    Yes I used Custom HTML to add the code rather than using the analytics tag field in the AMP option of Site Settings. The generated code you have above has specific triggers, does this reduce the amount of tracking being done?

    I suspect my error is based on my misread of the instructions from Google:

    https://developers.google.com/analytics/devguides/collection/amp-analytics

    I placed both the reference to the AMP library …

    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

    … as well as the JSON containing my Gtag in the HEAD, when I should have put the JSON in the BODY.

    Thank you for helping me spot this.