Search code examples
jquerycsshtmlamp-html

How to convert existing pages AMP compliant

I am planning to make my news pages AMP compliant which I did successfully. However, I had to remove few custom tags, like, , and attributes which is fine.

Now the issue is this whole news page is being displayed in another HTML page which is not AMP compliant.

e.g.

<html ...>
    <head>...</head>
    <script>...</script>
    <body>...
        <div id="story">
            <AMP PAGE Content>
        </div>
    </body>
</html>

Here story div contains full AMP page data means full news story which is being displayed on the template page.

Now the thing is the AMP page which is inside story div completes validation successfully but the template is gives error in validation.

Is it fine if this template does not complete validation?

Will there be any effect in Google Search or page load?

This page also uses jquery, so, is there any solution if we use jquery with AMP?

Solution

  • Is it fine if this template does not complete validation?

    • As far as I know, it's not fine as this may really affect your pages from being discoverable. I think it will be more beneficial if you complete the validation of your AMP pages as this also confirms that your AMP document is discoverable.

    Will there be any effect in Google Search or page load?

    • As mentioned in the documentation,

      If the AMP validation service detects that there’s something wrong with your page, it won’t get discovered and distributed by third party websites and won’t appear in the Google AMP Cache. So not only would you lose the speed benefits of the cache, it’s likely that your page will not be seen in many places!

    This page also uses jquery, so, is there any solution if we use jquery with AMP?

    • Actually, AMP consists of three different parts:

      • AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML.
      • The AMP JS library ensures the fast rendering of AMP HTML pages.
      • The Google AMP Cache can be used to serve cached AMP HTML pages.

      However, please also note that documentation mentions that AMP allows only asynchronous JavaScript to keep JavaScript from delaying page rendering and third-party JS is allowed only in iframes. And, if there are JavaScripts that rely on jQuery, they must be loaded prior to JavaScripts.

    Hope that helps!