Enter HTML in Head Broken

  • Resolved wordpresseaf

    (@wordpresseaf)


    5 years, 2 months ago

    All pages across multiple websites are now failing AMP Validation.
    I started receiving AMP errors after updating the previous version of the plugin.

    “A tag on this page requires an AMP component ‘script’ tag, which is missing.”

    My AMP theme uses a few scripts and those scripts are added via the “Enter HTML in Head” option in advanced settings. This option is broken. My HTML used to show up, now it does not, and now all my AMP pages have errors. I have checked the HTML source code and it is not there. I did not have any issues until the update. Please look into this.

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    We checked your issue. This error is because of amp-accordion is loading without a script. Can you please tell me how did you add amp-accordion on your page?

    Thread Starter wordpresseaf

    (@wordpresseaf)

    Yes, that is the issue.

    The script is added using AMP -> Settings -> Advanced Settings -> “Enter HTML in Head”

    One of the updates in December broke this. HTML in Head is no longer loading. Due to this, the script is no longer loading.

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    We understood what you say. You are saying how to add the script on your page. But Can you please tell me how did you add amp-accordion tag(markup) on your page?
    Screenshot: https://monosnap.com/file/NopcT4b2y4bKE40OrR3LbpEpFh9KpQ

    Thread Starter wordpresseaf

    (@wordpresseaf)

    This is a custom built amp template that is utilized across multiple websites. Scripts and files needed for this template were all added in ‘HTML in Head’ section of the AMPforWP plug-in. We reference the following scripts:

    <link rel=”stylesheet” type=”text/css” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&#8221; async />
    <script custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js&#8221; async=””></script>
    <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script&gt;
    <script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script&gt;
    <script async custom-element=”amp-accordion” src=”https://cdn.ampproject.org/v0/amp-accordion-0.1.js”></script&gt;

    After updating the plug-in in December, the ‘HTML in Head’ section stopped appearing on the page, and this broke many features of the AMP template/website.

    Is there another way to add my files to the amp_header_core?

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    Can you please use our filter ‘amp_post_template_data’ and check once whether having the same issue or not.
    Like this: https://pastebin.com/mnzE23Re
    Reference: https://monosnap.com/file/aYOD0pF64Qu7yr3qYq1eBjn7GzuXeC

    Thread Starter wordpresseaf

    (@wordpresseaf)

    Where should this be added? I have tried adding to the AMPforWP ads-functions.php file, as well as the template.php file and the template functions.php file. All result in a fatal error. I have added the scripts to the template after the amp_header_core, which makes the pages work, however this does not add them within the head, so the pages fail validation.
    How can I add scripts in the head if the ‘HTML in Head’ option does not work?*

    *The ‘HTML in Head’ Option does seem to be loading my font-awesome style sheet, however it does not load scripts like it used to.

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    We checked your page. We notice that you have done some modifications to your page. Can you please tell me what did you modify your page and please share that files with us. We will test it and recreate the same issue on our side.

    Thread Starter wordpresseaf

    (@wordpresseaf)

    The only change I made, as previously mentioned, is that I added the needed scripts in the template header, directly after the php amp_header_core.

    The page loads correctly, however it fails AMP validation because the scripts are not added between the <head></head> tags.

    <?php amp_header_core() ?>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    We notice that you have done some modifications in customize designs. Can you please share those codes with us?

    Thread Starter wordpresseaf

    (@wordpresseaf)

    Here is the custom built theme:
    https://www.ritzpix.com/files/amp-ritzpix-theme.zip

    The only edit I made was to the header.php file. They visually load correctly now but I need to find a way to add amp scripts to the <head></head> section since the ‘HTML in Head’ option no longer works.

    I updated one of my websites to AMPforWP 1.0.20 this morning and I am now receiving a critical error on my amp pages.

    • This reply was modified 5 years, 1 month ago by wordpresseaf.
    • This reply was modified 5 years, 1 month ago by wordpresseaf.
    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    We checked your issue. Can you please upload this AMP theme and let me know if the issue is having or not
    Screenshot: https://easyupload.io/io83y9

    Thread Starter wordpresseaf

    (@wordpresseaf)

    I uploaded your updated theme, that did not correct the issue.

    ISSUE: Need to add AMP scripts to header between <head></head> tags.

    I have the scripts added within the plug-in under Advanced settings, “Enter HTML in Head”.
    https://www.ritzpix.com/files/html-in-head.jpg

    The December 31st update, Version 1.0.6 seems to have broken this.
    = 1.0.6 (31st December 2019) =
    * Improvement: Allow users to add custom script in amp by using amp theme frame work plugin or without plugin #3865
    * Improvement: Allow users to register scripts in proper way in AMP Theme Framework #3257

    How can I add AMP Scripts to my theme?

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    Can you please use the same AMP theme(amp-ritzpix-theme.zip)with our latest beta version of our plugin?
    Reference: https://github.com/ahmedkaludi/accelerated-mobile-pages/tree/1.0%2B
    Download the zip file and check once whether the same issue or not.
    Screenshot: https://monosnap.com/file/3zJL2iiPpeNyNsGg6iWSJS5XR2cteg

    Thread Starter wordpresseaf

    (@wordpresseaf)

    I installed and the beta version 1.0.66 and tested, unfortunately AMP scripts still do not load within the <head></head> tag as they used to.

    Improvement: Allow users to add custom script in amp by using amp theme frame work plugin or without plugin #3865

    I am using AMP Theme Framework, with this update, how do I add my scripts?

    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
    Thread Starter wordpresseaf

    (@wordpresseaf)

    I have found a manual work around. If I add the scripts to the components-core.php file directly, the issue is resolved. However it is not ideal as I will need to do this with every update to the plug-in.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Enter HTML in Head Broken’ is closed to new replies.