Aşağıdaki makale size yardımcı olacaktır:Blogger için AMP Adım Adım Uygulama Kılavuzu 2023 – Showeblogin
2023’te Blogger için AMP: AMP uygulayabilirsiniz (Ahızlandırılmış Mobile Pyaşları) basit bir değişiklikle blogger blogunuza (BlogSpot) ekleyin. HTML Şablonu blogger temanızın Çok kolay ve herhangi bir uzmana ihtiyaç yok. Bunu kendi başına yapabilirsin.
Profesyonel Öneri: Çevrimiçi işletmeniz veya hizmetleriniz için bir WordPress Web Sitesi oluşturmanızı şiddetle tavsiye ederim. Daha sonra ÜCRETSİZ AMP eklentilerini kurabilirsiniz.
Biliyor musun? Canlı ziyaretçilerin %49’undan fazlası bir web sayfasının 2 saniye içinde yüklenmesini beklemektedir. Önemli Web Verileri (CWV), kullanıcı deneyiminin üç yönüne odaklanır:
- En Büyük İçerikli Boya (LCP) ile ölçülen yükleme,
- İlk Giriş Gecikmesi (FID) ile ölçülen etkileşim ve
- Kümülatif Düzen Kaydırma (CLS) ile ölçülen görsel kararlılık.
AMP (Hızlandırılmış Mobil Sayfalar), web sitenizin hızlı, kullanıcı önceliği olmasını ve çevrimiçi para kazanmasını sağlamak için çekici, pürüzsüz ve neredeyse anında yüklenen web sayfalarıdır.
Tüm web sitesi sahipleri, daha fazla organik trafik istiyor ve çoğunlukla kullanıcılar akıllı telefonlarını kullanarak sorgularında arama yapıyor. Bu nedenle blogunuz mobil uyumlu olmalıdır.
Buna göre duyarlı blogger teması kullanmalısınız. İyi haber şu ki, artık blogger varsayılan temaları duyarlı. Ancak, Google tercih ediyor AMP versiyonu mobil ziyaretçiler için tasarlanmış temalar yerine siteler.
Yani, dönüştürmek gerekir mobil blogcu teması yani HTML’den AMP’ye. Başka bir deyişle, https://SuperWebTricks.blogspot.com/ ile biten blogger sayfanızın URL’si?m=1 AMP sürümünde yüklenmelidir.
Blogger Blogu için AMP nasıl uygulanır?
AMP Doğrulayıcı: Blogunuz için AMP’yi uygulamak üzere blogger HTML kodunuzu değiştirmeden önce, sadece kontrol etmek blogunuzun zaten AMP’yi destekleyip desteklemediği.
AMP doğrulama durumu doğruysa, blogunuz zaten AMP sürümünü destekliyor demektir. Ancak, doğrulama durumu yanlışsa bu eğitim kılavuzunu izleyin ve blogger temanızı AMP’ye dönüştürün.
Blogger’ın varsayılan temasını kullanıyorsanız (Contempo Light, Soho, Emporio ve Notable vb.), aşağıdaki hata mesajlarını görebilirsiniz:
- ‘html’ etiketinde zorunlu ‘⚡’ özelliği eksik.
- “style amp-custom” etiketinde zorunlu “amp-custom” özelliği eksik.
- Özel JavaScript’e izin verilmez.
- ‘form’ etiketi, ‘amp-form’ JavaScript uzantısının dahil edilmesini gerektirir.
- ‘onclick’ özelliği ‘a’ etiketinde görünmeyebilir.
- ‘name’ özelliği ‘footer’ etiketinde görünmeyebilir.
- ‘ad’ özniteliği ‘div’ etiketinde görünmeyebilir.
- Özel JavaScript’e izin verilmez.
- Zorunlu ‘meta charset=utf-8’ etiketi eksik veya yanlış.
- Zorunlu etiket ‘genel metin için noscript muhafazası’ eksik veya yanlış.
- Zorunlu etiket ‘head > style[amp-boilerplate]’ eksik veya yanlış.
- Zorunlu etiket ‘noscript > style[amp-boilerplate]’ eksik veya yanlış.
- Zorunlu ‘amphtml motor komut dosyası’ etiketi eksik veya yanlış.
Minimum Gerekli AMP HTML Kodları: Bu, AMP web sayfaları için minimum geçerli HTML kodlarıdır:
Adım-5 (Görüntü Etiketini Değiştirin):
Normalde görsel için etiketini kullanırız ama AMP'de sadece img yerine amp-img kullanmanız gerekir. Bu nedenle, img etiketlerini aşağıdaki örnekteki gibi amp-img etiketleriyle değiştirin:
AMP sayfalarının geçerliliği nasıl kontrol edilir?
Yöntem 1:
AMP sayfanızı Chrome tarayıcısında açın, örneğin –
https://example.blogspot.in/p/amp-page.html
URL'ye “#development=1” ekleyin, örneğin –
https://example.blogspot.in/p/amp-page.html#development=1.
Chrome DevTools konsolunu sağ tıklayın ve açın ve doğrulama hatalarını kontrol edin.
Yöntem-2:
validator.ampproject.org adresindeki web arayüzünü açın.
URL alanına url değerini girin, örneğin –
https://example.blogspot.in/p/amp-page.html
Bu etkileşimli düzenleyicide html kaynağında yapılan herhangi bir değişiklik, etkileşimli yeniden doğrulamayla sonuçlanır.
