Tonton video kami tentang berbagai opsi validasi.

Keunggulan utama AMP terletak bukan hanya pada membuat halaman cepat dimuat, namun juga membuat halaman cepat dimuat dengan cara yang dapat divalidasi. Dengan begitu, pihak ketiga seperti Twitter, Instagram, atau Google Penelusuran 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, ada baiknya Anda juga mengonfirmasi bahwa dokumen AMP Anda dapat ditemukan oleh platform pihak ketiga.

Developer Console Browser

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

  1. Buka halaman AMP di browser.
  2. Tambahkan "#development=1" ke akhir URL, misalnya, http://localhost:8000/released.amp.html#development=1.
  3. Buka konsol DevTools Chrome dan periksa apakah ada error validasi.

Error Developer Console akan terlihat seperti ini:

Antarmuka Web

Validator AMP dapat digunakan sebagai antarmuka web di validator.ampproject.org. Antarmuka ini menunjukkan error yang ditampilkan inline beserta sumber HTML halaman. Antarmuka ini adalah editor interaktif: perubahan pada sumber HTML menyebabkan validasi ulang yang interaktif.

Ekstensi Browser

Validator AMP dapat diakses langsung dari toolbar browser menggunakan ekstensi browser. Saat Anda menjelajah, Validator AMP akan otomatis memvalidasi setiap halaman AMP yang dikunjungi dan memberikan indikasi visual terkait validitas halaman dengan ikon berwarna.

Jika terjadi error dalam halaman AMP, ikon ekstensi akan muncul dalam warna merah dan menampilkan jumlah error yang ditemukan.
Jika tidak ada error dalam halaman AMP, ikon muncul dalam warna hijau dan menampilkan jumlah peringatan, jika ada.
Jika halaman itu bukan AMP, namun mengindikasikan ada versi AMP-nya, ikon akan muncul dalam warna biru dengan ikon link, dan jika ekstensi diklik, browser akan dialihkan ke versi AMP tersebut.

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.

Contoh: Memvalidasi file HTML AMP

Dalam contoh ini, kita memvalidasi file HTML AMP 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 file HTML AMP. Jika ada error validasi AMP, tugas akan keluar dengan kode error (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 () {
});

Fitur Command-Line

Anda dapat memvalidasi file HTML AMP menggunakan fitur command-line validator HTML AMP.

Memulai:

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

Sekarang, mari kita validasi halaman HTML AMP yang sebenarnya:

$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: 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 file lokal. Download dan simpan several_errors.html ke file, 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 https://www.ampproject.org/id/docs/reference/components/amp-img.html)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/id/docs/reference/components/amp-ad.html)
...

Format pesan error ini terdiri dari nama file, baris, kolom, dan pesan, yang sering kali diikuti dengan link ke referensi HTML AMP. Beberapa editor, termasuk Emacs (temukan compile command dan compilation mode), dapat menafsirkan format ini dan memungkinkan Anda langsung menuju ke error pada file 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

Fitur command-line menawarkan fitur tambahan yang meliputi menonaktifkan warna, mencetak output JSON, atau menjalankan versi tertentu dari JavaScript validator (secara default, 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 dengan 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 error validasi?

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

<img src="cat.png">

yang menyebabkan error validasi AMP seperti ditunjukkan pada fitur lain berikut:

  • Developer Console Browser

  • Antarmuka Web

  • Ekstensi Browser

Setiap fitur memberikan beberapa informasi:

  1. Lokasi (baris dan kolom) dalam dokumen HTML tempat error 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 error itu. Pada kasus ini, teks menunjukkan bahwa kita menggunakan tag <img>, saat seharusnya menggunakan tag <amp-img>.
  3. Link ke dokumen yang relevan tentang error itu. Pada kasus ini, dokumentasi untuk tag <amp-img>. Tidak semua error menghasilkan link dokumentasi.

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 error dengan lebih baik, baca panduan Error Validasi AMP. Jika masih mengalami masalah setelah menjalankan evaluasi dengan cermat, ajukan pertanyaan dan kami akan mencoba untuk membantu.