AMP

Etkileyici, sorunsuz ve anında

AMP ile kolayca kullanıcı öncelikli web siteleri oluşturun.

Başlayın
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

AMP
nedir?

Etkileyici, sorunsuz çalışan ve anında yüklenen web sayfaları

AMP, web sitenizin hızlı ve kullanıcı öncelikli olmasını ve para kazandırmasını sağlayan basit ve güvenli bir biçimdir. AMP, popüler platformlar boyunca dağıtım imkanı ve düşük işletim ve geliştirme maliyetleriyle web stratejinize uzun dönemli başarı kazandırır.

<amp-img class="resp-img"
  alt="Desktop"
  width="550"
  height="368"
  src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

Açık web'deki kullanıcılar için harika web deneyimleri oluşturun

AMP, cihazlar ve dağıtım platformları arasında tutarlı şekilde hızlı, güzel ve yüksek performanslı web siteleri ve reklamlar oluşturmanıza izin verir. Yayıncılar ve reklamverenler kullanıcı öncelikli bir deneyimi ön planda tutan içeriklerini nasıl sunacaklarına karar verebilirler.

AMP kullanan bir web sitesinin ekran görüntüsü.
AMP kullanan bir web sitesinin ekran görüntüsü.
Kodunuzda esnekliği ve kontrolü elinizde tutun ve karmaşıklığı azaltın Stilinizi kişiselleştirmek için CSS'i ve gerektiğinde en yeni verileri getirmek için dinamik verileri kullanabilirsiniz.
Performansı garanti eden yapı taşları Harika bir web sitesi oluşturmak çok fazla zaman ve çaba gerektirir. AMP bileşenleri zaten en iyi performans için optimize edilmiştir.
Açık web'de herkes için sürdürülebilir bir gelecek inşa edin AMP Projesi, daha iyi, daha hızlı ve daha kullanıcı dostu bir deneyim sunarak webin geleceğini koruyan bir açık kaynak girişimidir.
Web sayfası hızı, kullanıcı deneyimini ve temel iş metriklerini geliştirir AMP sayfaları tüm cihazlarda ve platformlarda neredeyse anında yüklenir.
AMP sayfaları oluşturmak kolaydır Özellikle WordPress veya Drupal gibi yaygın bir CMS kullanıyorsanız, arşivinizin tamamını genellikle birkaç gün içinde dönüştürebilirsiniz.
AMP çeşitli web temas noktalarına uygulanabilir Google, Bing ve Twitter gibi global platformlar tarafından kullanılan AMP, mevcut olduğunda AMP sayfalarını varsayılan yaparak kullanıcılara tüm platformlarda doğal bir deneyim yaşatır.

Hızı, her şeyi kapsayacak şekilde geliştirmeyi taahhüt ediyoruz. Sitemizin yüklenmesi zaman alırsa, ne kadar iyi gazetecilik yaptığımızın bir önemi kalmaz çünkü bazı insanlar içinde ne olduğuna bile bakmadan sayfadan ayrılacaktır.

David Merrell, Kıdemli Ürün Müdürü

Başarı Hikayelerini Okuyun

AMP HTML nelerden oluşur

<!DOCTYPE HTML>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.html">
  <meta name="viewport" content="width=device-width">
  <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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true
      }
    </script>
  </amp-geo>
  <h1>Hello in <span [text]="country">...</span>!</h1>
  <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

Hello
World!

Kurulu bileşenler

AMP HTML, güvenilir performans için bazı kısıtlamaları olan HTML'dir.

AMP HTML sayfasındaki çoğu etiket, normal HTML etiketi olsa da, bazı HTML etiketlerinin yerine AMP'ye özgü etiketler yerleştirilmiştir (AMP teknik özelliklerinde HTML Etiketleri bölümüne de göz atın). AMP HTML bileşenleri olarak da adlandırılan bu özel öğeler, ortak örneklerin verimli bir şekilde uygulanmasını sağlamaktadır.

Örneğin, amp-img etiketi, tam srcset desteği sağlar, üstelik henüz bu özelliği desteklemeyen tarayıcılarda bile bunu yapar. İlk AMP HTML sayfanızı nasıl oluşturabileceğinizi öğrenin.

AMP sayfaları, arama motorları ve diğer platformlar tarafından HTML etiketi aracılığıyla bulunur. Sayfanızın hem bir AMP sürümüne hem de bir AMP olmayan sürümüne ya da yalnızca AMP sürümüne sahip olmayı tercih edebilirsiniz.

AMP Önbellekleri

AMP sayfaları, web'de neredeyse anında yüklenecek şekilde önbelleğe alınabilir. Google gibi platformlar, kendi hizmetlerinden içeriğinizin hızlı yüklenmesini sağlamak için AMP önbelleklerini çalıştırırlar.

Google AMP Önbelleği, geçerli tüm AMP belgelerini sunmak için proxy tabanlı bir içerik dağıtım ağıdır. AMP HTML sayfalarını getirir, önbelleğe alır ve sayfa performansını otomatik olarak iyileştirir. Google AMP Önbelleği kullanılırken, belge, tüm JS dosyaları ve resimler maksimum verimlilik için HTTP 2.0 kullanan aynı kaynaktan yüklenir.
Önbellek, sayfanın çalışacağının garanti edildiğini ve dış kaynaklara bağlı olmadığını doğrulayan yerleşik bir doğrulama sistemiyle birlikte gelir. Doğrulama sistemi, sayfanın işaretlemesinin AMP HTML spesifikasyonuna uygun olduğunu doğrulayan bir dizi onaylama çalıştırır.

Her AMP sayfasıyla birlikte farklı bir doğrulayıcı sürümü gelir. Bu sürüm, sayfa oluşturulduğunda doğrulama hatalarını doğrudan tarayıcı konsoluna kaydeder ve kodunuzdaki karmaşık değişikliklerin performansı ve kullanıcı deneyimini nasıl etkileyebileceğini görmenizi sağlar.

AMP web sitelerinin kullanım örneklerini keşfedin