Doğrulama hatalarını çözme
Bu bölümde, AMP sayfamızdaki AMP doğrulama hatalarını inceleyip çözeceğiz. Konsolunuzda hataların farklı bir sırada görünebileceğini unutmayın.
Karakter kümesi ekleme
Aşağıdaki hatayı düzelterek başlayacağız:
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
Metni doğru şekilde görüntülemek için AMP, sayfanın karakter kümesini belirtmenizi gerekli kılar. Meta karakter kümesi bilgisi ayrıca <head> etiketinin ilk alt öğesi olmalıdır. Bu etiketin ilk olmasının nedeni, meta karakter kümesi etiketinden önce eklenen içeriği yeniden yorumlamaktan kaçınmaktır.
Aşağıdaki kodu <head> etiketinin ilk satırı olarak ekleyin:
<meta charset="utf-8" />
Dosyayı kaydedin ve sayfayı yeniden yükleyin. Karakter kümesi hatasının artık görünmediğini doğrulayın.
Standart bağlantıyı ekleme
Şimdi şu hataya bakalım:
The mandatory tag 'link rel=canonical' is missing or incorrect.
Her AMP belgesinin, o belgenin "standart" sürümüne referans veren bir bağlantıya sahip olması gerekir. Bu öğreticinin Sayfanızı keşfedilebilir hale getirme adımında, standart sayfaların ne olduğu ve standart bağlantıya farklı yaklaşımlar hakkında daha fazla bilgi edineceğiz.
Bu öğretici için, standart sayfa olarak dönüştürdüğümüz orijinal HTML makalesini ele alacağız.
Devam edin ve aşağıdaki kodu <meta charset="utf-8" /> etiketinin altına ekleyin:
<link rel="canonical" href="/article.html" />
<link rel="canonical" href="article.amp.html" />
Şimdi sayfayı yeniden yükleyin. Hala düzeltilmesi gereken çok sayıda hata olmasına rağmen, standart bağlantı hatası artık mevcut değil.
AMP özniteliğini belirtme
AMP, sayfayı AMP belgesi olarak bildirmek için sayfanın kök <html> öğesinde bir öznitelik gerektirir.
The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.
Yukarıdaki hatalar basitçe ⚡ özniteliğini <html> etiketine şu şekilde ekleyerek çözülebilir:
<html ⚡ lang="en"></html>
Şimdi devam edin, sayfayı yeniden yükleyin ve her iki hatanın da giderilip giderilmediğini kontrol edin.
⚡ değerini belirtmek önerilen yaklaşım olsa da, aşağıdaki gibi ⚡ özniteliği yerine amp özniteliğini kullanmak da mümkündür:
<html amp lang="en"></html>
Görüntü alanı belirtme
Şimdi aşağıdaki hatayı ele alalım:
The mandatory tag 'meta name=viewport' is missing or incorrect.
AMP, görüntü alanı için bir width ve minimum-scale tanımlanmasını gerektirir. Bu değerler sırasıyla device-width ve 1 olarak tanımlanmalıdır. Görüntü alanı, bir HTML sayfasının <head> kısmında bulunan ortak bir etikettir.
Görüntü alanı hatasını çözmek için aşağıdaki HTML parçacığını <head> etiketine ekleyin:
<meta name="viewport" content="width=device-width" />
width ve minimum-scale için belirtilen değerler, AMP'de gerekli değerlerdir. initial-scale tanımlamak zorunlu değildir, ancak genellikle mobil web geliştirmeye dahil edilir ve önerilir. Görüntü Alanı Yapılandırma bölümünde , görüntü alanı ve duyarlı tasarım hakkında daha fazla bilgi edinebilirsiniz.
Daha önce olduğu gibi, sayfayı yeniden yükleyin ve hatanın kaybolup kaybolmadığını kontrol edin.
Harici stil sayfalarını değiştirme
Aşağıdaki hata, stil sayfası kullanımımızla ilgilidir:
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.
Özel olarak, bu hata <head> etiketimizde bulunan aşağıdaki stil sayfası bağlantı etiketiyle ilgili şikayettir:
<link href="base.css" rel="stylesheet" />
Sorun, bunun harici bir stil sayfası referansı olmasıdır. AMP'de, belgelerin yükleme sürelerini olabildiğince hızlı tutmak için harici stil sayfaları eklenmesine izin verilmez. Bunun yerine, tüm stil sayfası kuralları <style amp-custom></style> etiketleri kullanılarak veya satır içi stiller olarak AMP belgesine yerleştirilmelidir.
<style amp-custom>
/* The content from base.css */
</style>
Öyleyse, hatayı çözelim:
<head>içindeki stil sayfasına referans veren<link>etiketini kaldırın ve bunu satır içi bir<style amp-custom></style>etiketiyle değiştirin. Stil etiketindekiamp-customözelliği zorunludur.base.cssdosyasındaki tüm stilleri<style amp-custom></style>etiketlerine kopyalayın.
Bir kez daha, sayfayı yeniden yükleyin ve stil sayfaları hatasının kaybolup kaybolmadığını doğrulayın.
Üçüncü taraf JavaScript'i kaldırma
Stil sayfaları, CSS'yi satır içine alarak AMP ile nispeten kolay bir şekilde yeniden çalışılabilirken, aynısı JavaScript için geçerli değildir.
The tag 'script' is disallowed except in specific forms.
Genel olarak, AMP'deki betikler yalnızca iki ana gereksinimi karşıladıklarında kullanılmalarına izin verilir:
- Tüm JavaScript eşzamansız olmalıdır (yani, betik etiketine
asyncözniteliği dahil). - JavaScript, AMP kütüphanesi ve sayfadaki tüm AMP bileşenleri içindir.
Bu, aşağıda belirtilenler dışında, AMP'de tüm kullanıcı tarafından oluşturulan/üçüncü taraf JavaScript kullanımını etkili bir şekilde ortadan kaldırır.
- Sayfaya meta veriler ekleyen veya AMP bileşenlerini yapılandıran betikler. Bunlar,
application/ld+jsonveyaapplication/jsontür özniteliğine sahip olacaktır. - iframe'lere dahil edilmiş betik. JavaScript'in bir iframe'e dahil edilmesi, son çare olarak değerlendirilmelidir. Mümkün olan her yerde, JavaScript işlevselliği AMP bileşenleri kullanılarak değiştirilmelidir. Bir sonraki bölümde ilk AMP bileşenimizi inceleyeceğiz.
Harici base.js dosyasını açmayı deneyin. Ne görüyorsunuz? Dosya, herhangi bir JavaScript kodu içermemeli ve yalnızca aşağıdaki gibi bir bilgi açıklamasını içermelidir:
/*
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.
*/
Bu harici JavaScript dosyasının web sitemizin işlevsel bir bileşeni olmadığını düşünürsek, referansı tamamen güvenle kaldırabiliriz.
Aşağıdaki harici JavaScript referansını belgenizden kaldırın :
<script type="text/javascript" src="base.js"></script>
Şimdi sayfayı yeniden yükleyin ve betik hatasının kaybolduğunu doğrulayın.
AMP CSS standart metnini ekleme
Aşağıdaki hatalar, eksik standart metin koduna işaret eder:
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.
Her AMP belgesi aşağıdaki AMP standart metin kodunu gerektirir:
<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
>
Belgenizin <head> etiketinin altına standart metin kodunu ekleyin.
<style amp-boilerplate> etiketi, başlangıçta AMP JavaScript kütüphanesi yüklenene kadar gövde içeriğini gizler, ardından içerik oluşturulur. AMP bunu, Biçimlendirilmemiş İçeriğin Görünümü (Flash Of Unstyled Content, FOUC) olarak da bilinen, stilize edilmemiş içeriğin oluşturulmasını önlemek için yapar. Bu, sayfanın içeriği bir kerede göründüğünden ve ekranın üst kısmındaki her şey birlikte oluşturulduğundan, kullanıcı deneyiminin gerçekten anındaymış gibi hissettirilmesine yardımcı olur. Tarayıcıda JavaScript devre dışı bırakılmışsa, ikinci etiket bu mantığı geri alır.
<img> yerine <amp-img> koyma
AMP, medyayı görüntülemeye yönelik varsayılan HTML karşılıklarını desteklemez, bu da aşağıdaki hatayı açıklar:
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
AMP, <img> etiketinin yerini alacak şekilde özel olarak tasarlanmış bir web bileşenine sahiptir, bu etiket, <amp-img> etiketidir:
<amp-img src="mountains.jpg"></amp-img>
<img> etiketini yukarıdaki <amp-img> etiketiyle değiştirin ve yine doğrulayıcıyı çalıştırın. Birkaç yeni hata almanız gerekir:
Layout not supported: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.
amp-img neden başka bir hatayı tetikledi? Çünkü amp-img , geleneksel HTML img etiketinin doğrudan yerine geçmez. amp-img kullanırken ek gereksinimler vardır.
AMP yerleşim sistemi
Yerleşim hatası bize amp-img etiketinin container yerleşim türünü desteklemediğini söylüyor. AMP'nin tasarımındaki en önemli kavramlardan biri, web sayfalarını oluşturmak için gereken DOM yeniden akış miktarını azaltmaya odaklanmasıdır.
DOM yeniden akışını azaltmak için AMP, sayfanın yerleşiminin sayfanın indirilmesi ve oluşturulması yaşam döngüsünde olabildiğince erken bilinmesini sağlamak için bir yerleşim sistemi içerir.
Aşağıdaki resim, bir HTML sayfasının genellikle nasıl düzenlendiğini AMP'nin uyguladığı yaklaşıma kıyasla karşılaştırmaktadır. Soldaki yaklaşımda, bir reklam veya resim her yüklendiğinde metnin nasıl yeniden aktığına dikkat edin. AMP'nin yerleşim yaklaşımı, resimlerin ve reklamların yüklenmesi uzun sürse bile metnin hareket etmesini engeller.
AMP yerleşim sistemi, bir sayfadaki öğelerin sabit boyutlar, duyarlı tasarım ve sabit yükseklik gibi çeşitli şekillerde konumlandırılmasına ve ölçeklendirilmesine olanak tanır.
Makalemizde, yerleşim sistemi amp-img için yerleşim türünü container türü olarak çıkardı. Ancak, container türü yalnızca alt öğeler içeren öğeler için geçerlidir. container türü, bu hatanın nedeni olan amp-img etiketiyle uyumlu değildir.
Neden container türü çıkarımı yapıldı? Çünkü amp-img etiketi için bir height özelliği belirtmedik. HTML'de yeniden akış, bir sayfadaki öğeler için her zaman sabit bir genişlik ve yükseklik belirtilerek azaltılabilir. AMP'de, AMP'nin öğenin en boy oranını önceden belirleyebilmesi için amp-img öğelerinin genişliğini ve yüksekliğini tanımlamanız gerekir.
width ve height öğelerini amp-img etiketinize ekleyin:
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>
Sayfayı yenileyin ve doğrulayıcıyı kontrol edin; artık herhangi bir hata görmemelisiniz!
Artık geçerli bir AMP belgeniz var, ancak sayfada garip bir şekilde konumlandırıldığı için resim o kadar harika görünmüyor. Varsayılan olarak, bir amp-img için yüksekliği ve genişliği belirttiğinizde AMP, boyutları belirttiğiniz şekilde sabitler; ancak AMP, ekran boyutu ne olursa olsun sayfayı duyarlı bir şekilde uzatsa ve sayfaya sığacak şekilde ölçeklendirse harika olmaz mıydı?
Neyse ki AMP, belirlediğiniz genişlik ve yükseklikten öğelerin en boy oranını belirleyebilir. Bu, AMP düzen sisteminin öğeyi çeşitli şekillerde konumlandırmasına ve ölçeklendirmesine olanak tanır. layout özniteliği, öğenin nasıl konumlandırılmasını ve ölçeklendirilmesini istediğinize dair AMP'ye bilgi verir.
Görselimizin ölçeklenmesi ve yeniden boyutlandırılması için yerleşim özniteliğini responsive olarak ayarlayalım:
<amp-img
src="mountains.jpg"
layout="responsive"
width="266"
height="150"
></amp-img>
Voila! Resmimiz doğru en boy oranında ve ekran genişliğini duyarlı bir şekilde doldurur.
Başarılı!
Artık AMP belgeniz şunun gibi görünmelidir:
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="canonical" href="/article.html" />
<link rel="shortcut icon" href="amp_favicon.png" />
<title>News Article</title>
<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
>
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
header {
background: Tomato;
color: white;
font-size: 2em;
text-align: center;
}
h1 {
margin: 0;
padding: 0.5em;
background: white;
box-shadow: 0px 3px 5px grey;
}
p {
padding: 0.5em;
margin: 0.5em;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>News Site</header>
<article>
<h1>Article Name</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas
tortor sapien, non tristique ligula accumsan eu.
</p>
<amp-img
src="mountains.jpg"
layout="responsive"
width="266"
height="150"
></amp-img>
</article>
</body>
</html>
Sayfayı yenileyin ve konsol çıktısına bakın. Aşağıdaki mesajla karşılanmalısınız:
AMP validation successful.