Memvalidasi halaman AMP

Kekuatan utama AMP tidak hanya karena membuat halaman Anda cepat, tetapi juga membuat halaman Anda cepat dengan cara yang dapat divalidasi. Dengan begitu, pihak ketiga, seperti Twitter, Instagram, atau Google Search dapat merasa puas dengan penayangan halaman AMP kepada pembaca melalui cara yang semakin menarik.

Bagaimana cara memeriksa validitas halaman AMP saya?

Ada beberapa cara untuk memvalidasi dokumen AMP. Semua cara akan memberikan hasil yang sama persis, jadi gunakan cara mana saja yang paling sesuai dengan gaya pengembangan Anda.

Selain memvalidasi AMP, Anda juga mungkin ingin mengonfirmasi bahwa dokumen AMP Anda dapat ditemukan oleh platform pihak ketiga.

Konsol Pengembang Browser

Validator AMP hadir sepaket dengan perpustakaan JS AMP, sehingga perpustakaan ini tersedia di setiap halaman AMP tanpa perlu diotak-atik. Untuk memvalidasi:

1. Buka halaman Anda di browser.
2. Lampirkan "#development=[1,actions,amp,amp4ads,amp4email]" ke URL, contoh: http://localhost:8000/released.amp.html#development=1 adalah cara lama atau warisan untuk memvalidasi format AMP. URL berikut ini, http://localhost:8000/released.amp.html#development=amp4email akan memvalidasi dokumen sesuai spek AMP untuk email.
3. Buka konsol Chrome DevTools dan periksa apakah ada eror atau kesalahan validasi.

Eror Konsol Pengembang akan terlihat seperti ini:

Antarmuka Web

The AMP Validator can be used as a web interface at validator.ampproject.org. This interface shows errors displayed inline alongside the HTML source of the page. The interface is an interactive editor: changes to the html source result in interactive revalidation.

Ekstensi Browser

The AMP Validator can be accessed directly from your browser's toolbar using a browser extension. As you browse, it will automatically validate each AMP page visited and gives a visual indication of the validity of the page as a colored icon.

Ekstensi Validator AMP untuk Chrome dan Opera.

Paket NPM untuk CI

Sebagai bagian dari pipeline build dan pengujian, Anda dapat mengintegrasikan validasi AMP melalui paket NPM Validator AMP: amphtml-validator atau gulp-amphtml-validator (plugin gulp). Misalnya: Anda dapat menggunakan paket NPM Validator AMP untuk uji integrasi atau dalam tugas terjadwal untuk memverifikasi halaman AMP produksi.

Example: Validating an AMP HTML file

Dalam contoh ini, kita memvalidasi berkas HTML AMP dengan menggunakan paket NPM amphtml-validator. Status validasi diteruskan ke konsol.

'use strict';
var amphtmlValidator = require('amphtml-validator');
var fs = require('fs');

amphtmlValidator.getInstance().then(function (validator) {
  var input = fs.readFileSync('index.html', 'utf8');
  var result = validator.validateString(input);
  (result.status === 'PASS' ? console.log : console.error)(result.status);
  for (var ii = 0; ii < result.errors.length; ii++) {
    var error = result.errors[ii];
    var msg =
      'line ' + error.line + ', col ' + error.col + ': ' + error.message;
    if (error.specUrl !== null) {
      msg += ' (see ' + error.specUrl + ')';
    }
    (error.severity === 'ERROR' ? console.error : console.warn)(msg);
  }
});

Contoh: Menggunakan tugas gulp untuk memvalidasi HTML AMP

Dalam contoh ini, kita menggunakan tugas gulp untuk memvalidasi semua berkas HTML AMP. Jika ada eror validasi AMP, tugas akan keluar dengan kode eror (1).

const gulp = require('gulp');
const gulpAmpValidator = require('gulp-amphtml-validator');

const paths = {
  src: 'src/*.html',
};

gulp.task('amphtml:validate', () => {
  return gulp
    .src(paths.src)
    .pipe(gulpAmpValidator.validate())
    .pipe(gulpAmpValidator.format())
    .pipe(gulpAmpValidator.failAfterError());
});

gulp.task('default', ['amphtml:validate'], function () {});

Alat Baris Perintah

Anda dapat memvalidasi berkas HTML AMP dengan menggunakan alat baris perintah validator HTML AMP.

Memulai:

1. Pastikan Anda memiliki Node.js dengan pengelola paket 'npm' dalam sistem Anda.
2. Instal alat baris perintah validator HTML AMP dengan menjalankan perintah berikut ini: npm install -g amphtml-validator.

Sekarang, mari kita validasi halaman HTML AMP yang sebenarnya:

$ amphtml-validator https://amp.dev/
https://amp.dev/: PASS

Ternyata halaman ini adalah HTML AMP yang valid. Mari kita coba halaman yang tidak valid: several_errors.html. Untuk menjalankan perintah amphtml-validator, Anda dapat memasukkan URL halaman atau nama berkas lokal. Unduh dan simpan several_errors.html menjadi berkas, lalu jalankan:

$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see /id/documentation/components/amp-img/)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see /id/documentation/components/amp-ad/)
...

Format pesan eror ini terdiri dari nama berkas, baris, kolom, dan pesan, yang sering kali diikuti oleh tautan ke referensi HTML AMP. Beberapa editor, termasuk Emacs (Editor MACroS), dapat menafsirkan format ini dan memungkinkan Anda langsung menuju ke eror pada berkas asli.

Sebagai titik awal yang baik untuk membuat halaman AMP Anda sendiri, pertimbangkan minimum_valid_amp.html:

$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS

Alat baris perintah menawarkan fitur tambahan yang meliputi menonaktifkan warna, mencetak output JSON, atau menjalankan versi tertentu dari JavaScript validator (sebagai standar, fitur ini menjalankan skrip terbaru yang dipublikasikan).

$ amphtml-validator --help

Usage: index [options] <fileOrUrlOrMinus...>

Validates the files or urls provided as arguments. If "-" is
specified, reads from stdin instead.

Options:

    -h, --help                  output usage information
    -V, --version               output the version number
    --validator_js <fileOrUrl>  The Validator Javascript.
      Latest published version by default, or
      dist/validator_minified.js (built with build.py)
      for development.
    --format <color|text|json>  How to format the output.
      "color" displays errors/warnings/success in
              red/orange/green.
      "text"  avoids color (e.g., useful in terminals not
              supporting color).
      "json"  emits json corresponding to the ValidationResult
              message in validator.proto.

Apa yang terjadi jika halaman saya tidak valid?

Validator AMP tidak hanya memudahkan Anda selama pengembangan. Validator juga digunakan oleh platform seperti Twitter atau Google yang mengintegrasikan halaman AMP ke konten dan hasil penelusurannya. Selain itu, mereka biasanya tidak meminta halaman langsung dari server, tetapi menggunakan Cache AMP Google, layanan gratis yang menyimpan cache halaman Anda dan membuatnya tersedia di seluruh dunia, sehingga halaman tersebut dimuat jauh lebih cepat.

Jika layanan validasi AMP mendeteksi ada sesuatu yang salah di halaman Anda, halaman tidak akan dapat ditemukan dan didistribusikan oleh situs web pihak ketiga dan tidak akan muncul di Cache AMP Google. Jadi, Anda tidak hanya akan kehilangan manfaat kecepatan menyimpan dalam cache, tetapi halaman tidak akan terlihat di banyak tempat! Sangat disayangkan, jadi pastikan itu tidak terjadi.

Bagaimana cara memperbaiki eror validasi?

Kebanyakan eror validasi cukup mudah dideteksi dan diperbaiki. Perhatikan tag HTML ini:

<img src="cat.png">

Yang menyebabkan eror validasi AMP, seperti ditunjukkan pada alat lain berikut ini:

• Browser Developer Console

• Web Interface

• Browser Extension

Setiap alat memberikan beberapa informasi:

1. Lokasi (baris dan kolom) dalam dokumen HTML tempat eror terjadi, yang pada beberapa antarmuka dapat diklik untuk menyorot lokasi tersebut. Pada kasus ini, masalah terjadi di baris 11, kolom 2.
2. Baris teks yang menjelaskan eror itu. Pada kasus ini, teks menunjukkan bahwa kita menggunakan tag <img>, saat seharusnya menggunakan tag <amp-img>.
3. A link to a relevant document about the error. In this case the documentation for the <amp-img> tag. Not all errors generate documentation links.

Dengan membaca ulang spek secara cermat, kita akan tahu bahwa kita menggunakan tag<img>, saat seharusnya menggunakan tag <amp-img>.

Untuk memahami daftar lengkap potensi eror dengan lebih baik, kunjungi panduan Kesalahan Validasi AMP. Jika masih mengalami masalah setelah melakukan evaluasi dengan cermat, ajukan pertanyaan dan kami akan mencoba untuk membantu.