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

289

google-in-hizlandirilmis-mobil-sayfalar-amp-projesi

Google’ın 2015 yılında Google Accelerated Mobile Pages (AMP) projesini duyurmuştur. Web sitelerin mobil sayfalarının daha hızlı bir şekilde yüklenmesini olanak sağlayan AMP projesini kullanmayan başlayan web siteleri 25 şubat 2016 tarihinden sonra Google İngilizce sayfasında mobil arama bölümünde AMP işareti ile birlikte görüntülenmeye başladı.

Ortalama olarak 4 kat daha hızlı bir şekilde sayfa yüklenmesini sağlamaktadır. AMP uygulamasını kullanabilmek için AMP html ile kodlanmış olan sayfalara ihtiyacınız olacaktır. AMP html, html tasarım diline yeni eklenmiş AMP özelliklerinin gelmesiyle oluşmuştur. Html’in alt kümesi olarak da bilinmektedir.

Hazırlamış olduğunuz bir AMP html kodunda ne türlü kodların bulunmasını gerektiğine değinmek gerekirse;

<!doctype html> Bu kod ile başlamak zorundasınız.
<html amp> sayesinde AMP Html sayfamızı belirtiyoruz.

Canonical SEO için mutlaka kullanmanız gereken bir etikettir. Canonical etiketlerinde /blog/Google-tag-manager-gtm-nedir tam olarak adresi kullanmak da oldukça önemlidir.

<link rel=”canonical”href=http:// blog.lucianadigital.com/Google-tag-manager-gtm-nedir/”>

Tarayıcılara, hazırlamış olduğunuz sayfaların tüm cihazlara uyarlanabileceğini bildirmek için meta etiketi ekliyoruz:

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

AMP sayfalarında kullanılması zorunlu olan bir diğer kod ise;

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

AMP için hazırlayacağınız sayfalarda sadece fast.fonts.net ve fonts.googleapis.com sitelerinden font dosyası çağırabilirsiniz.

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

Sayfanızı özel olarak hazırlarken stil kodlarınızı <styleamp-custom> – </style> arasında en fazla 50 kilobaytı geçmeyecek şekilde girilebilir. Css kodlarıyla kısıtlamalar ve ilgili izinlere https://www.ampproject.org/docs/reference/spec.html sayfasında “Stylesheets” başlığından görebilirsiniz.

Makalelerle ilgili olarak mikroverilerehttps://developers.google.com/structured-data/rich-snippets/articles sayfasından kolaylıkla ulaşabilirsiniz. Bu mikroverilerihttps://developers.google.com/structured-data/testing-tool/ sitesinden kontrol edebilirsiniz.

AMP runtimeJavaScript dosyası <head> ve </head> etiketi arasında kullanmalısınız.

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

İhtiyacınız doğrultusunda genişletilmiş bileşenler olarak bilinen JavaScript dosyasını da kullanabilirsiniz. JavaScript dosyasında çağırırken async etiketini kullanmak gerekiyor.

Örnek vermemiz gerekirse eğer Analytics kullanmak için Analytics le ilgili olan JavaScript dosyasını çağırmalısınız:

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

Hazırlamış olduğunuz AMP sayfasının hata kontrolünü, url’nin sonuna ekleyeceğiniz “#development=1” kod ile Chrome’da giriş yaptıktan sonra console üstünden kontrolünüzü yapabilirsiniz. Console’da eğer “AMP validationsuccessful” yazısıyla karşılaşırsanız AMP Html standartlarına uyum sağladığını bildirmektedir. Eğer hata ile karşılaşıyorsanız, https://www.ampproject.org/docs/reference/validation_errors.htmladresine giriş yaptıktan sonra hatalarınızı tespit edebilirsiniz. Daha sonra tekrar test edebilirsiniz.

AMP Html sayfanızı yayına soktuktan sonra SearchConsole’da Arama Görünümü’nün altında bulunan “Hızlandırılmış Mobil Sayfalar” sekmesinden hata olan sayfalarını takip edebilirsiniz ve dizine ekleme işlemi yapabilirsiniz.

Hangi Siteler AMP Sayfalar Oluşturmalı?

Düzenli olarak içerik üreten bir siteyseniz AMP sayfalarınız ile mobil arama sonuçlarında top storiescarousel’inde bulunma ihtimali vardır. Tahminlerinizden çok daha fazla bir şekilde organik arama sonuçlarınızın artışını görebilirsiniz.

İçerik üreten siteler haricinde tüm siteler AMP sayfaları olması gerekiyor. AMP en değerli özelliği sayfaların hızlı olmasıdır. Kullanıcıların oldukça fazla sevdiği hızlı yüklenen sayfalardan dolayı AMP özelliğini tercih edebilirsiniz ve hitinizi arttırabilirsiniz.  Fakat AMP Projesi kısa süreli olan bir proje olduğu için bir çok eksiği bulunması web site sahiplerinin aktif olarak takip etmeleri gerekmektedir.

AMP Hakkında Destek Alabileceğiniz Siteler

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

Bu konuyla ilgili yorumunuzu yazın