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