• SEO Şefi
  • +90 422 323 74 47
  • info@seosefi.com
AMP Stories Nedir? (AMP Hikayeler) Nasıl Yapılır?

AMP Stories Nedir? (AMP Hikayeler) Nasıl Yapılır?

Geçtiğimiz günlerde Amsterdam’da yapılan AMP konferansın da Google yeni özelliği olan AMP hikayelerini tanıttı. Beklenmedik bir gelişme olan bu özellik etkileşimi artırmak ve insanlara görsel değeri yüksek içerikler oluşturmak için geliştirildi ancak kelime bazlı mobil arama sonuçlarında gösterilecek olması mobil SEO’da yeni bir dönemin başlaması anlamına geliyor.

Görsel bir AMP hikayesi oluşturmak, yazımızın sonunda AMP hikayelerini nasıl oluşturabileceğinizi öğreneceksiniz ancak şuan için bu özellik tüm sitelere açılmadı sadece Google belirlediği siteler bu özelliği kullanabiliyor. Eğer test aşamasından geçerse tüm siteler için aktif edilecek veya başvurularla aşama aşama kabul edilen siteler özellikten faydalanabilecek.

Amp Stories Kurulumu

Başlamadan önce ihtiyacınız olacak bazı bilgiler;

  • HTML, CSS ve JavaScript hakkında temel bilgi (hiç bilmeyenler biraz araştırma ve adımları sırasıyla takip ederek yapabilir)
  • AMP ne olduğunu bilmek, sitenizde AMP kullanıyor olmanız.
  • Seçtiğiniz herhangi bir web tarayıcısı.
  • Metin içeriğiniz.

Geliştirme ortamını kurmak

  1. Aşama
  • Daha önce hazırlanmış örneği buradan indirin.
  • Zip dosyası içinde bulunan dosyayı çıkartın. İçerisinde bulunan video, metin ve resimler hikayemizde yer alacak görsel çalışmalardır. Pets.html hikayemizin başlangıç noktasıdır. pets-completed.html hikayenin tamamlanmış halidir.

Dosyaları açmakta sorun yaşamanız halinde internet explorer, mozilla veya Google chrome gibi farklı tarayıcılar üzerinde deneyebilirsiniz.

2.Aşama

Örnek öyküleri test etmek ve üzerinde çalışmak için dosyalara bir web tarayıcısından ulaşmanız gerekir. Değişiklik yapma amacıyla yerel web sunucu oluşturarak dosyaların problemsiz çalışmasını sağlamanız gerekir. Local sunucu oluşturmak için:

Kurulumu başarılı bir şekilde yaparsanız dosyalar “http://localhost:8000/pets-completed.html” olarak gözükmeye başlayacaktır. Tarayıcıda ilk defa dosyayı açmak istediğinizde “ENABLE” etkinleştirme butonu çıkacaktır. Bu alanı işaretleyerek içeriğin gösterilmesine onay vermelisiniz.

AMP hikaye bölümlerini anlama

AMP hikayesi, görüntü, video, grafik, ses gibi etkili araçlar kullanarak bilgileri görsel hikayelerle anlatma deneyimidir. Görsel açıdan zengin içerikler okuyucuları daha çok etkiler.

 

AMP hikayeleri farklı bileşenlerin tek bir sayfa üzerinde gösterilmesiyle oluşur. Her bir bileşen sayfanın amfiksiyonunu temsil ederek katmanlar halinde hikayeyi oluşturur.

AMP Stories Hikaye Yayınlama

amp-story, içeriği birleştirmek ve sunumunu yapmak için kullanılan bir bileşendir. Oluşturacağınız sayfalar amp-story ile bir bütün haline getirilir.

<head>
<script async custom-element="amp-story"
        src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script

Sıradaki adımda oluşturduğunuz belgeleri <amp-story>’ı, <body> aralığına ekleyin örneğin;

<body>
  <amp-story standalone>
  </amp-story>
</body

Hazırladığınız öğelerin çalışması için <amp-story>, body içinde olmak zorundadır. Eğer farklı bir alan yerleştirirseniz veya hatalı bir kod yapısında tutarsanız hazırladığınız içerik çalışmaz.

Kapak sayfası nasıl oluşturulur?

Hikaye oluştururken her bir sayfa için ayrı kapak sayfası yapabilirsiniz <amp-story-page> kapağı temsil eder. Her farklı slayt için ayrı ayrı düzenlemeler yapabilirsiniz. Eğer her sayfa için ayrı kapaklar hazırlamazsanız ilk sayfanın kapağı diğer sayfalarda gösterilir.

Örneğin;

<amp-story standalone>
   <amp-story-page id="cover">
   </amp-story-page>
</amp-story>

Kapak sayfalarınız hazır ancak bu kadarı yeterli değildir. Sayfamızda en az bir katman belirlememiz gerekir.

Sayfada katman oluşturma

Grafiklerde olduğu gibi, katmanları AMP hikayesinde kullanarak görsel efektler oluşturabilirsiniz. Eklenen katmanlar üst üste eklenir, birinci kat en alt katmandır ve sonrakiler bunun üstüne gelir.

  • 1. Katman: Arka plan olarak kullanılan görseldir.
  • 2. Katman: Hikayenin başlığı ve satır başı

1.Katmanı oluşturmak

Kapak sayfamızı oluşturacak katmanı ekleyelim. Katman, ekranı dolduracak şekilde eklenir. Katmanı, <amp-story-grid-layer> öğesi olarak eklemeniz gerekmektedir. Bu kod, <amp-story-page>’ın alt satırı olarak eklenmesi gerekir. Görüntünün ekranın tamamını kaplamasını istiyorsanız template=”fill” eklemelisiniz. Katman içerisine <amp-image> öğesi ekleyin, cover.jpg dosyasının 720×1280 piksel boyutlarına uygun olmasına dikkat etmelisiniz.

<amp-story-page id="cover">
  <amp-story-grid-layer template="fill">
    <amp-img src="assets/cover.jpg"
        width="720" height="1280" 
        layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

Şuana kadar yaptıklarınızı görüntülemek için http://localhost:8000/pets.html görüntüleyin eğer aşağıdaki gibi gözüküyorsa şuana kadar yaptıklarınız doğru anlamına gelmektedir.

2.Katmanı oluşturmak

Arka planımız hazır ancak arka planın üstüne koyacak elementlere ihtiyacımız var. 2. katman daha çok içeriğin detaylarını göstermek içindir. İkinci katman eklemek için 1. katman şablonunu kullanalım, daha karmaşık hale getirmeden <amp-story-grid-layer> içinde AMP ve HTML elementlerini ekleyebilirsiniz.

Şablonu kullanarak elementleri yerleştirme

Şablonu oluştururken alt elementler kullanarak çalışmalarınızı daha iyi hale getirebilirsiniz. Desteklenen  CSS detaylarına buradan ulaşabilirsiniz.

Şablonu doldurmak

Dolgu şablonu, ekran katmanındaki alt ögedir. Bu katmanın altında başka alt öge gösterilmez. Dolgu şablonunda resim veya video kullanarak arka plan oluşturabilirsiniz.

<amp-story-grid-layer template="fill">
  <amp-img src="arkaplanresmi.png"
      width="720" height="1280" 
      layout="responsive">
  </amp-img>
</amp-story-grid-layer>

Dikey Şablon

Dikey şablon, alt ögeleri y ekseni boyunca yerleştirir. Elementler ekranın üst kısmıyla aynı hizaya getirilir ve ekranın x ekseni baz alınır. Dikey şablon, elementleri dikey olarak yerleştirmek istediğinizde iyi sonuçlar verir.

<amp-story-grid-layer template="vertical">
<p>element 1</p> 
<p>element 2</p> 
<p>element 3</p> 
</amp-story-grid-layer>


Yatay Şablon

Yatay şablon, elementleri x ekseni boyunca yerleştirir. Elementler ekranı y ekranı boyunca kaplayacak şekilde hizalar. İçerikleri yatay olarak yerleştirmek istediğinizde iyi sonuçlar almanızı sağlar.

<amp-story-grid-layer template="horizontal"> 
<p>element 1</p> 
<p>element 2</p> 
<p>element 3</p> 
</amp-story-grid-layer>


Üçüncül Şablonlar

Üçüncü şablon, ekranı eşit boyutta üç sıraya böler ve içerikleri ayırmanızı sağlar. İçerik bölümlerini düzenlemek için “grid-area” adlandırması yapabilirsiniz. “upper-third” en üst bölüm, “middle-third” orta bölüm, “lower-third” alt bölüm olarak içerikleri düzenlemeyi kolaylaştırabilirsiniz.

Örneğin, katmana ekleyeceğiniz iki element varsa ilk içeriği grid-area=”upper-third” ve ikinciyi grid-area=”lower-third” olarak belirleyebilirsiniz.

<amp-story-grid-layer template="thirds">
  <h1 grid-area="upper-third">element 1</h1>
  <p grid-area="lower-third">element 2</p>
</amp-story-grid-layer>

Kapak sayfasını tamamlama

Şuana kadar AMP hikayelerinin katmanlarının çalışma mantığından bahsettik, oldukça kolay ve düzenlemesi kolay yöntemlerle içerikleri hazırlayabileceksiniz.

Kapak fotoğrafımız için ikinci katmanı tamamlamamız gerekir.  Burada arka planda olan görsel, üzerine başlık, altına metin içeriği yerleştirerek ilk aşamayı tamamlarız.

<amp-story-grid-layer>
 <!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
  <h1>İçerik Başlığı</h1>
  <p>Alt Metin</p>
</amp-story-grid-layer>

Şuana kadar anlattıklarımızı uyguladığınızda çalışma sayfanızı yenilediğiniz de karşınıza aşağıdaki gibi bir görüntü çıkacaktır.

Daha Fazla Sayfa Oluşturma

AMP hikayesini genişletmek ve daha fazla içeriğe yer vermek için ek sayfalar oluşturmanız gerekmektedir. Aşağıda verilen bilgilere dayanarak, sayfalarınızı oluşturmaya devam edin. Şuana kadar öğrendikleriniz yeni sayfalar içinde kullanılacak sadece püf noktalara dikkat etmeniz gerekmektedir.

İpucu: Her sayfanın benzersiz bir kimliği olması için”id” eklemeyi unutmayın (örn: id=”page1″)

Sayfa 1: Kediler

Bir görüntüyü ve metni tek bir katmanda nasıl göstereceğini gösterir. 1. Katman, dikey şablonu uygular. 3 unsur içerir:

  • <h1> etiketiyle başlık oluşturmak.
  • Duyarlı bir amp-img (kat.jpg, 720 x 1280px) (arka plan)
  • Sonraki sayfa ve alıntılar <q> ile takip edilir.

Sayfa 2: Köpekler

İki katmanda nasıl görsellerin tam gösterileceği, başlık ve metinleri hazırlanacağına bakalım:

  • Katman 1: Şablon doldurma, responsive amp-img (dog.jpg, 720 x 1280px )
  • Katman 2: Üçüncü şablonu uygulama, 2 unsur içerir:
  • <h1> başlığı oluşturmak
  • Bir element “grid-area”‘da <p> aralığında “lower-third” yani 3. bölümde gösterilir.

Sayfalar aynı mantıkta oluşturulmaktadır. Başlıkları, içeriği ve arka planı değiştirerek istediğiniz sayıda sayfa oluşturabilirsiniz.  Arka plana video ekleyebilir veya sayfa şablonlarını değiştirebilirsiniz.

Elementleri hareketlendirme

Bir sayfadaki ögelere animasyonlar ekleyerek daha etkili bir AMP hikayesi geliştirebilirsiniz. Örneğin, başlığın soldan girişi, animasyon fotoğraf geçişleri gibi çerçeveli AMP hikayeleri oluşturabilirsiniz.

Kullanabileceğiniz bazı animasyonlar;

drop, fade-in, fly-in-bottom, fly-in-left, fly-in-right, fly-in-top, pulse, rotate-in-left, rotate-in-right, twirl-in, whoosh-in-left, whoosh-in-right.

Elmentlerden birine animasyon eklemek istiyorsanız girişine animate-in=”<animation preset>” eklemeniz gerekmektedir. Örneğin, bir yazı girişine drop animasyonu eklemek için animate-in=”drop” kodunu eklemeniz gerekir.

<amp-story-page id="page3">
  ...
  <amp-story-grid-layer template="vertical">
    <p animate-in="drop">Sayfada drop animasyonuyla gözükecek olan yazı</p>
</amp-story-page>

Animasyon zamanlaması

Kullanmak istediğiniz animasyonların hareketleri için zaman belirlemeniz gerekmektedir. Delay (gecikme): Animasyonun başlamasını geciktirmek için kullanılır. Örneğin, 3 saniyelik delay, animasyonun 3 saniye sonra başlamasını sağlar.

Duration (süre): Animasyonun gerçekleştiği süre. Örneğin baştan sona eklenen animasyon efekti fade-in’ 500 ms eklenmesi hareketin başlaması ve ona ereceği zamanı temsil eder.

Aşağıda yer alan örneği inceleyerek istediğiniz süre düzenlemelerini yapabilirsiniz.

<amp-story-page id="my-page">
  ...
  <p class="my-element"
      animate-in="fly-in-left"
      animate-in-delay="0.3s"
      animate-in-duration="0.5s">
    I'm going to fly into the page from the left!
  </div>
</amp-story-page>

Son sayfanın hazırlanması

Şuana kadar sayfaları hazırlamayı ve nasıl düzenlemeniz gerektiğini anlattık, bu sürecin uygulaması sizin yaratıcılığınıza göre değişkenlikler göstererek hazırlanabilir. Kapanış sayfası da yine sizin istediğiniz gibi düzenlemelerle son sayfa olarak hazırlanır. Son sayfa örneği;

<amp-story-page id="page5">
  <amp-story-grid-layer template="vertical" class="noedge">
    <div class="wrapper">
      <amp-img src="assets/cat.jpg"
          width="720" height="1280"
          layout="responsive">
      </amp-img>
      <amp-img src="assets/dog.jpg"
          width="720" height="1280"
          layout="responsive">
      </amp-img>
      <amp-img src="assets/bird.jpg"
          width="720" height="1280"
          layout="responsive">
      </amp-img>
      <amp-img src="assets/rabbit.jpg"
          width="720" height="1280"
          layout="responsive">
      </amp-img>
    </div>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical" class="center-text">
    <p class="banner-text">Pets can lower your stress levels!</p>
  </amp-story-grid-layer>
</amp-story-page>

Yukarıdaki kodu kullanıp çalışma sayfasını yenilediğiniz de karşınıza aşağıdaki görüntü gelecektir.

Sayfamız iki katman olarak hazırlandı. İlk katman ekranı kaplayan hayvan fotoğrafları, ikinci katma ise metinlerdir. Ancak basit bir sayfa olarak kalmasını istemiyorsanız kullanılan elementlere animasyonlar ekleyerek daha aktif bir çalışma ortaya çıkarabilirsiniz. Örneğin;

<p class="banner-text"
  animate-in="whoosh-in-right">
Pets can lower your stress levels!</p>

Kod yapısını kullanarak metne “whoosh-in-right” animasyonu eklemiş olursunuz. Eğer bu yeterli değilse fotoğraflara hareket vermek istiyorsanız aşağıdaki kod yapısını örnek alarak farklı animasyonlarda ekleyebilirsiniz.

<amp-img src="assets/cat.jpg"
  width="720" height="1280"
  layout="responsive"
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/dog.jpg"
  width="720" height="1280"
  layout="responsive"
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/bird.jpg"
  width="720" height="1280"
  layout="responsive"
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/rabbit.jpg"
  width="720" height="1280"
  layout="responsive"
  animate-in="fade-in">
</amp-img>

Eğer üste yer aldığı gibi kullanırsanız fotoğrafların aynı anda hareket ettiğini göreceksiniz. Estetik açıdan iyi bir görüntü sergilemiyor olabilir. Aşağıda yer aldığı gibi animasyonlara hareket başlama ve bitiş süreleri eklerseniz daha iyi sonuçlar elde edebilirsiniz.

<amp-img src="assets/cat.jpg"
    width="720" height="1280"
    layout="responsive"
    animate-in="fade-in" 
    animate-in-delay="0.4s">
</amp-img>
<amp-img src="assets/dog.jpg"
    width="720" height="1280"
    layout="responsive"
    animate-in="fade-in" 
    animate-in-delay="0.6s">
</amp-img>
<amp-img src="assets/bird.jpg"
    width="720" height="1280"
    layout="responsive"
    animate-in="fade-in"
    animate-in-delay=".8s">
</amp-img>
<amp-img src="assets/rabbit.jpg"
    width="720" height="1280"
    layout="responsive"
    animate-in="fade-in"
    animate-in-delay="1s">
</amp-img>

Çalışma sayfanızı yenileyin aşağıdaki görüntüyü almaya başlayacaksınız.

Şuana kadar öğrendikleriniz bir amp hikayesi hazırlamak için yeterli ancak geliştirme yapmanız için yeterli değil. Google’un desteklediği am story kod yapılarak bakarak daha fazlasına ulaşabilirsiniz. Yapılacak çalışmalar tamamen sizin yaratıcılığınıza bağlıdır.

Kitapçık Oluşturma

Sayfaların tamamını hazırladınız sıra hikayenin sonunda, “bookend” sayfası adı verilen son ekran, ziyaretçilerin sitenizdeki diğer içeriklere ulaşmasını veya sosyal medyada hikayeyi paylaşmalarına imkan vermek içindir.

Kitapçık ekranı bookend-config-src’de JSON dosyası olarak gelmektedir. En başta indirdiğimiz hikaye içinde bookend.json dosyasına zaten sahipsiniz. Bunun üzerinde değişiklikler yaparak kendi hikayenize uygun hale getirebilirsiniz.

<amp-story standalone
    bookend-config-src="bookend.json">
    ...
</amp-story>

Tarayıcınızı yenileyip bookend son ekrana geldiğinizde aşağıda ki görüntüyü almanız gerekir.

Metin düzenleyicisi içinde bookend.json dosyasını açın;

{
  "share-providers": {
    "facebook": true,
    "twitter": true,
    "email": true
  },
  "related-articles": {
    "Articles": [
      {
        "title": "Pet adoption",
        "url": "https://en.wikipedia.org/wiki/Pet_adoption",
        "image": "/assets/related-dogs.jpg"
      },
      {
        "title": "Learn about cats",
        "url": "https://en.wikipedia.org/wiki/Cat",
        "image": "/assets/related-cats.jpg"
      }
    ]
  }
}

Hikaye sonu sayfasında yer alan üç sosyal medya paylaşım butonu (Facebook, Twitter, E-posta) insanların paylaşım yapmasını kolaylaştırır.

Sosyal medya paylaşım butonlarının hemen altında “Articles” yani makaleler yer alır. Burada içerik başlığı, URL ve resim yerleştirmesi yaparak insanlara hikaye sonunda önereceğiniz diğer yazılarınız gösterilir.

title: Makale başlığı
url: Makale linki
image: Tercihe bağlı makale için bir görsel linki

Hikayemiz neredeyse tamamlandı. İçeriğimizi yayınlamadan önce AMP HTML uygunluğunu test etmeliyiz.

AMP HTML Doğrulama

Bir AMP sayfası oluşturduğunuzda her zaman doğrulamanız gerekir. Bu işlemi yapmak için kullanabileceğiniz çeşitli yöntemler vardır;

Geliştirici konsolu

Chrome’da veya tercih ettiğiniz bir tarayıcının geliştirici konsolunu açın, eğer sayfanızda hatalar varsa genellikle kırmızıyla işaretleyerek hataları gösterir. Hatalı alanları düzelterek sayfanızı yenileyin ve tekrar kontrol edin.

Konsolun doğru sonuç vermesi için URL sonuna;

#development=1

Eklemeyi unutmayın örneğin, “http://localhost:8000/pets.html#development=1” şeklinde olmadır.
Konsolu kullanmak başka hatalarınızı görmenize yardım eder. Yaptığınız çalışmanın performansını artırmak ve nasıl görüneceği hakkında bilgi almak içinde test etmek önemlidir.

AMP Hikayelerinin SEO için önemi

Şuana kadar bir AMP hikayesi nasıl oluşturulur bunu anlattık, yukarıda yer alan bilgileri kullanarak kendi hikayenizi oluşturmaya hazırsınız. Peki AMP hikayeleri neden önemli?

Henüz test aşamasında olan hikayeler özelliği mobil SEO için önemli. Arama sonuçlarında artık sıradan, responsive siteler yerine hikayelerle karşılaşabilirsiniz. Performans ve kalite değerlerinin yüksek olmasından dolayı mobil sıralamalar artık hikayelerden oluşabilir.

Kısaca, hedeflediğiniz kelimede üst sırada çıkmak için iyi bir hikaye hazırlamak yeterli olabilir. Başlangıçta bu kolay olacaktır ancak rekabetin artmasıyla hikayelerde üst sırada çıkma yarışının başlayacağını tahmin ediyoruz.

Hakkında

Seo Şefi

Kurumsal ve Bireysel SEO Danışmanlığı Hizmeti. Organik Seo Uzmanı.

wordpress seo hataları
WordPress Teknik SEO Hataları ve Çözümleri ...
Geri
Gerileyen Siteler için Çözüm Önerileri ...
İleri
gerilen siteler için çözümler
YORUM YAZIN

Yorumlar kapatıldı.