İlginizi Çekebilir
  1. Ana Sayfa
  2. Amp
  3. Accelerated Mobile Pages
Trendlerdeki Yazı

Accelerated Mobile Pages

accelerated-mobile-pages-kenan-konacoglu
1

AMP Nedir?

AMP (Accelerated Mobile Pages) web sitenizde yer alan mobil içeriklere çok daha hızlı ve aktif bir biçimde ulaşılabilmesi amacı ile kullanılan en gelişmiş kodlama yöntemi olarak bilinmektedir. Yakın zamanda Google önemli bir açıklama yaptı. Bu açıklama içerisinde AMP kodlama sistemi ile yapılmış olan web sitelerinin Google’ın ön belleği içerisinde saklanacağını ve kullanıcıların artık çok daha hızlı bir şekilde sisteme erişme imkanı bulacağını belirtti. Google’ın bu durum ile ilgili asıl gayesi ise mobil sistem üzerinde yer alan kullanıcı sayısını beklenmedik bir şekilde arttırmaktır.

Kullanıcılarınıza normalden daha hızlı bir erişim seviyesi sağlamak ya da sunucunuza trafik konusunda kolaylık sağlamak istiyorsanız kesinlikle AMP yapılandırması yapmanız gerekiyor.

Bunun yanı sıra Google+ ya da Facebook gibi birçok paylaşım ile ilgili olan uygulamada yapmış olduğunuz paylaşımların tümünde eğer AMP sayfalarına yönlendirme sağlarsanız bu tür uygulamalar ve AMP’nin uyumuna kendinizi kaptırıp daha kreatif fikirler meydana getirebilir, web sitenizin daha ileri seviyelere gelmesini sağlayabilirsiniz. AMP sayesinde birçok benzer başlık arasında geçiş yapabilirsiniz.

Günümüzde içerik paylaşımı konusunda önem arz eden konu ise kullanıcı deneyiminin hızı ile alakalıdır. Eğer web sitenizi ziyaret eden kullanıcılar daha hızlı bir deneyime kavuşursa bu sizin yararınıza olacaktır.

AMP, içerisinde birçok standardı da barındıran bir kod sistemi oluyor, bunu da unutmamak gerekiyor. Eğer AMP ile amacınıza ulaşmak istiyorsanız bu sistemin html biçiminde kodlanmış tek bir sayfadan oluştuğunu da asla göz ardı etmemelisiniz. Bu sistem, java scriptler ve css’den kurtarılmış ve başka bir biçimde uyarlanmıştır. Bir örnek ile bunu birazdan daha yakından göreceğiz. Şimdi en mühim 4 adıma geldi sıra!

  1. Google’ın istiyor olduğu her şeyi eklemeniz gerekiyor. Sebebi ise şu: https://cdn.ampproject.org/v0.js
  2. Sıradaki işlemimizde ise şema yapısına ait bir json göndermek oluyor. Bunun temel amacı ise Google’ın kütüphanesinin kurmuş olduğumuz AMP sayfası çalışırken işlevsellik kazanması ile alakalı oluyor. Bu adımı dilerseniz es geçebilirsiniz çünkü Google bu madde üzerinde pek de katı değil genel olarak. Ama bu maddeyi es geçerseniz AMP konusundaki verimlilik oldukça fazla etkilenecektir. Şimdiye kadar anlattığım 2 madde, şayet düzgün çalışırsa her şey daha iyiye gidecek ve gelişecektir.
  3. AMP kod sisteminin en yorucu kısımlarından biri de AMP’ye özgü CSS oluyor. AMP CSS, Print CSS tarzında bir şey aslında. Çıktının görünümünü bu şekilde ayarlamış oluyorsunuz. Google bu durumda da size seçenekler sunuyor. Bu sebeple de kaliteli bir görünüm yakalama şansına erişmiş oluyorsunuz.
  4. AMP Schema ise AMP konusunda en kasıntı bölüm oluyor. Ionic, Angular yahut React kullanmış iseniz muhakkak görmüşsünüzdür, hazır tagler bulunuyor. Kişiler kendi alanları içerisine kendileri erişerek üzerine bir de yorumlayarak işleme alabiliyorlar. AMP Schema da bu tür bir şey olarak karşımıza çıkıyor. Google içerisinde birçok tag dizisi mevcut. Fakat en fazla ilgi çekenlerden birisi de şu oluyor: <amp-img src=”amp/logo.jpg”></amp-img>
<!doctype html>

<html amp lang="en">

<head>

<meta charset="utf-8">

<script async src="https://cdn.ampproject.org/v0.js"></script>

<title>Hello, AMPs</title>

<link 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>Welcome to the mobile web</h1>

</body>

</html>

Bazı Önemli Detaylar

AMP bir sayfa kurmak istiyorsanız fazlası ile uzun bir süreç içerisinden geçmeniz gerekiyor, kimine göre bu çetrefilli bir yol fakat sonucunun sizi mutlu edeceğine eminim. Bunun içerisinde şemanız ile alakalı birçok işlem yapma fırsatı bulurken optimizasyonunuz konusunda da çeşitli işlemler yapma fırsatına erişmiş oluyorsunuz. Bununla da kalmıyor, işleriniz daha da ilerleme kaydetmeye başlıyor. En son işlem olarak ise onaylatma işlemi kalıyor. Onaylatılmış olan sayfaların paylaşımlar içerisine düzgün bir biçimde yerleştirilmesi de bir diğer işlem olarak karşınıza çıkacak. Bu esnada karşınıza bir pürüz çıkabilir. Bu pürüz, firmaların yahut sosyal medya kanallarının kendi çaplarında AMP standartlarına sahip olmaları oluyor. Olumsuz olan bu olay, AMP ısrafı yaratacak fakat asla yüklememiş olmanızdan kat kat iyidir. Bu pürüzle mücadele etmek adına Google, AMP sayfalar için canonical ve amphtml gibi birçok link bulmuştur. Tüm detayları öğrenmek adına canonical linkini ziyaret edebilirsiniz.

<link href="https://www.example.com/url/to/amp/document.html">
<link href="https://www.example.com/url/to/amp/document.html">
Önerilen Yazı
Google AMP Hakkında Bilgiler
Yorum Yap
Bu Yazıyı Nasıl Buldunuz

Yazar Hakkında

1995 yılının esintili bir sonbahar gününde doğmuşum.

Yorum Yap

Yorumlar (2)

  1. _avatar

    Anlaşılır ve ilgi artırıcı

Bir cevap yazın

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