🗞️ Manisa Haber

AMP hatası nedir?

14 Haziran 2025 Manisa Haber

AMP Hatası Nedir ve Neden Can Sıkıcıdır?

Web sitenizin mobil cihazlarda hızlı yüklenmesi günümüz internet deneyiminin olmazsa olmazı. İşte tam bu noktada AMP (Accelerated Mobile Pages) devreye giriyor. AMP, temel olarak web sayfalarını mobil cihazlar için çok daha hızlı hale getirmeyi amaçlayan bir teknoloji. Ancak bazen işler planlandığı gibi gitmeyebilir ve karşımıza AMP hataları çıkar. Bu hatalar, sitenizin AMP sürümünün düzgün çalışmasını engeller, bu da hem kullanıcı deneyimini olumsuz etkiler hem de SEO performansınıza zarar verebilir.

Deneyimlerime göre, çoğu AMP hatası aslında oldukça basit ve anlaşılır nedenlerden kaynaklanır. Amaç, bu hataların ne olduğunu anlamak ve onları nasıl gidereceğinizi öğrenmek. Bu sayede hem kullanıcılarınızın sitenizde daha mutlu olmasını sağlarsınız hem de Google gibi arama motorlarında daha iyi sıralamalara ulaşırsınız. Sonuçta, kimse yavaş yüklenen bir sayfada beklemek istemez, değil mi?

En Yaygın AMP Hataları ve Çözümleri

AMP hataları çeşitlilik gösterebilir ama bazıları diğerlerine göre daha sık karşımıza çıkar. Gelin bunlara yakından bakalım:

  1. Gerekli AMP Bileşenlerinin Kullanılmaması veya Yanlış Kullanımı

AMP'nin kendine özgü bir yapısı var. Bazı HTML etiketleri yerine özel AMP bileşenleri kullanmanız gerekir. Örneğin, standart bir <img> etiketi yerine <amp-img> kullanmalısınız. Bu bileşenler, AMP'nin hızlandırma prensiplerine uygun olarak tasarlanmıştır. Bu bileşenleri kullanmazsanız veya yanlış yapılandırırsanız, sayfanız AMP uyumluluğunu kaybeder.

  • Sorun: Sitenizde normal <img> etiketleri kullanmak.
  • Çözüm: Tüm görsellerinizi <amp-img> etiketi ile değiştirin. <amp-img> için width ve height özelliklerini belirtmek zorunludur. Ayrıca, resminiz sayfanın tamamını kaplayacaksa veya belirli bir boyutta görünmesi gerekiyorsa layout="responsive" gibi özellikler ekleyebilirsiniz.
  • Sorun: Videolar için standart <video> etiketi kullanmak.
  • Çözüm: Videolarınız için <amp-video> bileşenini kullanın. Bu bileşen de genişlik, yükseklik ve düzen ayarları gerektirir.

  1. Otomatik Yüklenmeyen Bileşenlerin Kullanımı

AMP, bazı dinamik özellikler için özel bileşenler sunar. Örneğin, bir carousel (kaydırmalı resim galerisi) yapmak istediğinizde bunu standart HTML ile yapamazsınız. Bunun için <amp-carousel> bileşenini kullanmanız gerekir. Eğer bu bileşeni kurmadan içeriği göstermeye çalışırsanız hata alırsınız.

  • Sorun: Lazy load (tembel yükleme) özelliği olmayan standart resimler veya iframe'ler kullanmak.
  • Çözüm: AMP'de çoğu içerik varsayılan olarak lazy load ile yüklenir. Ancak bazı bileşenler için açıkça belirtmeniz gerekebilir. Örneğin, <amp-iframe> kullanıyorsanız, bunun da belirli kısıtlamaları ve kullanım kuralları vardır.
  • Sorun: Sosyal medya gömmeleri için doğrudan kaynak kodunu sayfaya yapıştırmak.
  • Çözüm: Twitter tweetleri için <amp-twitter>, YouTube videoları için <amp-youtube> gibi özel AMP bileşenlerini kullanmalısınız. Bunların doğru kullanımı için her bileşenin kendi dokümantasyonuna göz atmanız önemlidir.

  1. CSS Kurallarına Uymamak

AMP'nin en katı kurallarından biri CSS ile ilgilidir. AMP sayfalarındaki tüm CSS, tek bir <style amp-custom> etiketi içinde bulunmalı ve sayfa boyutunun 75KB'yi geçmemelidir. Ayrıca, inline stiller (yani doğrudan HTML etiketi içine yazılan `style=""` ile) AMP'de yasaktır.

  • Sorun: Sayfanıza harici CSS dosyaları bağlamak.
  • Çözüm: Harici CSS dosyalarındaki tüm stil kurallarını alın ve bunları sayfanızdaki <head> bölümüne yerleştirdiğiniz <style amp-custom> etiketi içine yapıştırın.
  • Sorun: HTML etiketlerine doğrudan stil tanımlamak (`

    `).

  • Çözüm: Inline stilleri kaldırın ve bu stilleri <style amp-custom> bloğu içine taşıyarak ilgili seçicilerle (selector) tanımlayın.
  • Sorun: Kasıtlı olarak 75KB'den büyük CSS dosyaları kullanmak.
  • Çözüm: CSS'inizi optimize edin. Kullanmadığınız stilleri silin. Eğer çok karmaşık stil gereksinimleriniz varsa, bazı AMP bileşenlerinin (örneğin, özel animasyonlar için <amp-animation>) ek CSS bilgisi gerektirebileceğini unutmayın ve bunları dikkatli kullanın.

AMP Hatalarını Tespit Etme ve Giderme İpuçları

AMP hatalarını tespit etmek ve çözmek için kullanabileceğiniz birkaç pratik yol var:

  1. Google Search Console: Web sitenizin performansını izlemek için en iyi araçlardan biri. Search Console'daki "AMP" bölümü, sitenizdeki tüm AMP hatalarını listeler. Hangi sayfaların neden sorunlu olduğunu burada net bir şekilde görebilirsiniz.
  2. AMP Test Aracı: Google'ın sunduğu bu araçla, belirli bir URL'yi girerek o sayfanın AMP uyumluluğunu anında test edebilirsiniz. Bu, bir hatayı giderdikten sonra değişikliği hızlıca kontrol etmek için harikadır.
  3. Geliştirici Konsolu: Tarayıcınızın geliştirici konsolunu (genellikle F12 tuşu ile açılır) kullanarak AMP hatalarını canlı olarak görebilirsiniz. AMP hataları genellikle kırmızı renkte belirtilir ve hatanın ne olduğunu açıkça ifade eder.

Deneyimlerime göre, en büyük hata genellikle "benim işime yarar" mantığıyla hareket edip AMP'nin kurallarına aykırı davranmaktır. AMP, hız için bazı ödünler vermenizi gerektirir. Bu kurallara uyduğunuzda hem siteniz hızlı olur hem de arama motorlarında daha iyi performans gösterirsiniz. Unutmayın, mobil kullanıcılar sabırsızdır ve siz de onların hız beklentisini karşılamalısınız.