AMP, etiketin özellikleri tarafından belirtilen geçersiz bir düzen var hatası çözümü

AMP, Google'nin sunduğu mobil hızlandırılmış sayfalar hizmetidir. AMP'de aldığınız hatalardan biri olarak AMP HTML Etiketinde, etiketin özellikleri tarafından belirtilen geçersiz bir düzen var hatasıdır. Bu hatanın çözümü için okumaya devam edin.

MP HTML, belirli temel performans özelliklerini garanti edecek şekilde haber makaleleri gibi içerik sayfaları yazmak için bir HTML alt kümesidir.

HTML'nin bir alt kümesi olarak, HTML aracılığıyla kullanılabilen tüm etiketlere ve işlevselliğe bazı kısıtlamalar getirir, ancak yeni oluşturma motorlarının geliştirilmesini gerektirmez: mevcut kullanıcı aracıları, diğer tüm HTML'ler gibi AMP HTML'yi oluşturabilir.

 AMP HTML belgeleri bir web sunucusuna yüklenebilir ve diğer herhangi bir HTML belgesi gibi sunulabilir; sunucu için özel bir konfigürasyona gerek yoktur. Bununla birlikte, isteğe bağlı olarak AMP belgelerine proxy sağlayan özel AMP sunum sistemleri aracılığıyla sunulmak üzere tasarlanmıştır. Bu belgeler onlara kendi kökenlerinden hizmet eder ve ek performans faydaları sağlayan belgeye dönüşümler uygulamalarına izin verilir. Böyle bir sunum sisteminin yapabileceği eksik optimizasyon listesi şudur:

Görüntü referanslarını, izleyicinin görüntü alanına göre boyutlandırılmış görüntülerle değiştirin.

Ekranın üst kısmında görünen satır içi resimler.

Satır içi CSS değişkenleri.

Genişletilmiş bileşenleri önceden yükleyin.

HTML ve CSS'yi küçültün.

AMP HTML, bir AMP HTML belgesinde bulunabilecek resim galerileri gibi gelişmiş işlevleri uygulamak için katkıda bulunan ancak merkezi olarak yönetilen ve barındırılan bir dizi özel öğe kullanır. Belgenin özel CSS kullanılarak stilize edilmesine izin verirken, yazarın performans hedeflerine ulaşması için özel öğeler aracılığıyla sağlananın ötesinde yazar yazılı JavaScript'e izin vermez.

AMP biçimini kullanarak, içerik üreticileri AMP dosyalarındaki içeriği taranmaya (robots.txt kısıtlamalarına tabi), önbelleğe alınmaya ve üçüncü taraflarca görüntülenmeye uygun hale getiriyor.

Verim

Tahmin edilebilir performans, AMP HTML için temel bir tasarım hedefidir. Öncelikle, bir sayfanın içeriğinin kullanıcı tarafından tüketilmesine / kullanılmasına kadar geçen süreyi azaltmayı hedefliyoruz. Somut bir ifadeyle bu şu anlama gelir:

Belgenin işlenmesi ve tam olarak düzenlenmesi için gerekli HTTP istekleri en aza indirilmelidir.

Resimler veya reklamlar gibi kaynaklar, yalnızca kullanıcı tarafından görülme olasılığı yüksekse indirilmelidir.

Tarayıcılar, o kaynağı getirmeden sayfadaki her kaynak için ihtiyaç duyulan alanı hesaplayabilmelidir.

AMP HTML biçimi

Örnek belge

< html ⚡ > < head > < meta charset = " utf-8 " > < title > Örnek belge < link rel = " canonical " href = " ./regular-html-version. html "> < meta name =" viewport " content =" width = device-width, minimum-scale = 1, initial-scale = 1 " > < style amp-custom > h1 { color : kırmızı; } < script type = " application / ld + json " > { "@context" : "http://schema.org" , "@type" : "NewsArticle" , "headline" : "Makale başlığı" , "image" : [ "thumbnail1.jpg" ] , "datePublished" : "2015-02-05T08: 00: 00 + 08: 00" } < script async custom-element = "amp-carousel " src ="https://cdn.ampproject.org/v0/amp-carousel-0.1.js " > < script async custom-element =" amp-ad " src =" https://cdn.ampproject.org/ v0 / amp-ad-0.1.js " > < style amp-boilerplate > body { -webkit-animation : -amp-start 8 s adım ( 1 , end) 0 s 1 normal her ikisi de; -moz-animasyon : -amp-start8 saniyelik adımlar ( 1 , son) 0 s 1 normal her ikisi; -ms-animasyon : -amp-start 8 s adımlar ( 1 , end) 0 s 1 normal her ikisi; animasyon : -amp-start 8 s adımlar ( 1 , end) 0 s 1 normal her ikisi; } @ -webkit-keyframes -amp-start { from { visibility : hidden; } to { visibility : visible; } } @ -moz-anahtar kare {-amp başlatmak gelen { görüş : gizlenmiş; } to { visibility : visible; } } @-MS-anahtar kare {-amp başlatmak gelen { görüş : gizlenmiş; } to { visibility : visible; } } @ -o-keyframes -amp-start { from { visibility : hidden; } to { visibility : visible; } } @keyframes -amp-start { from { visibility : hidden; } to { visibility : visible; } } < noscript > < style amp-boilerplate > body { -webkit-animation : yok; -moz-animasyon : yok; -ms-animasyon : yok; animasyon : yok; } < script async src = " https://cdn.ampproject.org/v0.js " > < body > < h1 > Örnek belge < p > Bazı metin < amp-img src = " sample.jpg " width = " 300 " height = " 300 " > < amp-ad width = " 300 " height = " 250 " type = " a9 " veri aax_size =" 300x250 " veri aax_pubname =" test123'ait " veri aax_src ="302 " >

Gerekli işaretleme

AMP HTML belgeleri ZORUNLU

doctype ile başlayın .

üst düzey bir

etiket içerir (aynı zamanda kabul edilir).

içerir

ve

etiketler (HTML'de isteğe bağlıdırlar).

başlıklarının içinde, AMP HTML belgesinin normal HTML sürümüne veya böyle bir HTML sürümü yoksa kendisine işaret eden bir etiket içerir .

head etiketinin ilk çocuğu olarak bir etiket içerir .

head etiketlerinin içinde bir etiket içerir . Aynı zamanda dahil etmek önerilir minimum-scale=1ve initial-scale=1.

head etiketlerinin içinde bir etiket içerir .

ihtiva AMP Demirbaş kodu ( head > style[amp-boilerplate]ve noscript > style[amp-boilerplate]onların kafa etiketinde).

Meta veriler

AMP HTML belgelerinin standartlaştırılmış meta verilerle açıklanması önerilir: Açık Grafik Protokolü , Twitter Kartları vb.

Ayrıca, AMP HTML belgelerinin schema.org/CreativeWork veya schema.org/NewsArticle veya schema.org/BlogPosting gibi daha spesifik türlerinden herhangi biri ile işaretlenmesini öneririz .

HTML Etiketleri

HTML etiketleri, AMP HTML'de değiştirilmeden kullanılabilir. Bazı etiketlerin eşdeğer özel etiketleri ( ve gibi ) vardır ve diğer etiketler kesinlikle yasaktır: