HTML'i AMP'ye dönüştürmek: adım adım AMP çeviri rehberi

10/10/26

Bir HTML sayfasını AMP'ye çevirmek için beş şey gerekiyor: <html ⚡> ve zorunlu AMP iskeleti (charset, viewport, canonical, AMP çalışma zamanı, boilerplate stili), tüm CSS'in tek bir <style amp-custom> bloğunda ve 75.000 baytın altında toplanması, kendi yazdığınız JavaScript'in ve onclick gibi olay özniteliklerinin kaldırılması, <img>, <video>, <iframe> gibi etiketlerin genişlik ve yüksekliği belli AMP bileşenlerine çevrilmesi ve son olarak sayfanın resmî AMP doğrulayıcısından hatasız geçmesi.

Bunu elle yapabilirsiniz, ama uzun bir sayfada saatler sürer. Ben bu AMP çeviri işini kendi yazdığım AMP converter aracıyla yapıyorum; araç dönüşümü tarayıcıda yapıyor, sonucu resmî doğrulayıcıyla kontrol ediyor ve kalan hataları satır numarasıyla gösteriyor. Aşağıda hem kuralları hem adımları hem de en sık doğrulama hatalarını anlatıyorum.

Önce şunu netleştireyim: neden AMP?

AMP 2026'da bir sıralama avantajı değil. Google, 1 Temmuz 2026'dan beri AMP sonuçlarında kullanıcıyı önbellek yerine doğrudan yayıncının AMP sayfasına gönderiyor ve Search Central güncelleme notunda AMP içeriğinin diğer sayfalar gibi sıralanacağını yazıyor. Yani AMP'ye ancak gerçekten ihtiyacınız varsa dönüştürün: AMP altyapısını sürdüren bir haber sitesi, mevcut AMP sayfalarındaki hataları temizlemek ya da AMP sürümü istenen statik sayfalar gibi. Karar kısmını AMP 2026'da gerekli mi yazısında ayrıca ele aldım.

AMP neyi zorunlu tutuyor

AMP HTML spesifikasyonu kısa ama katı. Bir AMP belgesinde şunlar olmak zorunda:

<!doctype html> ile başlamak.
Üst düzey etiket olarak <html ⚡> (ya da <html amp>).
Açıkça yazılmış <head> ve <body>.
<head> içinde ilk çocuk olarak <meta charset="utf-8">.
width=device-width içeren bir viewport etiketi.
<link rel="canonical">: normal HTML sürümüne, normal sürüm yoksa sayfanın kendisine işaret eden.
https://cdn.ampproject.org/v0.js adresinden async yüklenen AMP çalışma zamanı.
AMP boilerplate stili ve onun <noscript> içindeki karşılığı.

Bunların yanında üç kural dönüşümün asıl yükünü oluşturuyor:

Özel JavaScript yok. Spesifikasyon, AMP bileşenlerinin sağladığı dışında yazar JavaScript'ine izin vermiyor. Menüler, slaytlar, formlar AMP bileşenleriyle yeniden kurulmalı.
CSS tek blokta ve 75.000 baytın altında. Harici stil dosyaları (izin verilen font sağlayıcıları hariç) kullanılamıyor; stil dosyası ve satır içi stiller birlikte 75.000 baytı geçerse sayfa geçersiz oluyor. !important da yasak.
Boyutu belli medya. amp-img gibi bileşenler, sayfa yüklenirken yer ayırabilmek için genişlik, yükseklik ve bir layout değeri istiyor. Kayma olmaması AMP'nin temel fikri.

Minimal geçerli AMP sayfası

Aşağıdaki iskelet geçerli bir AMP belgesinin en küçük hâli. Boilerplate satırı tek satır ve yalnızca boşluk değişikliklerine izin veriliyor; kopyalarken bozmayın.

amp-ornek.html

<!doctype html>
<html ⚡ lang="tr">
<head>
  <meta charset="utf-8">
  <title>Örnek AMP sayfası</title>
  <link rel="canonical" href="https://example.com/ornek-sayfa/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
    body { font-family: system-ui, sans-serif; margin: 0 16px; line-height: 1.6; }
    h1 { font-size: 1.6rem; }
  </style>
</head>
<body>
  <h1>Örnek AMP sayfası</h1>
  <p>Bu sayfa geçerli bir AMP belgesidir.</p>
  <amp-img src="/gorseller/kapak.webp" width="1200" height="675" layout="responsive" alt="Kapak görseli"></amp-img>
</body>
</html>

AMP converter ile adım adım dönüşüm

1. Kaynağı doğru yerden alın

Dönüştüreceğiniz HTML, tarayıcının gördüğü son HTML olmalı. JavaScript ile sonradan doldurulan içerik ham kaynakta yoksa, AMP sürümünde de olmaz. Kaynakta ne olduğunu görmek için kaynak analiz aracını kullanabilirsiniz. CMS kullanıyorsanız sayfanın kaydedilmiş HTML çıktısıyla çalışmak en temizi.

2. HTML'i yapıştırın

Araçta tek sayfa için HTML'i yapıştırmak yeterli. HTML hiçbir sunucuya gönderilmiyor, her şey tarayıcıda dönüyor.

3. Ayarları yapın

Dönüştürmeden önce şu ayarlara bakıyorum:

Canonical URL: AMP sayfasının işaret edeceği normal sayfa adresi.
lang: Türkçe sayfa için tr.
Görsel layout'u: Görsellerin varsayılan layout değeri; içerik görselleri için genelde responsive.
Varsayılan boyutlar: Boyutu ölçülemeyen görseller için kullanılacak genişlik ve yükseklik.
Satır içi stiller: Olduğu gibi bırakılsın mı, yoksa sınıflara mı taşınsın.
Ek CSS: Harici stil dosyalarının içeriği; AMP harici CSS'i yüklemediği için bunu buraya yapıştırmak gerekiyor.

4. Dönüştürün

AMP dönüştürücü bu noktada şunları yapıyor: özel JavaScript'i ve olay özniteliklerini kaldırıyor, CSS'i birleştirip temizleyerek <style amp-custom> bloğuna koyuyor ve 75.000 bayt sınırına göre doluluğu gösteriyor, !important ifadelerini siliyor, <img> etiketlerini amp-img'ye çevirip eksik görsel boyutlarını ölçüyor. <video>, <audio> ve <iframe> AMP bileşenlerine; YouTube, Vimeo, Twitter ve Instagram gömmeleri kendi AMP bileşenlerine dönüşüyor. Formlar amp-form'a çevriliyor; POST kullanan formlarda action-xhr gerektiği için uyarı veriyor. Google Analytics amp-analytics'e, AdSense amp-ad veya amp-auto-ads'e çevriliyor. İzin verilmeyen etiketler temizleniyor; boilerplate, <html ⚡>, charset, AMP çalışma zamanı ve kullanılan bileşenlerin script'leri ekleniyor.

5. Doğrulama döngüsü

Çıktı, cdn.ampproject.org üzerindeki resmî AMP doğrulayıcısıyla (validator_wasm.js) tarayıcıda kontrol ediliyor. Doğrulayıcı bir sorun bildirdiğinde araç onu otomatik düzeltip yeniden doğruluyor ve bunu döngü içinde tekrarlıyor. Otomatik düzeltilemeyen hatalar satır numarasıyla listede kalıyor. Bu kalanlar genelde içerikle ilgili kararlar gerektiriyor: bir widget'ın AMP karşılığı yoksa onu kaldırmak ya da yerine statik bir bağlantı koymak gibi.

AMP çeviri ve doğrulama döngüsü: HTML, AMP çeviri, resmî AMP doğrulayıcısı, otomatik onarım, geçerli AMP

6. Önizleme ve kod

Kod görünümünde son HTML'i, canlı önizlemede de sayfanın mobil ve masaüstü görünümünü kontrol ediyorum. Menü, tablo ve formlar özellikle dikkat istiyor; JavaScript'le çalışan bir şey sessizce kaybolmuş olabilir.

7. Yayına hazırlık

Araç yayın için gereken satırları ayrıca veriyor: normal sayfaya eklenecek <link rel="amphtml"> satırı, AMP sayfasındaki canonical satırı ve Google AMP Cache adresleri. Önbellek adresleri konusunda bir not: Google Arama Temmuz 2026'dan beri kullanıcıyı önbelleğe değil doğrudan sizin AMP sayfanıza gönderiyor, bu yüzden bu adresler artık arama trafiği için gerekli değil.

canonical ve amphtml eşleşmesi

AMP sayfası tek başına yayınlanınca Google onu normal sayfayla ilişkilendiremez. İlişki iki yönlü kuruluyor:

Normal sayfada: <link rel="amphtml" href="https://example.com/ornek-sayfa/amp/">
AMP sayfasında: <link rel="canonical" href="https://example.com/ornek-sayfa/">

Normal sayfa amphtml ile AMP sayfasını, AMP sayfası canonical ile normal sayfayı gösterir

İki adres birbirini birebir göstermeli: aynı protokol, aynı alan adı, aynı sondaki eğik çizgi. Normal sayfanın canonical'ı başka bir adresi gösteriyorsa ya da noindex ise zincir bozulur; bu konuyu canonical ve noindex yazısında anlattım. Google'ın AMP yönergeleri ayrıca AMP adresinin kullanıcıya anlamlı gelmesini istiyor: AMP sürümünü ilgisiz bir alan adında değil, aynı sitenin altında barındırın.

En sık AMP doğrulama hataları

Hata kodları ve mesajlar, AMP doğrulayıcısının kullandığı ifadeler. Açıklamaların bir kısmı amp.dev'deki doğrulama hataları sayfasına dayanıyor.

Kod	Mesaj	Anlamı	Çözüm
`DISALLOWED_TAG`	The tag '%1' is disallowed.	İzin listesinde olmayan bir etiket var (özel `script`, `object` gibi).	Etiketi kaldırın ya da AMP bileşeni karşılığını kullanın.
`DISALLOWED_ATTR`	The attribute '%1' may not appear in tag '%2'.	Etikette izin verilmeyen bir öznitelik var; en sık `onclick`, `onload` gibi olay öznitelikleri.	Özniteliği silin; etkileşim gerekiyorsa AMP bileşenleriyle kurun.
`MANDATORY_ATTR_MISSING`	The mandatory attribute '%1' is missing in tag '%2'.	Zorunlu bir öznitelik eksik; örneğin `responsive` layout'lu `amp-img`'de `height`.	Eksik özniteliği ekleyin.
`CSS_SYNTAX_INVALID_PROPERTY`	CSS syntax error in tag '%1' - invalid property '%2'. ...	O bağlamda izin verilmeyen bir CSS özelliği; sık görüldüğü yer `@keyframes` blokları.	Özelliği izin verilen özelliklerle (mesajda listelenir) değiştirin.
`CSS_SYNTAX_DISALLOWED_IMPORTANT`	Usage of the !important CSS qualifier is not allowed.	CSS'te `!important` var.	`!important`'ı kaldırın, gerekirse seçiciyi daha belirgin yazın.
`STYLESHEET_TOO_LONG`	The author stylesheet specified in tag '%1' is too long ...	`amp-custom` ve satır içi stiller birlikte 75.000 baytı aşıyor.	Kullanılmayan CSS'i temizleyin, tekrar eden kuralları birleştirin.
`MISSING_REQUIRED_EXTENSION`	The tag '%1' requires including the '%2' extension JavaScript.	Bir AMP bileşeni kullanılmış ama script'i `<head>`'e eklenmemiş.	İlgili `custom-element` script'ini ekleyin.
`IMPLIED_LAYOUT_INVALID`	The implied layout '%1' is not supported by tag '%2'.	`layout`, `width` ve `height` verilmemiş; varsayılan layout bu etikette desteklenmiyor.	`width`, `height` ve uygun bir `layout` ekleyin.
`SPECIFIED_LAYOUT_INVALID`	The specified layout '%1' is not supported by tag '%2'.	Yazılan `layout` değeri bu bileşende desteklenmiyor.	Bileşenin desteklediği bir layout seçin.
`MANDATORY_TAG_MISSING`	The mandatory tag '%1' is missing or incorrect.	İskeletten bir parça eksik ya da bozuk; çoğu zaman boilerplate.	Zorunlu etiketi spesifikasyondaki hâliyle ekleyin.

Benim deneyimimde CSS kaynaklı hatalar en çok vakit alanlar. Hazır tema CSS'i çoğu zaman tek başına 75.000 baytı geçiyor; çözüm genelde o sayfada kullanılmayan kuralları ayıklamak.

Search Console ve AMP Test ile kontrol

Yayından sonra üç kontrol yapıyorum. Google'ın AMP doğrulama dokümanı da benzer bir sıra öneriyor.

AMP Test: AMP Test aracına URL'yi ya da kodu verip geçerliliği kontrol ediyorum.
URL Denetimi: Search Console'da normal sayfayı denetliyorum. URL Denetimi yardım sayfasına göre bağlı bir AMP sürümü olan sayfada AMP sonucunu seçerek AMP bilgilerini görebiliyorsunuz; canlı testte de bağlı AMP test ediliyor.
AMP raporu: Çok sayfalı dönüşümlerde Search Console'daki AMP raporunda geçerli ve hatalı sayfaların sayısını izliyorum.

Kontrol listesi

AMP sürümüne gerçekten ihtiyacım var
Kaynak HTML, tarayıcının gördüğü son hâl
Canonical URL ve lang ayarlandı
Harici CSS içeriği ek CSS alanına eklendi
Doğrulayıcıda kalan hata yok
Mobil ve masaüstü önizlemede menü, tablo ve formlar çalışıyor
Normal sayfaya rel="amphtml", AMP sayfasına rel="canonical" eklendi
AMP Test ve URL Denetimi temiz

Kısacası iyi bir AMP çeviri, zorunlu iskeleti eklemekten çok, sayfadaki JavaScript ve CSS borcunu temizlemek demek. Bu işi elle yapmak istemiyorsanız ücretsiz AMP dönüştürücüyü deneyin; çıktıyı yayınlamadan önce yine de yukarıdaki listeyi bir kez geçin.

Comments / questions

If you have a question about any topic or wish to contact me: Telegram or send an email to [email protected] Thanks!