Mobil ağ hızlı bir şekilde büyüyor.

Akıllı telefonlar güçlü bir şekilde satmaya devam ediyor. 180 milyar dolar getir 2021 yılına kadar akıllı telefonlarından. 224 milyondan fazla akıllı telefon kullanıcısı ABD’de, mobil web’in herhangi bir web sitesi sahibi için temel bir odak haline getirilmesi.

Mobil web kullanıcılarının sürekli büyümesi, tasarımcılar ve ön uç geliştiricilerin hızlandırılmış mobil sayfalar için uygun tasarımı yakalamalarını önemli hale getirmektedir.

Hızlandırılmış mobil sayfaların pratiği, neyle uyumlu tasarım tercihlerini vurgular. arama motorları dostça algılar tanımlı bir kitle, yüksek kaliteli içerik, doğru biçimlendirme ve sorunsuz mobil uyumluluk dahil. Mobil cihazlarda Google’a göz atarken çeşitli hızlandırılmış mobil sayfalar göreceksiniz arama sonuçlarında AMP kısaltması ile .

Hızlandırılmış mobil sayfalar, mobil cihazlarda hıza öncelik veren özel öğeler içeriyor olsalar da yine de HTML kullanırlar. AMP teknik gereksinimleri tarafından kurulmuştur AMP Projesi Google gibi büyük trafik etkileyicileriyle birlikte standartlar üzerinde çalıştı. Proje, bir mobil cihazdaki sitelere göz atarken karmaşık kullanıcı arayüzlerine ve yavaş yükleme sürelerine yanıt olarak oluşturulmuştur.

AMP, anlık hıza ve tanıdık bir görünüme vurgu yaparak, içerik oluşturucuların sayfalarını AMP çerçevesinde şekillendirebilmelerini sağlar. Çoğu AMP sayfasındaki kazan-merkezli tasarım, içerik sunumu ve renk şemalarındaki farklılıklara rağmen benzer bir navigasyon hissi verir.

Sonuç, düşüş oranlarını artıran, okuyucu etkileşimini ve mobil web göz atmada ustaları daha iyi bir hale getiren daha hızlı ve daha tutarlı bir tarama deneyimidir.

AMP'nin gücü ve potansiyeli ile, tasarımcıların AMP deneyimini optimize etmek için aşağıdaki ipuçlarını dikkate almaları pratiktir, böylece müşterileri çeşitli şekillerde faydalanacaktır.

1. Ana Sayfa için AMP-Atlı Karıncayı düşünün

Ziyaretçilerinizin çoğunun başlayacağı sayfada bir izlenim bırakın. Kullanılabilir ürünleri sergilemek, e-ticaret sitelerine ilgi duymak ve genel içerik görüntüleyenler için AMP'de statik içerik gösterilebilir.

AMP-carousel feature AMP-atlıkarınca özelliği tasarımcıların yatay bir eksende çok sayıda benzer içerik görüntülemelerini sağlar. Başlıktaki karusel bileşenini içe aktardıktan sonra, sürekli bir şerit olarak görünen görüntülerin bir listesini göstermek için type = ”carousel” ' i kullanabilirsiniz. Ziyaretçileri, ana sayfanın ötesinde bir şey görmeye çektiğinizde ön sayfa için ideal olan göz alıcı bir özellik.

2. İlgili Gönderileri ve Ürünleri Göster

Site ziyaretçilerini içeriğinizin derinliklerine inmeye teşvik edin. Bunu, şu anda görüntüledikleri ürünle ilgili ürünlerin veya yayınların listesini göstererek yapabilirsiniz. İlgili içeriğin bir listesini statik olarak yayınlayarak, anlık olarak bunu başarabilirsiniz. kullanma CORS isteğini bir amp-bıyık şablonu Dinamik olarak oluşturulmuş içerik alaka düzeyiyle sonuçlanmak için, özel tercihinize göre kişiselleştirebilirsiniz.

Ziyaretçiler istekleriyle uyumlu olmayan bir açılış sayfası girerse, siteden ayrılır veya Aradıkları şey için daha fazla bak . Ürün alternatiflerinin önerisi, kullanıcının arama sürecini en azından onlara daha iyi bir şekilde çekmek için mükemmel bir yöntemdir. Tam olarak ne aradıklarını bulamıyorlarsa, işi de yapan bir alternatif bulabilirler.

3. Geliştirilecek Alanları Bulmak İçin AMP-Analytics'i Kullanın

Herhangi bir web sitesi sahibinin, ziyaretçilerin içerikle nasıl etkileşimde bulunduğunu bilmesi önemlidir. component bileşen doğrudan veya Google Analytics de dahil olmak üzere üçüncü taraf bir analiz platformuyla entegre edilebilir. İçinde etiketini ekleyin, "type" özelliğini ekleyin ve değeri satıcınıza seçin Çok sayıda seçenek var. component will help website owners have a clearer picture of what pages and design elements are resulting in conversions and which components are experiencing low user engagement. bileşen, web sitesi sahiplerinin hangi sayfaların ve tasarım öğelerinin dönüşümle sonuçlandığı ve hangi bileşenlerin düşük kullanıcı etkileşimi yaşadığı konusunda daha net bir tabloya sahip olmasına yardımcı olur.

AMP ile akıllı önbelleklemenin doğal olarak gömülü olduğu analizleri analiz ederken akılda tutulması önemlidir. Sonuç, normalden daha az trafik görüntüleyebileceğinizdir. Öncelikle numaralarınızı analiz ederken önbelleğe alma öğesini göz önünde bulundurun.

4. Yerleşik Doğrulayıcıyı Kullanın

İdeal olarak, tasarımcılar asla bir şeyleri yanlış anlamayacaklar, ama olabilir. Her şeyin bir sayfada düzgün çalışmasını sağlamak için AMP'nin yerleşik doğrulayıcıyı kullanın. sayfa URL'sinin sonuna # development = 1 ekleyerek. Chrome araç gereçlerini açar ve “AMP doğrulaması başarılı” mesajını görürseniz, her şey çalışıyor demektir. Değilse, sorun çözülene kadar daha derine inebilirsiniz. Ayrıca, resim ve videolardan özel fontlara ve iframe'lere kadar tüm harici kaynakların doğru şekilde yüklendiğini doğrulamak için Chrome araçları'nı da kullanabilirsiniz.

Ayrıca, meta verileri de kullanarak doğrulayabilirsiniz. Google'ın Yapısal Veri Test Aracı ya bir URL getirerek veya bir kod snippet'i ekleyerek. Bu araçlar, her şeyin doğrulanmasını sağlamaya yardımcı olabilir, böylece arama motoru taraması etkinleştirilir. Arama motoru taramayla ilgili notta, herhangi bir satırda "Disallow: / amp /" ifadesinin bulunmadığını doğrulamak için robots.txt dosyanızı da tekrar kontrol edin. Eğer varsa, tarayıcılar AMP dosyalarınıza erişemez.

5. AMP içindeki Reklamları Uygulama

AMP'nin bir diğer faydası, reklamları uygulamak için mevcut bir çerçevedir. Amp-reklam veya amp-embed bileşeni, bir reklamı görüntülemek için bir kapsayıcıdır. Reklamlar, diğer tüm kaynaklarla birlikte yüklenir. özel öğe.

JavaScript, AMP belgesinin içinde yok. Bunun yerine, AMP bir iframe sanal alanından bir iframe yükler. İçindeki genişlik ve yükseklik değerlerini ayarlayabilirsiniz , görüntülenen reklam ağını belirten “type” argümanı ile. "Src" özniteliği, reklam ağlarından daha fazla yapılandırmaya uygun olması için çeşitli veri özellikleriyle birlikte, belirtilen reklam ağı için bir komut dosyası etiketi yükler.

Ayrıca, yer tutucu özelliği aracılığıyla kullanılabilir bir reklam için yer tutucu veya seçenek de belirleyebilirsiniz. Tam medya bileşeni desteğiyle , video reklamları yerel destekle de mümkündür .

Hızlandırılmış mobil sayfalar, mobil kullanıcılar arasında arama motoru görünürlüğünü artırmaya yardımcı olur; özellikle de şimdi Google, arama sonuçlarında AMP sayfalarını benimsiyor.

Ayrıca, hemen çıkma oranını artırmaya çalışan daha hızlı yükleme süreleri, esnek kişiselleştirme ve görsel bileşenler, her zamankinden daha iyi bir mobil kullanıcı deneyimi sağlar.

Hızlandırılmış mobil sayfalar, mobil web kullanıcılarının devam eden büyümesi için harika bir çerçeve sağlar.