28 May Amp Stories Nedir? Nasıl Kullanılır?
Google, AMP e-Ticaret uygulamalarının bazı işletmeler için milyonlarca dolarlık ek satış ve artan dönüşüm oranlarıyla sonuçlandığını zaten bildirdi. (kaynak)
Bu başarıya yanıt olarak Google, yenilikçi AMP özellikleri sunmaya devam ediyor. AMP Hikayeleri bunlardan biri.
AMP geliştirmenin gerekli olmadığını düşünüyorsanız yanılıyorsunuz. Google tarafından derlenen verilere göre AMP tabanlı sayfalar, AMP olmayan sayfalara göre daha yüksek e-ticaret dönüşüm değerine sahip. Ayrıntılar için buradaki Moz makalesine bakın. Sonuç olarak içeriğiniz ne kadar iyi olursa olsun, kullanıcıya yeterince hızlı ulaştıramıyorsanız yaptığınız işin bir önemi olmayabilir.
Hız her geçen gün hayatımızda daha önemli hale gelse ve AMP'nin gelişmesi bu amaç için işimizi çok kolaylaştırsa da hikayeleri anlamak için zaman ayırmazsanız çok şey kaçırıyorsunuz diyebilirim. AMP tarafından, geçen yıl çıktı. Bu yazıda AMP Stories'in neden göz ardı edilmemesi gerektiğini açıklamaya çalışacağım ama önce AMP Stories'in ne olduğuna ve ne anlama geldiğine bakalım.
AMP Stories Nedir?
Google'ın AMP Stories özelliği, kullanıcıların Instagram gibi mobil siteler için içerik oluşturmasına olanak tanır. Bu yenilik eskiden Snapchat, Instagram veya Facebook gibi görünse de seleflerine göre bariz bir avantajı var. Elbette bu avantaj, dünyanın en çok kullanılan arama motoru tarafından desteklenmektedir.
AMP ile içerik inanılmaz derecede hızlı yüklenir. Bu özellik, kullanıcıların uygulamalar yerine web sitelerinde zaman geçirmesini sağlar. AMP hikayeleri sayesinde, kullanıcılar geleneksel bir arama sonuçları sayfası yerine zengin bir kayan hikaye sayfasıyla karşılanır. Böylece hızlı içerik tüketimi nedeniyle çevrimiçi olarak daha fazla zaman harcıyorlar.
Şimdiye kadar CNN, The Washington Post ve Mic gibi şirketler AMP partneri olmuş durumda ve dolayısıyla story özelliğini de aktif bir şekilde kullanıyorlar.
Işık hızında yüklenmesinin yanı sıra AMP storiesler aynen haberlerin veya makalelerin paylaşıldığı gibi paylaşılabilir özelliğe de sahip.
AMP Storiesler Nasıl Çalışır?
Çoğumuzun bildiği gibi, JavaScript genellikle web siteleri geliştirmek için kullanılır. Ancak, bu web sitesi yeniden tasarımı, sayfa yüklemeyi ve oluşturmayı da yavaşlatır. Yani sayfa hızımızın düşmesini istemiyorsak mümkün olduğunca js kullanmaktan kaçınmalıyız. (Aslında bunu zaten biliyoruz)
AMP, JavaScript'in bir web sayfasında eşzamansız olarak çalışmasına izin verir. Bu, JavaScript kodunun web sitenizdeki hiçbir kodu engellemeyeceği anlamına gelir.
Web yöneticileri tarafından yazılan js dosyaları AMP hikayelerinde kullanılmamalıdır. Etkileşimli sayfalar yalnızca özel AMP öğeleri kullanılarak oluşturulabilir.
Özel öğeler, JavaScript'ten oluşabilir, ancak sayfanın genel performansını sınırlamamalarını sağlamak için özel olarak tasarlanmalıdır.
AMP sayfaları oluşturulurken üçüncü taraf JavaScript'e izin verilir, ancak sayfanın oluşturulmasını engellemeyecek şekilde yapılandırılmalıdır. AMP ayrıca uzatma mekanizmalarının kullanımını da yasaklar. Aşağıda bir örnek görebilirsiniz
AMP Stories Özelliklerine Giriş
Geleneksel AMP sayfaları çoğunlukla içerikten oluşuyordu, ancak yeni geliştirilen format, en iyi kullanıcı deneyimini sağlamak için videolar, animasyonlar veya resimler içeriyor.
AMP hikayeleri, derin teknik bilgi birikimi olmadan hem masaüstü hem de mobil cihazlarda ücretsiz olarak uygulanabilir.
AMP Stories nasıl uygulanır?
İlk AMP Stories oluşturmadan önce AMP ‘nin tüm bileşenleri konusunda gerekli donanıma sahip olmalısınız.
- Her story tekil bir sayfa üzerine yapılandırılır.
- Her sayfa html kodlarının birleşimlerinden oluşan katmanlar(layers) ve AMP elementlerinden oluşur.
- Koda eklendiğinde bileşenler, aşağıdaki gibi görünür,
Story = AMP -story
Page = AMP -story-page
Layers = AMP -story-grid-layer
Sayfaya eklediğinizde ise aşağıdaki gibi görünür;
Story bileşeni tüm AMP story’nizi, sayfa bileşeni ise story’nizin içinde yer alan her bir sayfayı içerir.
Katmanlar bileşeni, sayfada bulunan öğelerin tümünü içerir.
Google AMP stories Örnekleri
Tercih ettiği herhangi bir zamanda, Google’ın geleneksel sayfalar yerine, web sayfalarının AMP sürümlerine, daha fazla link vereceği oldukça öngörülebilir bir şeydir.
Bu nedenle, her AMP partnerleri, bu hizmetin özelliklerinin güçlü yanlarını göz önünde bulundurarak kullanıyorlar aslında.
En yaygın olarak bilinen AMP partnerleri, webdeki en büyük amaçları kullanıcılarına hızlı ve etkili bir şekilde bilgi vermek olan haber kuruluşlarından oluşuyor.
Amp Stories Oluşturmaya Nasıl Başlayabilirim?
Artık AMP stories’in ne olduğunu nerelerde kullanıldığını ve bu geliştirmeden elde edebileceğiniz kazançları biliyorsunuz.
Peki sayfalarınızı AMP’ye nasıl geçirirsiniz?
1- Kodu indirin
Google’ın, içeriğinizin AMP versiyonunu alabilmesi için sayfanızın kodunu değiştirmeniz gerekmektedir. Orjinal sayfanız AMP canonical kodu olarak kabul edilen aşağıdaki kodu içermelidir,
Eğer ihtiyacınız olan tüm AMP kodlarına erişmek istiyorsanız amp-wp GitHub page linkini tıklayın ve dowland zip butonundan kodu indirin.
Eğer wordpress kullanıyorsanız bu kodu herhangi bir eklenti ekler gibi wordpress sitenize yükleyebilirsiniz.
Diğer yandan aşağıdaki kodu doğrudan buradan indirebilir ve .html uzantılı dosyanıza kaydedebilirsiniz.
2- Taslak sayfayı çalıştırın
Taslak sayfanızı test etmek için dosyanıza bir sunucudan ulaşmanız gerekir. Test etmenize yardımcı olmak için geçici lokal web server kullanabilirsiniz. Bunun için,
• “Web Server for Chrome” Google Chrome app
• Apache
• A local HTTP Python server
• Nginx
AMP , daha güvenli bir yapı için kesinlikle https kullanmanızı öneriyor.
Yerel web serverınızı ayarladıktan sonra taslak içeriğinize aşağıdaki url yapısı ile giriş sağlayabilirsiniz,
http://localhost:8000/article.html.
Eğer her şey yolunda görünüyorsa devam edin ve bir cover page oluşturun.
3- Kapak sayfası (cover page) oluşturun
Kapak sayfanız tag ile temsil edilir. Bir storyde o story için ayrı ekranları içeren birden fazla bileşene sahip olabilirsiniz. Ancak seçtiğiniz biri kapak resmi olarak işlev görür.
Bir kapak sayfası oluşturmak için ilk sayfanıza benzersiz bir İD atayın,
Bu kod sayfanız için bir kabuk görevi görür ancak geçerli kılmak için en az bir katman (layer) belirtmeniz gerekir.
AMP’deki katmanlar grafiklerdeki katmanlara benzer şekilde çalışır. Birbiri üzerine yığılmış farklı öğelerden oluşur. Yukarıdaki örnekte Birinci katman kapak fotoğrafı görevi gören görüntüyü ikinci katman ise story’nin başlığını ve satırını içerir.
Birinci katmanı oluşturmak için elementini elementine ekleyin. Görüntünün bütün ekranı doldurmasını istiyorsanız amp-story-grid-layer etiketine template=”fill” özelliğini ekleyin.
Katmanın içine bir cover.jpg dosyası için elementini ekleyin ve layout=”responsive” tagini ekleyerek taslağın responsive çalıştığına emin olun.
Yukarıdaki adımlar takip edildiğinde ilk katman aşağıdaki gibi görünür,
İkinci bir katman eklemek için fill template yerine vertical şablonu kullanın. Buradan şablona ulaşabilirsiniz.
Kapak sayfanızı tamamladıktan sonra daha fazla sayfa ekleyebilirsiniz.
4- Daha Fazla Sayfa Ekleyin
Daha fazla sayfa ekleme işlemi taslak sayfa veya cover sayfa eklemeye benzer süreçleri içerir.
Kullandığınız kod, seçtiğiniz template’e bağlı olacaktır. Vertical template’e sahip bir katmana içerik eklemek için aşağıdaki elementlere benzer şeyler eklemelisiniz
– Başlık içeren bir
– < h1 >etiketi
– Responsive amp-img
– Metninizin tümünü içeren q öğesi
Yeni sayfanız aşağıdaki gibi görünmeli,
Hikayenizi geliştirmek için animasyon elementleri de ekleyebilirsiniz.
5- Animasyon Elementleri Ekleyin:
Storynizi daha ilgi çekici bir hale getirmek için başlığı sayfaya düşer biçimde verebilir, metni döndürebilir, soldurabilir ya da başka herhangi bir efekt ekleyebilirsiniz. AMP şu an aşağıdaki hazır ayarlanmış animasyon öğelerini içeriyor,
Bir elemente bir animasyon eklemek istiyorsanız animate-in=”animationpresetcodehere” kodunu eklemeniz yeterli olacaktır. Örneğin darbe animasyonu kullanmak için kodunuz aşağıdaki gibi görünebilir,
amp-story-page id=”page3″>
Pulse this text into the page
Animasyon öğeleri eklendikten sonra bookend oluşturmaya hazırsınız.
6- Bookend oluşturun
Bookend, hikayenizi tamamlayan son ekrandır ilgili linklerinizi veya sosyal medya paylaşım linklerinizi eklemek için bu ekranı kullanabilirsiniz.
AMP stories elementlerinize bookend-config-src niteliği ekleyin ve ardından bookend.json dosyasına yönlendirin.
Tamamladığınızda aşağıdaki gibi bir ekran oluşmalıdır;
Son olarak AMP Html inizi doğrulamaya hazırsınız.
7- AMP html doğrulama
AMP Sayfanızı doğrulamanın birçok yolu vardır örneğin chrome dev tools kullanabilirsiniz.
— sayfanızı bir tarayıcıda açın
— url inize # development =1 ekleyin
— chrome dev tolls console bölümünü açın ve Herhangi bir doğrulama hatası var mı diye kontrol edin.
Başka bir doğrulama yöntemi olarak AMP validator chrome uzantısını da kullanabilirsiniz.
Her iki araçta AMP kodunuzla ilgili herhangi bir sorun varsa bunu gösterecek ve onarmak için size ipuçları verecektir.