Hızlandırılmış Mobil Sayfalar (AMP) Nedir (Uygulama)
16082
single,single-post,postid-16082,single-format-standard,ajax_fade,page_not_loaded,,side_area_uncovered_from_content,qode-theme-ver-8.0,wpb-js-composer js-comp-ver-4.9.2,vc_responsive
 

Google’ın Hızlandırılmış Mobil Sayfalar (AMP) Projesinin İçerik Sitenizde Uygulaması

AMP ekran görüntüsü

Google Accelerated Mobile Pages (AMP) projesini Ekim 2015’te duyurmuştu. Mobil sayfaların daha hızlı yüklenmesini sağlayan AMP projesini sitesinde uygulayan yayıncıların sayfaları, 25 Şubat 2016 itibariyle (Google.com İngilizce arayüzündeki) mobil arama sonuç sayfalarında AMP işareti ile birlikte görünmeye başladı.

Yandaki gif’te de görebileceğiniz üzere organik arama sonuçlarının hemen üstünde, “Top Stories” başlığı altındaki AMP Html sayfa sonuçlarını yana doğru giderek görüntüleyebiliyorsunuz.

Ortalama 4 kat daha hızlı sayfa yüklenmesi sağlayan AMP projesini uygulayabilmek için AMP Html ile kodlanmış sayfalara ihtiyacımız var. AMP Html, html diline bazı AMP özelliklerinin eklenmesiyle oluşmuştur. Html’in alt kümesi olarak tanımlamak mümkündür.

AMP Html için hazırladığım örnek sayfa dokümanı:
<!doctype html>
<html  ⚡>
<head>
<meta charset="utf-8">
<title>Google Tag Manager (GTM) Nedir?</title>
<link rel="canonical" href="http://www.perfist.com/blog/google-tag-manager-gtm-nedir/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<style amp-custom>
h1 {font-size30px; color: orange}
body { font-family:'Open Sans', sans-serif; font-size:18px; color:grey;}
amp-img { max-width:550px; }
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "http://www.perfist.com/blog/google-tag-manager-gtm-nedir/",
"headline": "Google Tag Manager (GTM) Nedir?",
"datePublished": "2016-02-23T15:00:01Z",
"dateModified": "2016-02-24T15:00:05Z",
"description": "Google Tag Manager (Google Etiket Yöneticisi) nedir, ne işe yarar, kimler kullanmalı sorularının cevabını yazımızda bulabilirsiniz.",
"image": { "@type": "ImageObject", "url": "http://perfist.com/wp-content/uploads/2016/02/google-tag-manager-hazir-etiket-sablonlari.jpg", "width": 878, "height": 373 },
"author": {
"@type": "Person",
"name": "İhsan Çandır"
},
"publisher": {
"@type": "Organization",
"logo": { "@type": "ImageObject", "url": "http://perfist.com/wp-content/uploads/2016/02/perfist-logo.png", "width": 183, "height": 38 },
"name": "Perfist"
}
}
</script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Google Tag Manager (GTM) Nedir?</h1>
GTM'i anlatan uzun mu uzun yazı
<amp-img src=/wp-content/uploads/2016/02/GTM-code-snippet-300x203.jpg width=300 height=203></amp-img>
</body>
</html>

Örnek AMP Html sayfa kodumuz üzerinden, yukarıdan aşağıya doğru açıklama yaparak ilerleyelim.

Sayfamız <!doctype html> ile başlamak zorunda.

AMP Html sayfamızı <html ⚡> ya da <html amp> etiketleri ile belirtiyoruz.

Canonical SEO açısından kesinlikle kullanmamız gereken bir etiket. Canonical etiketinde (“/blog/google-tag-manager-gtm-nedir/” yerine) tam adresi kullanmak da çok önemli:

<link rel=”canonical” href=”http://www.perfist.com/blog/google-tag-manager-gtm-nedir/”>

Tarayıcılara, sayfanın tüm cihazlara uyarlanacağını bildirmek için meta aşağıdaki etiketi ekliyoruz:

<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

Aşağıdaki opacity ile ilgili stil kodu, AMP sayfalarda kullanmak zorunlu:

<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

AMP sayfalarda (sadece fonts.googleapis.com ve fast.fonts.net üzerinden) font dosyası çağırabiliyoruz:

<link href=’https://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>

Sayfadaki özel stil kodlarımızı <style amp-custom> ile </style> arasında 50 kilobaytı geçmeme kaydıyla girebiliriz. Css kodlarıyla ilgili izinler ve kısıtlamaları https://www.ampproject.org/docs/reference/spec.html sayfasında “Stylesheets” başlığı altından öğrenebilirsiniz.

Makalelerle ilgili mikroverilere https://developers.google.com/structured-data/rich-snippets/articles sayfasından bakabilirsiniz. Bu mikroverileri https://developers.google.com/structured-data/testing-tool/ üzerinden kontrol edebilirsiniz.

Yukarıdaki örnek dokümanda içerik tipimi newsArticle olarak belirledim. Oluşturduğum örnek sayfa bir haber makalesi olmadığından normalde Google yönergelerine uymalı ve bu mikroveriyi kullanmamalıydım.

AMP runtime JavaScript dosyası da <head> ile </head> etiketi arasında kullanılmalıdır:

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

İhtiyacınıza yönelik genişletilmiş bileşenler olarak adlandırılan JavaScript dosyalarını da kullanabilirsiniz. Bu JavaScript  dosyalarını çağırırken async etiketini de kullanmalıyız.

Örneğin sayfada Analytics kullanmak için Analytics’le ilgili js dosyasını çağırmalıyız:

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

Örnek dokümanı uzatmamak adına Analytics kodunu eklemedim, Google Developers’tan AMP sayfalara Analytics kodunun nasıl ekleneceğini öğrenebilirsiniz.

AMP sayfa adresimizin masaüstü ve mobil sayfa adresimizden farklı olduğunu varsayalım. AMP olmayan standart sayfamıza örnek dokümanımızda canonical etiketi vermiştik. AMP olmayan sayfamızdan da AMP sayfamıza aşağıdaki örneğe uygun olarak hazırlanmış kodu eklemeliyiz:

<link rel=”amphtml” href=”http://perfist.com/blog/amp/google-tag-manager-gtm-nedir.html” />

Yayınladığımız AMP sayfamızda hata kontrolünü, url sonuna “#development=1” ekleyerek Chrome’da giriş yaptıktan sonra console üzerinden kontrol edebilirsiniz. Ekran alıntısında olduğu gibi “AMP validation successful.” uyarısını gördüyseniz yazınız AMP Html standartlarına uyuyor demektir. Tebrikler!

console AMP validation

AMP sayfanızda hata alıyorsanız https://www.ampproject.org/docs/reference/validation_errors.html adresini inceleyerek hatalarınızı tespit ederek düzeltebilir ve tekrar test edebilirsiniz.

AMP Html sayfanızı yayına aldıktan sonra Search Console’da Arama Görünümü’nün altındaki “Hızlandırılmış Mobil Sayfalar” sekmesinden dizine eklenen ve hata olan sayfalarınızın takibini yapabilirsiniz.

AMP Search Console

Hangi siteler AMP sayfalar oluşturmalı?

İçerik üreten bir siteyseniz AMP sayfalarınız ile mobil arama sonuçlarında top stories carousel’inde (en çok okunanlar alanı olarak çevirebiliriz sanırım) yer alma ihtimaliniz oluyor. Organik arama sonuçlarının hemen üstünde yer alan bu alan sayesinde mobil trafiğinizi tahmin edemeyeceğiniz oranda artırabilirsiniz.

İçerik üreten siteler dışında da tüm sitelerin (Javascript v.b. teknoloji kısıtlamaları içeriğinizi etkilemiyorsa) AMP sayfaları olmalı. Evet şuan için en çok okunanlar bölümünde yer alamıyorsunuz fakat Google ve diğer arama motorlarının algoritmasında site hızı önemli bir yer tutuyor. Ayrıca kullanıcılar da hızlı yüklenen sayfaları tercih ediyor. Bu yüzden AMP sayfa kullanmak mobil trafiğinizi olumlu etkileyecektir.

Tekrar hatırlatmak gerekirse AMP projesi henüz 4 aylık bir proje ve her geçen gün yeni özelliklerle genişliyor. Şu an için projenizde kullanamasanız bile önümüzdeki dönemlerde sizin de yararlanabileceğiniz özelliklere sahip olacaktır.

AMP sayfalarla ilgili ulaşabileceğiniz kaynaklar:

https://support.google.com/webmasters/answer/6340290
https://www.ampproject.org/
https://amphtml.wordpress.com/
https://github.com/ampproject/amphtml
http://stackoverflow.com/questions/tagged/amp-html

 

İlk Yorumu Sen Yapmak İster Misin?