amp-html page linked from non-amp html page not working

1
votes

https://www.washingtonvoterfile.com is a traditional html (not amp-html) page with links to amp-html pages (for example: https://www.washingtonvoterfile.com/legal-notice.html).

When loading these amp pages directly, they render correctly and the Google Chrome AMP Validator plugin indicates that they're valid AMP.

When loaded by clicking on the link on the (non-amp) homepage, they render without amp.js loading. The Google Chrome AMP Validator plugin is greyed out, indicating that they're not AMP pages.

If refreshed, amp.js loads and they render correctly. The plugin shows that the AMP is valid.

I've tried using hard links, relative links, etc. to resolve this issue, without luck.

Any input would be greatly appreciated.

UPDATE

It appears that the problem is the result of the way the JQuery Mobile, which is used on the homepage, works. Basically, most items in the head tag of any linked pages aren't loaded.

One solution to this, moving the script tags inside the body tag (https://forum.jquery.com/topic/script-not-running-unless-i-refresh-page), doesn't work because the amp scripts must be loaded in the head tag.

3
amp-html
Did you created one page linking to the amp page which you have giving the amp-html link to the amp page ? - bhansa
@Bhansa I don't understand your question. - Ben Shoval
You should have connectivity between both the pages your amp and non-amp pages. You have given the link for your amp page but I don't see any non amp-page which links to that. Can you add that link too if you have created. - bhansa
There are no non-amp versions of the amp pages. - Ben Shoval
Making your pages discoverable - bhansa

3 Answers

1
votes

The link which you have provided in your amp-page is:

<link rel="canonical" href="https://www.washingtonvoterfile.com/legal-notice"/>

does not exist.

If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:

<link rel="canonical" href="https://www.washingtonvoterfile.com/legal-notice.html"/>

Also as you explained you are opening an amp-page linked through a non-amp page even though they both are not connected to each other.


There should be two pages, one non-amp which which has a canonical tag pointing to the amp-page.

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

and in the amp-page:

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

If you have only one standalone AMP page it should links to itself as mentioned above.

Hope that helps!

1
votes

The not-terribly-satisfactory answer to my own question is that there's no good way to link from a page using JQuery Mobile to an AMP page since:

  1. JQuery Mobile doesn't load most of what's in the head tag of linked pages.
  2. amp.js can not go in the body tag per AMP rules.
  3. JQuery Mobile and amp.js conflict, so it's not possible to have amp.js load on the homepage.

In my case, I just made the AMP pages into non-AMP pages. This was fine for this use case. If I really needed them to be AMP, I would need to rewrite the search bar on the homepage so I wouldn't need JQuery Mobile.

0
votes

You're using jQuery Mobile for page transitions, but the AMP Validator extension is only running when the document loads.

To support this, the AMP Validator could listen for the popstate event, but there's really no reason for that since AMP pages are supposed to be loaded as-is.