書名： AMP：Building Accelerated Mobile Pages
作者名： Ruadhan O'Donoghue
本章字?jǐn)?shù)： 521字
更新時(shí)間： 2021-07-08 10:04:01

AMP boilerplate validation errors

Let's quickly go through the errors related to the AMP boilerplate. Errors related to AMP boilerplate are usually reported as occurring at the end of the document, and usually begin with text: "The manadatory tag...", like in the following two messages:

news.html:2:0 The mandatory attribute '' is missing in tag 'html for top-level html'. (see https://www.ampproject.org/docs/reference/spec#required-markup)

news.html:30:7 The mandatory tag 'html for top-level html' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec#required-markup)

These two error messages relate to the opening HTML tag. One occurs at line 2, character 0, and the second occurs at line 30, character 7 (that is, the end of the document). We see at line 2, we have <html lang="en"> but we know that our AMP documents should start with <html > or <html amp>. So make this change and reload. This error should be resolved.

Don't worry if the line numbers in the examples here don't match up exactly with what you see. As you fix the errors by making changes to the HTML, the line numbers may change. We'll omit the line numbers for the remainder of the examples unless they are needed.

The next error is:

The mandatory tag 'link rel=canonical' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec#required-markup)

We know how to fix this! Just add a canonical tag pointing to itself or its desktop counterpart:

<link rel="canonical"  />

If you are using a local web server, then your canonical tag will look something like this:

<link rel="canonical" href="http://localhost/news.html" />

Next is:

The mandatory tag 'meta charset=utf-8' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec#required-markup)

We can fix this too: Just add <meta charset="utf-8"> immediately after the opening <head> tag.

Next we have:

The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec#required-markup)

For this one, we need to add the following to our AMP page:

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Then we have three related errors:

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect.
The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect.

We can take these three errors together since they are all caused by the same issue: the missing mandatory <style amp-boilerplate> tag. Add the following:

<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>

As noted in the last chapter, the <style amp-boilerplate> code must be on a single line, so if you copy from the PDF or eBook versions of this book, you may run into problems with unwanted line-breaks. It's therefore recommended to copy the code from the github repository at github.com/ruborg/amp, or from theampbook.com.

With each error you fix, hit reload and examine the developer console. You should see the list of errors getting smaller. Good work! You're making progress. So far, we've dealt only with the validation errors related to the mandatory AMP boilerplate code. You should only have the following validation errors remaining:

The tag 'script' is disallowed except in specific forms.
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'style.css'.

官术网_书友最值得收藏!

AMP：Building Accelerated Mobile Pages

AMP boilerplate validation errors