AMP Sayfalarını Doğrulama

AMP'nin temel gücü sadece sayfalarınızı hızlandırması değil, aynı zamanda sayfalarınızı doğrulanabilecek bir şekilde hızlandırmasıdır. Böylece, Twitter, Instagram veya Google Arama gibi üçüncü taraflar, AMP sayfalarını gittikçe daha ilginç şekillerde okuyucularına sunmayı isteyebilirler.

Sayfamın geçerli bir AMP olup olmadığını nasıl kontrol edebilirim?

Bir AMP dokümanını doğrulamanın çeşitli yolları vardır. Bu yolların tümü tam olarak aynı sonucu verir. Bu yüzden, geliştirme stiliniz için en uygun yolu kullanın.

AMP'nin geçerliliğine ek olarak, AMP dokümanınızın üçüncü taraf platformları için bulunabilirliğini de onaylamak isteyebilirsiniz.

Tarayıcı Developer Console.

AMP Doğrulayıcı, AMP JS kitaplığıyla aynı pakette gelir, dolayısıyla her AMP sayfasında kullanılmak için hazırdır. Doğrulama yapmak için:

1. AMP sayfanızı tarayıcıda açın
2. URL'nin sonuna "#development=1" parametresini ekleyin. Örneğin, http://localhost:8000/released.amp.html#development=1.
3. Chrome DevTools konsolunu açın ve doğrulama hatalarını kontrol edin.

Developer Console hataları aşağıdaki gibi görünür:

Web Arayüzü

AMP Doğrulayıcı, validator.ampproject.org adresindeki bir web arayüzü gibi kullanılabilir. Bu arayüzde, sayfanın HTML kaynağıyla birlikte hatalar satır içinde görüntülenir. Arayüz etkileşimli bir düzenleyicidir: HTML kaynağında yapılan değişiklikler etkileşimli bir şekilde yeniden doğrulamaya neden olur.

Tarayıcı Uzantısı

AMP Doğrulayıcı'ya, bir tarayıcı uzantısı aracılığıyla doğrudan tarayıcınızın araç çubuğundan erişebilirsiniz. Siz göz atarken Doğrulayıcı da ziyaret ettiğiniz her AMP sayfasını otomatik olarak doğrular ve sayfanın geçerliliğinin görsel göstergesi olarak renkli bir simge gösterir.

AMP Doğrulayıcı Uzantısı, Chrome ve Opera tarayıcılarında çalışır.

Komut Satırı Aracı

Bir önkoşul olarak, sisteminize npm paket yöneticisiyle birlikte Node.js dosyasını da yüklemeniz gerekebilir.

AMP HTML doğrulayıcı komut satırı aracını yüklemek için npm install -g amphtml-validator yazın.

Şimdi gerçek bir AMP HTML sayfasını doğrulayalım.

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

Bu sayfanın geçerli bir AMP HTML sayfası olması şaşırtıcı değildir. Şimdi geçerli olmayan bir sayfayı deneyelim: several_errors.html. amphtml-validator komutunu çalıştırmak için sayfanın URL'sini veya bir yerel dosya adını sağlayabilirsiniz. several_errors.html dosyasını indirin ve bir dosyaya kaydedin, ardından Doğrulayıcı'yı çalıştırın:

$ 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 /tr/documentation/components/amp-img/)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see /tr/documentation/components/amp-ad/)
...

Hata iletileri bir dosya adı, satır, sütun ve iletiden oluşur ve genellikle, bunların ardından AMP HTML referansının bağlantısı verilir. Aralarında Emacs'in de (derleme komutu ve derleme modunu arama) bulunduğu bazı düzenleyiciler bu biçimi yorumlayabilir ve orijinal dosyada hatalara gidebilmenizi sağlayabilir.

Kendi AMP sayfanızı yapmaya minimum_valid_amp.html dosyasını kullanarak başlayabilirsiniz:

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

Komut satırı aracı; rengin kapatılması, JSON çıktısının yazdırılması veya doğrulayıcı Javascript'inin belirli bir sürümünün çalıştırılması (varsayılan olarak en son yayınlanan komut dosyasını çalıştırır) gibi ek özellikler sunar.

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

Sayfam geçerli değilse ne olur?

AMP Doğrulayıcı, yalnızca geliştirme sırasında size kolaylık sağlayan bir araç değildir. Ayrıca, AMP sayfalarını içeriklerine ve arama sonuçlarına entegre eden Twitter veya Google gibi platformlar tarafından da kullanılır. Dahası, bu platformlar sayfaları doğrudan sunucunuzdan istemeyip Google AMP Önbelleği'nden yararlanır. Google AMP Önbelleği, sayfalarınızı önbelleğe alan ve daha da hızlı yüklenebilmeleri için bunları dünyada herkesin kullanımına sunan ücretsiz bir hizmettir.

AMP doğrulama hizmeti sayfanızla ilgili bir sorun tespit ederse sayfanız üçüncü taraf web siteleri tarafından bulunup dağıtılmaz ve Google AMP Önbelleği'nde görünmez. Dolayısıyla, sadece önbelleğin hız avantajlarını kaybetmekle kalmazsınız, muhtemelen sayfanız da birçok yerde görülmez! Bu büyük bir kayıp olur, bu yüzden böyle bir şeyin olmayacağından emin olalım.

Doğrulama hatalarını nasıl düzeltirim?

Çoğu doğrulama hatası kolayca ele alınıp düzeltilebilir. Şu HTML etiketi bir AMP doğrulama hatasına neden olur:

<img src="cat.png">

AMP doğrulama hatasının farklı araçlardaki gösterimi şu şekilde olur:

• Tarayıcı Developer Console

• Web Arayüzü

• Tarayıcı Uzantısı

Her araç çeşitli bilgiler sağlar:

1. HTML dokümanında, hatanın ortaya çıktığı konum (satır ve sütun) bazı arayüzlerde ilgili konumun vurgulanması için tıklanabilir. Bu örnekte, sorun 11. satır, 2. sütunda ortaya çıkmıştır.
2. Hatayı açıklayan bir metin satırı. Bu örnekte, metin <img> etiketi kullandığımızı, ancak onun yerine bir <amp-img> etiketi kullanmış olmamız gerektiğini belirtmektedir.
3. Hatayla ilgili bir dokümanın bağlantısı. Bu örnekte, <amp-img> etiketine ilişkin dokümanlar. Tüm hatalarda doküman bağlantıları oluşturulmaz.

Bu spesifikasyonu dikkatlice yeniden okuduğumuzda, <amp-img> etiketi kullanmamız gerekirken bir <img> etiketi kullandığımızı fark ederiz.

Potansiyel hataların tam listesini daha iyi anlamak için AMP Doğrulama Hataları kılavuzuna bakın. Dikkatli bir değerlendirmeden sonra ilerleme kaydedemezseniz bir soru sorun, size yardımcı olmaya çalışalım.