Bilmeniz Gereken 10 Önemli Hızlandırılmış Mobil Sayfa (AMP) Bileşeni

Hızlandırılmış Mobil Sayfalar veya AMP Google’ın girişimi mobil web'i daha hızlı hale getirin. Bu amaca ulaşmak için, AMP standartları HTML, CSS ve JavaScript’i nasıl kullanabileceğinizi Dış kaynakların yüklenmesini yönetir, resimler, videolar ve reklamlar gibi kendi çalışma zamanı aracılığıyla.

Bu sizi gerektirir kullanılamaz Herhangi bir özel (yazar tarafından yazılmış veya üçüncü taraf) JavaScript veya AMP belgelerinizdeki resimler ve videolar gibi kaynakla ilgili HTML öğeleri.

AMP, kullanıcıların ihtiyaçları ile en iyi performans uygulamaları arasındaki boşluğu kapatmak için; belirli bileşenler yapabilirsin dışlanan bu öğelerin yerine kullanın.

AMP Bileşenleri belirli HTML etiketleri. Normal HTML etiketlerine benzer davranırlar: açılış ve kapanış etiketlerine, niteliklerine sahiptirler ve çoğu CSS ile stillendirilebilir. Kolayca tanınabilirler, çünkü her zaman ile başla amper- önek.

İki tür AMP Bileşeni vardır: gömme ve Genişletilmiş Bileşenler.

Dahili AMP Bileşenleri

Dahili ins AMP'nin JavaScript çalışma zamanına dahil edilmiştir, bu nedenle bunları ayrı ayrı dahil etmeniz gerekmez.

1. amper-img

değiştirir etiket AMP HTML belgelerinde. Eklemeniz gerekir src ve alt Tıpkı normal çalıştığınız zamanki gibi eleman.

ayrıca diğer iki gerekli özelliğe sahiptir: belirtin Genişlik ve yükseklik Öznitellikler tamsayı piksel değerlerinde, bu AMP çalışma zamanının mizanpajı önceden hesaplamak.

Eğer istersen görüntüyü duyarlı hale getirme, ekle düzen = "duyarlı" bağlıyor. düzen nitelik düzeni kontrol eder AMP belgelerinde ve herhangi bir AMP Bileşenine eklenebilir (AMP Düzen Sistemi hakkında daha fazla bilgi edinin).

Ayrıca kullanabilirsiniz srcset özniteliği etiketlemek farklı görüntüler belirt farklı görünümler ve piksel yoğunlukları için. AMP olmayan görüntülerle aynı şekilde çalışır.

2. amp-video

için kullanılabilir HTML videolarını doğrudan gömün AMP HTML belgelerinde. Değiştirir AMP dosyalarında. etiket tembel yükler videoları performansı optimize etmek için.

Videonun kaynağı HTTPS protokolü ile sunulmalıdır. Eklemek için gerekli Genişlik ve yükseklik öznitelikleri, tıpkı bileşen.

etiketi gibi birçok isteğe bağlı özellik vardır. otomatik oynatma ve afiş HTML5 videonuzun görüntülenme biçiminde ince ayar yapmak için belirleyebileceğiniz.

mp4, webm, ogg ve HTML5 tarafından desteklenen tüm diğer biçimleri destekler

İstersen ayrıca yapabilirsin. geri dönüş videoları ekle HTML5 videoları desteklemeyen tarayıcıları olan kullanıcılar için geri çekil özellik ve HTML etiketi.

  
 
Tarayıcınız HTML5 videoları desteklemiyor.
 
    

3. amp-ad ve amp-embed

size sağlar iframe sandboxes içinde yapabildiğin reklamlarınızı gösterin. Reklamlarınızı sunmalısınız HTTPS protokolü aracılığıyla.

Reklam ağınız tarafından sağlanan komut dosyalarını kendiniz çalıştıramazsınız. Bunun yerine, AMP çalışma zamanı, verilen ağın JavaScript'ini sanal alan içinde yürütür. Sen yalnızca hangi şebekeyi kullandığınızı belirtmeniz gerekir, ve verilerinizi ekleyin.

bileşen gerektirir reklamın boyutlarını ekleyin kullanmak Genişlik ve yükseklik Öznitellikler.

İle kullandığınız reklam ağını tanımlayabilirsiniz. tip bağlıyor. Desteklenen reklam ağlarının listesine bakın.

Her reklam ağının kendi veri-* ayrıca eklemeniz gereken öznitelikleri. Hangisine ihtiyacınız olduğunu görmek için yukarıdaki listede reklam ağınızı tıklayın..

takma adıdır , Belgeler, bunun yerine kullanılabileceğinden başka bir şey söylemez. olduğu zaman anlamsal olarak daha doğru. Google, zamanla reklamlarla ilgili AMP bileşenlerini geliştirmeyi vaat ettiğinde, bu gelecekte değişebilir.

4. amper-piksel

İle , yapabilirsin bir izleme pikseli ekle AMP HTML belgelerinize sayfa görüntülemelerini say. Gerekli olan tek bir özniteliği vardır src İhtiyacınız olan özellik izleme pikseline ait URL'yi belirtin.

etiket izin verir standart URL ikameleri, bu yapabileceğin anlamına gelir rastgele bir URL değeri üret Her gösterimi izlemek için.

Bu bileşeni kullanmak istiyorsanız, AMP'nin URL Değiştirme Rehberine bakın. Stil veremeyeceğinizi unutmayın. bileşen.

Genişletilmiş AMP Bileşenleri

Genişletilmiş AMP bileşenleri olarak JavaScript çalışma zamanının bir parçası değil, sen her zaman onları almanız gerekir içinde AMP sayfasını kullanmak istediğiniz bölümü.

Not: bileşen sürümleri gelecekte değişebilir, bu nedenle mevcut sürümü kontrol et belgelerde.

5. amp-işitsel

değiştirir HTML5 etiketi ve mümkün kılar HTML5 ses dosyalarını doğrudan gömme AMP sayfalarında.

Kullanmak için belirtmeniz gerekir. src, Genişlik ve yükseklik özellikleri ve ayrıca isteğe bağlı üç özellik ekleyebilirsiniz: otomatik oynatma, döngü ve sessiz.

Aynı zamanda iyi bir fikir olabilir geri dönüş ses dosyaları ekle HTML5'i desteklemeyen tarayıcılara sahip kullanıcılar için. Bunu kullanarak yapabilirsiniz. geri çekil özellik ve sadece yukarıda belirtilenlerde olduğu gibi bileşen.

AMP bileşeni, aynı ses formatlarını destekler. HTML5 etiketi.

  
 
Tarayıcınız HTML5 sesi desteklemiyor.
 
    

Kullanmak , aşağıdaki betiği AMP belgenizin bir kısmı:

6. amper-iframe

iframe görüntüler AMP belgelerinde. normal HTML iframe'lerinden daha güvenli olması için yapılmıştır. Bu yüzden onlar varsayılan olarak korumalı alan.

İle ilgili bazı kurallar var. doğrulamayı geçmek için takip etmelisin.

Belirtmeniz gerekir Genişlik, yükseklik, ve kum havuzu Öznitellikler. kum havuzu öznitelik varsayılan olarak boştur, ancak bunu yapmak için farklı değerler verebilirsiniz. iframe davranışını değiştir, Örneğinsandbox = "allow-komut"iframe'in JavaScript çalıştırmasına izin verir. Standart iframe'lerin niteliklerini de kullanabilirsiniz.

Boyutları tarafından önceden tanımlanmış Genişlik ve yükseklik öznitelikleri, çalışma zamanında yeniden boyutlandırmak için bir yol var. Kullanmak için bileşenine aşağıdaki komut dosyasını AMP sayfanıza ekleyin:

7. amper-akordeon

Akordeonlar Mobil tasarımda, yerden tasarruf sağladıkları halde, içeriği hala erişilebilir bir şekilde görüntüleyen sık kullanılan bir UI deseni oluşturur.. mümkün kılar hızlıca akordeon ekleyin AMP sayfalarına.

Akordeon bölümleri

  
 
Bölüm 1
 
Bölüm 1'in İçeriği
 
 
 
Bölüm 2
 
2. Bölümün İçeriği
 
 
 
Bölüm 3
 
    
 
  

  genişletmek