Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
Bir AMP Sayfası Nasıl Oluşturulur ?

Bir AMP Sayfası Nasıl Oluşturulur ?

AMP, Google tarafından geliştirilen bir proje olduğunu daha önce ki yazımda bahsetmiştim. Bu yazımda ise bir  AMP Sayfası Nasıl Oluşturulur ? AMP Yazım Kuralları Nedir ? sorularına cevap bulacağız ve ilk amp sayfamızı hep beraber oluşturmuş olacağız.

AMP Nedir ? Nasıl Çalışır ?

Daha önce ki yazım olan AMP Nedir ? Nasıl Çalışır ? ‘da AMP’nin ne olduğunu, nasıl çalıştığını anlatmıştım. AMP, HTML5’in geliştirilmesiyle beraber ortaya çıkmış bir şey, HTML diline benzer bir yazım şekli olsa da HTML’den kendisini ayıran ve kendisine has bir yazım kuralları mevcut. Bu yazım kurallarına uyulmadığı müddetçe standart bir html sayfası oluşturmuş olursunuz, amp sayfası değil.

Gelin ilk önce AMP Yazım Kuralları Nedir ? sorusuna cevap bulalım.

AMP Yazım Kuralları Nedir ?

Aşağıda ki tablodan bir amp sayfası için gerekli olan kodları bulabilir ve bu kodların kullanım amaçlarını öğrenebilirsiniz. Tabloda yer alan kurallar amp için temel kurallardır. Daha spesifik sayfalar için başka kuralları da mevcuttur. Detaylı bilgiyi amp projesinin sayfasından öğrenebilirsiniz. [Detaylı bilgi]

 

 Kural Kural Açıklaması
Sayfanın en başında  <!doctype html>  etiketi mutlaka olmalıdır.Standart bir html etiketinde olduğu gibi amp sayfalarımız için de bu etiketin kullanılması zorunludur.
Üst kısımda bulunması gereken bir diğer etiketimiz ise <html ⚡>bunun yerine <html amp> etiketi de kullanılabilir.Bu aşamada kullanılan ⚡ işareti ilgili sayfanın bir AMP sayfası olduğunu gösterir. Bunun yerine direkt amp yazarakta bunu sağlayabilirsiniz.
<meta name="viewport" content="width=device-width,minimum-scale=1"> Bu kodu yine <head> etiketinden sonra eklenmektedir.Ayrıca bu koda opsiyonel olarak initial-scale=1 parametresi de eklenebilir.Bu etiket HTML5 ile gelmiş bir meta etikettir. Sayfanın mobil cihazlara duyarlı (responsive) olduğunu belirtir.
İçerik kısmı için <head> ve <body> etiketleri kullanılabilir.Bu etiketler opsiyoneldir ve standart html etiketlerindendir.
<meta charset="utf-8"> Bu etiketi de <head> tagı içerisinde kullanılmalıdır.Bu etiket sayfamızın kodlama dilini gösterir. Standart html etiketlerinden birisidir.
Bu kod  <script async src="https://cdn.ampproject.org/v0.js"></script> yine  <head> tagı içerisinde kullanılmalıdır.AMP için gerekli olan ve kullanılması zorunlu olan JavaScript kütüphanesidir ve bu dosyayı sayfanız dahil etmeniz gerekir.
<link rel="canonical" href="site_adresiniz_ampsiz"> Bu kodu da yine <head> etiketi içerisinde kullanmalısınız.Bu kod ile Google’ye bulunduğu sayfanın AMP’siz adresinin olduğunu gösterir. Yani orijinal adresi belirtmenizi sağlar.

AMP’nin yazım kuralları aşağı – yukarı HTML5 gibi desek yanlış olmaz. HTML5’in yazım kurallarından tek farkı ikinci kuralda yer alan <html ⚡>  ya da <html amp> bu kod olsa gerek. Onun dışında kalan her şey standart bir html5 sayfasında olan etiketlerden ibaret. Fakat yazım kuralları sadece bunlardan ibaret değil. Bunlar bir AMP sayfasında olmazsa olmaz yazım kuralları ve etiketlerdir.

AMP sayfanızda mutlaka olması gereken bir CSS kod satırı mevcut. Bu kod satırını satır içi yazmanız gerekmektedir. Harici bir CSS dosyasıyla eklemeniz yazım yanlışı yapmanızı sağlar ve AMP sayfanız geçersiz olacaktır. AMP sayfalarınızda kullanmanız gereken en temel CSS kodu;

<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>

 

Bu kod üzerinde çok fazla oynama yapmayın derim, ben kurcaladım çokta fayda sağlamıyor. Sadece verilen değerlerde ufak oynamalar yapabiliyorsunuz. Ekstra bir kod eklemeniz veyahut çıkartmanız tüm yapının bozulmasına sebep oluyor.

Yukarıda ki CSS kodunu yine <head> etiketi içerisinde kullanılmaktadır.

 Bir AMP Sayfası Nasıl Oluşturulur ?

Aşağıda ki kodu kopyalayıp, bir index.html dosyasına yapıştırarak bir amp sayfası oluşturabilirsiniz. Kodların içerisinde kullandığımız bir çok şeyi yukarıda yazım kuralları kısmında açıkladım.

<!doctype html>
<html amp lang="tr">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP Sayfasına Hoşgeldiniz</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>
  </head>
  <body>
    <h1>Hızlandırılmış mobil sayfaya hoşgeldiniz!</h1>
  </body>
</html>

 

Birçoğunuz bu standart,düz html kodlaması bi’ fark göremedim dediğini duyar gibiyim. Fark birazdan başlayacak 🙂

Bir AMP Sayfasına Resim Nasıl Eklenir ?

Normalde biz html kodlamasında basit şekilde şu kodu kullanıyoruz;

<img src="resmin_adresi" alt="ilk resim" width="90" height="90" title="İlk Resim">

Bu kodu aynen AMP sayfanıza yerleştirdiğiniz de resim gözükecektir. Ancak sayfanız AMP sayfası olmaktan çıkacaktır. Çünkü; AMP’de bu şekilde resim gösterim bir nevi yasaktır, kural dışıdır. Bu kodlama yerine AMP’nin yazım kurallarına göre kullanmanız gerekiyor. Oda şöyle;

<amp-img src="ilk-resim.jpg" alt="İlk Resim" height="400" width="800"></amp-img>

<amp-img> kodu dikkatinizi çekmiştir. AMP daha düzenli bir kodlama yapabilmek ve mobil internet tarayıcılarının sayfanın içerisinde ki yapıyı daha kolay anlayabilmesi ve işleyebilmesi adına bir çok şey için bu tarz gruplandırmalar yapmıştır. Resimler için bu etiketi kullanıyoruz. Peki, diğer etiketler nedir ?

Özel CSS Kodlaması Nasıl Yapacağım ?

AMP’de harici bir css dosyası kullanamıyorsunuz. Yazdığınız tüm css kodları satır içi yani inline olarak yazılmadır. Ancak bununda belli bir sınırı var. Satır içi yazacağınız CSS kodununda belli bir limiti mevcut, bu limiti aşarsanız hata alırsınız.

Kendize ait CSS kodlarını yazmak istiyorsanız bunu <style amp-custom> etiketi ile yapabiliyorsunuz. Örneğin;

<style amp-custom>
 /* Özel css kodlarınızın hepsi burada bulunmalı,buraya yazmalısınız */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

Bu etiket yine <head> içinde olmalıdır aksi takdirde hata almaktasınız.

AMP Olmayan Sayfamı AMP’li Sayfama Nasıl Yönlendirebilirim ?

AMP olmayan bir sayfanızın AMP’li versiyonunu hazırladınız ve AMP’nin istediği gibi kodlama yapıp hazırladınız. AMP olmayan sayfanız AMP’li sayfaya nasıl yönlendireceksiniz ? Bunu yapabilmek için aşağıda ki amp’li olmayan sayfanızın <head>  etiketi içerisine ekleyiniz.

<link rel="amphtml" href="https://site_adresiniz/ampli-sayfaniz.html">

Aynı şekilde AMP’li bir sayfanızı amp’siz sayfaya yönlendirmek için de standart html etiketi olan canonical etiketini kullanacaksınız.

<link rel="canonical" href="https://site_adresiniz.com/ampsiz-sayfa.html">

Ancak bu kodlar sadece arama motorlarının botları için geçerlidir. Kullanıcılar için yönlendirme yapmak için .htaccess kullanarak yönlendirme yapmanız gerekebilir.

Tüm bunlar basit bir AMP sayfası oluşturmak için yeterlidir. Bu rehber niteliğinde ki yazı ile sizde kendinize özel amp sayfaları oluşturabilir ve İnternet sitenizi hızlandırılmış mobil sayfalar ile güçlendirip, kullanıcılarınıza iyi bir deneyim sunabilirsiniz. Bir sonra ki yazımda AMP’i WordPress üzerinde nasıl kullanacağımızı, eklenti ayarlarını nasıl yapacağımızla ile ilgili detaylı bir rehber yazı hazırlayacağım.

Şimdilik, hoşcakalın.

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • Bir İnternet Sitesi Nasıl Hızlanır? (Zaman Algısı)

    Bir İnternet Sitesi Nasıl Hızlanır? (Zaman Algısı)

    Geldiğimiz şu noktada her işimizi hızlı bir şekilde yapmaya çalışıyoruz, her şey hızlı olmak zorunda. Ben de dahil olmak üzere tüm geliştirici ve kullanıcı olarak düşünen herkes, hıza "iş" olarak odaklanıyoruz. Sonuçta hepimizi en iyi sonuçlara yönlendirilmeyi severiz, en hızlı şekilde sonuca ulaşmayı hedefleriz lakin izlenmesi gereken net bir yol…
  • Cloudflare Accelerated Mobile Links Desteğini Bitiriyor!

    Cloudflare Accelerated Mobile Links Desteğini Bitiriyor!

    Cloudflare ücretsiz olarak kullanıcılarının kullanımına sunduğu Accelerated Mobile Links özelliğine verdiği geliştirme desteğini 30 Nisan 2019'da bitireceğini duyurdu. Dünya'nın en çok tercih edilen güvenlik ve CDN hizmeti olan Cloudflare, Google'ın geliştirmekte olduğu AMP teknolojisine AML adında ki teknolojisiyle destek sağlıyordu. Cloudflare üzerinden sitesini yayınlayan kullanıcılar AMP sayfalarının daha hızlı ve…
  • Google’ın Yeni Search Console Güncellemesi

    Google’ın Yeni Search Console Güncellemesi

    Geçtiğimiz yıl Google, site yöneticilerini yakından ilgilendiren bir güncelleme gerçekleştirdi. Ücretsiz olarak internet sitesi sahiplerinin kullanmakta olduğu Google Search Console servisi diğer Google servisleri gibi bir takım arayüz güncellemeleri almıştı. Beta olarak kullanıma sunulan bu yeni search console güncellemesi eski search console'un yerini alması planlandı. Artık resmi olarak tüm internet…
  • Visual Studio Code İçin Kullandığım Eklentiler ve Ayarlar

    Visual Studio Code İçin Kullandığım Eklentiler ve Ayarlar

    İster arayüz geliştiricisi olun ister arkaplan geliştiricisi. Her ne olursanız olun bir kod düzenleme editörüne ihtiyaç duyuyorsunuz. Şuana kadar Notepad++, Sublime Text gibi editörler kullandım ancak yaklaşık 1,5 yıldır Microsoft tarafından geliştirilen ücretsiz kod düzenleme editörü olan Visual Studio Code programını kullanmaktayım. Gerek büyük,karmaşık tüm projeler de oldukça stabil ve…
Bir AMP Sayfası Nasıl Oluşturulur ? için Yorum'da Bulun

Bir Cevap Yaz

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.