AMP
IT
English Deutsch Français العربية Español Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Risoluzione degli errori di convalida

In questa sezione esamineremo e risolveremo gli errori di convalida della nostra pagina AMP. Nota: gli errori potrebbero essere visualizzati in un ordine diverso a seconda della console.

Inclusione di set di caratteri

Inizieremo correggendo il seguente errore:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

Per visualizzare correttamente il testo, AMP richiede di specificare il set di caratteri per la pagina. Le metainformazioni sul set di caratteri devono essere il primo elemento figlio del tag <head>. Questo permette di non dover reinterpretare eventuali contenuti aggiunti prima del tag meta charset.

Aggiungere il codice seguente come prima riga del tag <head>:

<meta charset="utf-8" />

Salvare il file e ricaricare la pagina. Controllare che l'errore sul set di caratteri non sia più visualizzato.

Inclusione di collegamenti canonici

Ora, esaminiamo il seguente errore:

The mandatory tag 'link rel=canonical' is missing or incorrect.

Ogni documento AMP deve avere un collegamento che faccia riferimento alla versione "canonica" di quel documento. La sezione Rendi la tua pagina individuabile di questa esercitazione descriverà in maggior dettaglio le pagine canoniche e i diversi approcci di collegamento alla versione canonica.

Ai fini di questa esercitazione, considereremo come versione canonica della pagina l'articolo HTML originale che stiamo convertendo.

Aggiungere il seguente codice sotto il tag <meta charset="utf-8"/>:

<link rel="canonical" href="/article.html" />

Si può creare una pagina AMP canonica senza versione HTML standard. Il collegamento canonico è ancora obbligatorio, ma in questo caso dovrà puntare all'articolo AMP stesso:

<link rel="canonical" href="article.amp.html" />

Ora possiamo ricaricare la pagina. Sebbene ci siano ancora altri errori da correggere, l'errore del collegamento canonico non è più presente.

Indicazione dell'attributo AMP

Le pagine AMP richiedono un attributo nell'elemento <html> radice per dichiarare che la pagina è un documento AMP.

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

Gli errori precedenti possono essere risolti semplicemente aggiungendo l'attributo ⚡ al tag <html> in questo modo:

<html ⚡ lang="en"></html>

Ora ricaricando la pagina, entrambi gli errori saranno scomparsi.

Anche se l'indicazione dell'attributo ⚡ è l'approccio consigliato, è anche possibile utilizzare l'attributo amp al posto di ⚡, come di seguito indicato:

<html amp lang="en"></html>

Indicazione di una porta di visualizzazione

Ora, occupiamoci del seguente errore:

The mandatory tag 'meta name=viewport' is missing or incorrect.

La sintassi AMP richiede la definizione degli attributi width e minimum-scale per la finestra di visualizzazione. Questi valori devono essere rispettivamente pari a device-width e 1. Viewport è un tag comune incluso nella sezione <head> di una pagina HTML.

Per risolvere l'errore di visualizzazione, aggiungere il seguente frammento HTML al tag <head>:

<meta name="viewport" content="width=device-width" />

I valori specificati per gli attributi width e minimum-scale sono obbligatori in AMP. La definizione initial-scale non è obbligatoria, ma è comunemente inclusa nello sviluppo di pagine web per dispositivi mobili. Altre informazioni sulle finestre di visualizzazione e sulle strutture reattive sono disponibili nella sezione Configurazione della finestra di viusliazzazione.

Come fatto in precedenza, ricaricare la pagina e controllare che l'errore sia scomparso.

Sostituzione di fogli di stile esterni

Il seguente errore è correlato al nostro utilizzo dei fogli di stile:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

In particolare, questo errore è relativo al seguente tag di collegamento del foglio di stile usato nel tag <head>:

<link href="base.css" rel="stylesheet" />

Il problema è che questo link è un riferimento a un foglio di stile esterno. Per velocizzare i tempi di caricamento dei documenti AMP, non è possibile includervi fogli di stile esterni. Tutte le regole di stile devono essere incorporate nel documento AMP utilizzando i tag <style amp-custom></style> o definendo stili inline.

<style amp-custom>
  /* The content from base.css */
</style>

Quindi, risolviamo l'errore:

  1. Rimuovere il tag <link> che punta al foglio di stile nella sezione <head> e sostituirlo con un tag <style amp-custom></style> inline. L'attributo amp-custom nei tag di stile è obbligatorio.
  2. Copiare tutti gli stili definiti nel file base.css nei tag <style amp-custom></style>.

Come fatto in precedenza, ricaricare la pagina e controllare che l'errore dei fogli di stile sia scomparso.

NOTA: Non solo è richiesto l'uso di stili incorporati, ma esiste anche un limite di 50 kilobyte alla dimensione del file per le informazioni di stile. Si consiglia di utilizzare dei preprocessori CSS, come SASS, per minimizzare il codice CSS prima di incorporarlo nelle pagine AMP.

IMPORTANTE: Si può avere un solo tag di stile nell'intero documento AMP. Se ci sono più fogli di stile esterni referenziati dalle pagine AMP, essi dovranno essere raggruppati in un unico insieme di regole. Per sapere quali regole CSS sono valide in AMP, consultare la sezione Contenuti CSS supportati.

Esclusione di codice JavaScript di terzi

I fogli di stile possano essere riutilizzati in modo relativamente semplice in pagine AMP incorporandone il codice CSS. Questo non si applica al codice JavaScript.

The tag 'script' is disallowed except in specific forms.

In generale, gli script in AMP sono consentiti solo se rispettano due requisiti principali:

  1. Tutto il codice JavaScript deve essere asincrono (ovvero occorre includere l'attributo async nel tag script).
  2. JavaScript può essere usato per la libreria AMP e per tutti i componenti AMP nella pagina.

Ciò permette di escludere in modo efficace tutto il codice JavaScript generato da utenti/terzi nelle pagine AMP, ad eccezione di quanto segue.

Le uniche eccezioni alla restrizione sull'uso di script generati da utenti/terzi sono:

  1. Script che aggiungono metadati alla pagina o che configurano i componenti AMP. Questi avranno l'attributo type application/ld+json o application/json.
  2. Script inclusi negli iframe. L'inclusione di JavaScript in iframe dovrebbe essere considerata una scelta eccezionale. Ove possibile, le funzionalità JavaScript vanno sostituite utilizzando componenti AMP. Esploreremo il nostro primo componente AMP nella sezione successiva.

Proviamo ad aprire il file esterno base.js. Come appare? Il file dovrebbe essere privo di qualsiasi codice JavaScript e includere solo un commento informativo come questo:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the
use of external JavaScript files.

*/

Considerando che questo file JavaScript esterno non è un componente funzionale del nostro sito web, possiamo rimuovere completamente il riferimento senza problemi.

Rimuovere il seguente riferimento JavaScript esterno dal documento:

<script type="text/javascript" src="base.js"></script>

Come fatto in precedenza, ricaricare la pagina e controllare che l'errore dello script sia scomparso.

Inclusione del boilerplate AMP CSS

I seguenti errori fanno riferimento alla mancanza di codice boilerplate:

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

Ogni documento AMP richiede il seguente codice boilerplate AMP:

<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