Google’ın mobil sayfaları hızlandırma projesi AMP (Accelerated Mobile Pages), geçtiğimiz günlerde herkesin kullanımına açıldı. Facebook vb. birçok uygulamada kullanılan “Lite” sürüm mantığıyla düşünüldüğünde AMP’ın amacı, internet kullanıcılarına internet hızının düştüğü veya düşük olduğu yerlerde gereksiz verilerden arındırılmış, sadece içeriğe odaklanan sayfalar sunmak.
Örneğin internet kullanıcıları mobil tasarıma sahip sitenize girdiklerinde logo dahil birçok grafik, manşet resimleri, js dosyaları ve diğer bileşen uygulamalarını görürken, AMP uygulanmış sayfalarda sadece beyaz (veya başka renk) fon üzerinde, belki logo, içerik resimleri, videolar, eklediğiniz reklamları görecekler. Tabi Google’a kalsa reklamda koydurmaz ama Adsense’in sahibi olduğundan mecbur.
GÜNCELLEME! 1 Haziran 2019
AMP eklentisi güncel haliyle gayet kararlı ve sorunsuz çalışıyor. Sonradan elle yapılan eklemelerde hata yapmazsanız tarayıcı konsolunda neredeyse hiç hata görmüyorsunuz. Eklentiyi rahatlıkla kullanabilirsiniz.
Ayrıca yazımı 2016 yılında yayınladığımı unutmayın. Sonradan eklenen özellikler ile bazı önerilerim geçersiz hale gelmiş olabilir.
Peki AMP’a Mecbur Muyuz?
Henüz yeni yeni yürümeye başlayan AMP projesinin kullanımına dair akıllarda bir sürü soru işareti var fakat şimdiden büyük web siteleri (The New York Times, BuzzFeed, The Guardian, BBC) AMP kullanmaya başladılar. Bunun sebebi ise Google’un ilerleyen süreçte AMP kullanmayan siteleri arama sonuçlarında gerilere atma ihtimali! Kesin değil ama dillendiriliyor. AMP yoksa AMP kullanan site önünüze geçecek!
Yani AMP kullanmak size kalmış. Belki sayfalarınız responsive tasarımınızdan ötürü gerilere atılmayacak ama belkide rakipleriniz hafifletilmiş içerikleri (AMP) sayesinde sizden bir adım öne geçecekler.
Nasıl Kullanılacak?
Tüm sistemler için uygulanacak genel bir kullanım yok. Her script için (Joomla, Drupal vd.) eklenti, modül geliştiriliyor yada yakında geliştirilecek. Belki sadece html’den ibaret sitelere bile yapmamız gerekecek ve tamamen keşfedene kadar canımız çıkacak. Ama WordPress kullananlar için bu iş (şuan için) daha kolay. AMP eklentisini kuracak, birkaç düzenlemeyi de yaptıktan sonra AMP kurulumunu %70-80 tamamlamış olacaksınız. %70-80 dememin sebebi, benimde henüz AMP konusunda herşeyi bilemiyor olmam. Belki bitti derken daha yapmamız gereken şeyler olabilir.. Şuan için keşfettiğim kadarıyla birşeyler yapıcaz.
Anlatımıma geçmeden önce uyarımı yapayım;
1) Bundan sonraki anlatım WORDPRESS scriptleri için geçerli. Kendi scriptiniz için ona özel eklenti yada modülleri kullanacaksınız.
2) AMP yeni bir uygulama olduğundan eksiklerim, yanlışlarım olabilir. Zamanla eksiklerimizi giderecek, AMP uygulamasını dert olmaktan çıkaracağız.
WORDPRESS için AMP Eklentisi:
İlk olarak WordPress scriptli sitemiz için AMP eklentisini sitemize kuruyoruz. İsterseniz admin panelinde Eklentiler sayfasından AMP adıyla aratıp kurun, isterseniz kurulum dosyalarını ftp’den gönderip kurun. Sonrasında da aktif edin.
Eklentiyi kurduğunuzda admin panelinde herhangi bir ayar göremeyeceksiniz. Şimdilik ayar kısmı yok.
GÜNCELLEME: 6 Ekim tarihinde yayınlanan 0.4 sürümü ile Görünüm menüsü altına AMP seçeneği eklendi. Buradan Amp temanızın başlık ve gövde arkaplan renklerini değiştirebiliyorsunuz.
Ayrıca WP Admine eklenen AMP menüsünden de Analytics kodunuzu ekleyebilirsiniz.
Zaten fazla bir ayarlamaya gerek yok çünkü amaç hızlı sayfalar için sadece içeriği yalınlaştırmak. Bu durumda eklentinin çalışıp çalışmadığını görmek için yazılarınızdan birinin url’sinin sonuna /amp eklemesi yapacaksınız. Sayfa karşınıza yalın beyaz fonda çıkıyorsa, AMP kuruldu.
AMP'sız URL: http://www.siteadresi.com/birinci-yazi.html AMP ile: http://www.siteadresi.com/birinci-yazi.html/amp
(Eğer karşınıza normal kullandığınız tema geliyor ise ortada bir sorun var. Eklentiyi doğru olarak kurduysanız sorunun mevcut temadan yada bir eklentiden kaynaklanıp kaynaklanmadığını öğrenmek için denemeler yapmanız gerekiyor. Her zaman kullandığınız masaüstü temayı değiştirin veya eklentileri tek tek kapatarak tekrar kontrol edin.)
Kurulum Bu Kadar Mı? Hayır.
Kurulumdan sonra yapılması gereken kontroller ve düzeltmelerimiz var. Bunları kafanız karışmasın diye yalın bir şekilde anlatmak istiyorum ama inşallah başarabilirim.
1) Kontroller: Google webmaster araçlarından, Google araçlarından ve Chrome geliştirici konsolundan AMP kontrolü yapıyoruz.
2) Yerleştirme: AMP için Google Analytics ve Google Adsense yerleştiriyoruz.
1) Gerekli Kontrol ve Eklemeler
AMP uygulamasını aktif ettikten sonra onun düzgün kurulup kurulmadığını kontrol etmemiz gerekiyor. Bunun için aşağıdaki üç araçtan yararlanıyoruz.
İlk bağlantı Google web master araçlarına ait. Doğrudan webmaster tools’da ekli web sitenize gidip Arama Görünümü > Hızlandırılmış Mobil Sayfalar altından aynı yere ulaşabilirsiniz. Burada Google’un AMP kurulumunuzu görüp görmediğini anlayacaksınız. Eğer kurulumu yeni yaptıysanız ilk başlarda “Sitenizde Hızlandırılmış Mobil Sayfa (AMP) bulunamadı” notu görünebilir. AMP kurulumunuz bulunduysa da burada AMP uygulamanıza ait hata veya uyarı mesajlarını göreceksiniz. Henüz sistem yeni olduğundan hataları zamanla görüp, tecrübe edip, çözümler üreteceğiz.
AMP bulunamadı ekranı, yani yukarıda resimde gördüğünüz ekran AMP uygulamasının başarısız olduğu anlamına gelmiyor. Google Webmaster sayfasında bununla ilgili 3-5 gün sürebileceği söyleniyor. Yani bekleyeceğiz.
“Once you set up AMP pages, it takes a few days for it to show up in Search Console – it probably took 3-5 days last time I did this. It unfortunately isn’t an instant process.“.
Yazıyı yayınladıktan 2 gün sonra Google amca AMP uygulamasını gördü ve webmaster araçlarındaki o sayfa şu hale geldi;
(3 başlık altındaki hataların ne olduklarını henüz keşfedemedim ama hatalı html etiketlerinden bahsediyor olabilir. Baktığım yazılardan birisinde resimleri sola dayamak için div align kullanılmıştı, image align yapınca hata notu kayboldu.)
Bilinmeyen söz dizimi hataları: src=http://www.youtube.com/embed/N_uSwXpJKk8 hatası:
Bu hata Youtube embed kodunda https olmamasından kaynaklanıyor. Tablolardan tüm http url’leri https çevirebilirsiniz yada eklentinin güncellenmesini bekleyin. Belki sorunu eklentiden çözebilirler.
İkinci bağlantı Google’un test aracına ait. Orada sol taraftan Amp uygulanmış bir sayfanızın url’sini gönderecek ve sağ taraftan test aracının sonuçlarına bakacaksınız. Eğer AMP ile bağlantılı hatalar varsa sağda göreceksiniz. Bende iki adet hata vardı birisi Logo diğeri de İmageObject. Bu hataların çözümü içinde mevcut masaüstü temamın functions.php dosyasına aşağıdaki kodları ekledim.
Logo için bunu;
/* AMP logo */
add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );
function xyz_amp_additional_css_styles( $amp_template )
{
// only CSS here please... ?>
nav.amp-wp-title-bar { padding: 12px 0; background: #000; }
nav.amp-wp-title-bar a {
background-image: url( 'http://www.siteadresi.com/logo.png' );
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 28px;
width: 94px;
margin: 0 auto;
text-indent: -9999px; }
<?php }
İmageObject ve Organization: Logo için bunu;
/* AMP Structured Data:Image */
add_filter( 'amp_post_template_metadata', 'bbm_amp_modify_json_metadata', 10, 2 );
function bbm_amp_modify_json_metadata( $metadata, $post ) {
if (!array_key_exists('image', $metadata)) {
$metadata['image'] = array(
'@type' => 'ImageObject',
'url' => get_template_directory_uri() . '/images/amp.jpg',
'height' => 512,
'width' => 1024,
);
}
return $metadata;
}
/* AMP Structured Data:logo */
add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );
function xyz_amp_modify_json_metadata( $metadata, $post ) {
$metadata['@type'] = 'BlogPosting';
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => get_template_directory_uri() . '/images/amp-logo.png',
'height' => 60,
'width' => 600, );
return $metadata;
}
Kodları kendinize göre düzenleyeceksiniz ve sonuç böyle olacak;
Üçüncü bağlantı da yine Google konsoluna ait, buradanda url’lerimizi göndererek ilgili sayfanın amp sürümünün geçerli olup olmadığına bakabiliyoruz.
https://search.google.com/test/amp
Son Olarak;
Birde Chrome tarayıcımızda /amp bağlantımızın sonuna #development=1 eklemesi yaparak AMP sayfasında hata olup olmadığına bakacağız. Ek olarak klavyeden Ctrl + Shift + I tuşlarına basarak geliştiricisi konsolunu açarak buradan da hatalara bakabilirsiniz. Çözebildikleriniz varsa çözeceksiniz. (AMP ile yeni tanıştığımızdan doğal olarak çoğu hatayı nasıl düzelteceğimizi bende bilemiyorum ama mevcut Analytics hatamı düzeltince bende Geliştirici konsolunda hiç hata kalmadı.)
Ayrıca (test aracında hata vermiyor ama) AMP eklentisi ile ilgili bir detayı da kontrol etmek gerekiyor. Mevcut masaüstü temamızın kaynak koduna girip <link rel=”amphtml” ile başlayan işaretçiyi arayın. Eğer varsa tamam, yoksa aşağıdakini header.php‘ye ekleyin. (Bende tema kaynağında AMP eklentisi ile gelmişti. Bu işaretçinin görevi Google’a AMP formatlı bağlantılarımızı işaret etmek.)
<link rel="amphtml" href="<?php the_permalink(); ?>/amp" />
Yukarıdaki adımları tamamladığımızda AMP için baya yol kat etmiş olacağız.
2) Analytics ve Adsense Yerleşimi
AMP kullandık peki AMP uygulanmış sayfaların trafiğini nasıl takip edeceğiz? Adsense reklamları ne olacak?
Tabiki hemen AMP eklentisinde düzenlemeler yaparak hem analytics kodumuzu, hemde adsense reklamlarımızı AMP sayfalarında da göstermeye başlayacağız.
Güncelleme: Admin panelde AMP menüsü altından Analytics kod eklemek daha mantıklı. Bununla bence uğraşmayın.
Bunun için ftp yolunda şuraya gidiyoruz;
/public_html/www.siteadresi.com/wp-content/plugins/amp/templates
Single.php dosyasını çekip, notepad++ ile açarak düzenlemelere başlıyoruz.
Analytics için aşağıdaki kodu kendinize göre düzenliyor, </body> etiketinin önüne ekliyoruz.
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXX-XX"
}, "triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
} }
</script>
</amp-analytics>
Ve aynı dosyada head etiketi içerisine şunu ekliyoruz;
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Not: Yandex Metrica için bu bağlantıya bakmalısınız.
Adsense reklamı için ise aşağıdaki kodu düzenliyor ve (Single.php dosyasına) reklamların başlıktan hemen sonra görünmesi için </header> etiketinden sonrasına ve yazının en sonunda görünmesi için <footer class=”amp-wp-article-footer”> etiketinden öncesine o kodları ekliyoruz.
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="3355879416"
data-auto-format="rspv"
data-full-width>
<div overflow></div>
</amp-ad>
Eğer temanızda yoksa html-start.php dosyasına da şunu ekleyin;
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Ve dosyaları ftp’de eski konumuna atıp sonuca bakın. Reklamlar görünüyorsa işlem tamam. Ayrıca isterseniz sayfalara Twitter, Facebook paylaşım butonlarını da benzer yöntemle ekleyebilirsiniz. Fakat Google’un AMP projesinin amacını unutarak AMP sayfalarını yavaşlatmayın, Google sevmeyebilir. (Şuan için sosyal medya ikonlarını eklemeyi denemedim ama dener ve başarılı olursam onuda yazıma ekleyeceğim.)
3) Sosyal Paylaşım Siteleri
Amp sayfanıza Twitter, Google+, Mail ve Facebook paylaşım seçeneklerini eklemek istiyorsanız aşağıdaki yolu izlemelisiniz.
Aşağıdaki script kodunu html-start.php‘de head içerisine ekleyin;
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Aşağıdaki kodları da single.php‘de Adsense yerleşiminde işaret ettiğim content kodunun hemen sonrasına ekleyin.
<div> <amp-social-share type="twitter" width="60" height="44"> </amp-social-share> <amp-social-share type="email" width="60" height="44"></amp-social-share> <amp-social-share type="facebook" width="60" height="44" data-param-app_id="xxxxxxxxx"> </amp-social-share> </div>
Facebook paylaşım butonu için bu sayfadan bir sıradan app oluşturun ve o app’ın kodunu yukarıda data-param-app_id=”xxxxx” yazan yerde x’lerin yerine kaydedin.
Detaylar için buraya bakabilirsiniz.
UYARI: AMP eklentisine güncelleme geldiğinde Adsense, Analytics, Sosyal paylaşım kodları siliniyor. Güncellemelerden sonra amp sayfalarını kontrol etmeyi unutmayın.
Eğer temanızın amp desteği varsa, temanızın amp temasını aktif edin, bu sayede her güncelleme sonrası kodlarınız silinmez.
Ben bu kadar kodla uğraşamam diyorsanız!
Logo, Analytics ve Adsense ekleme adımlarında kodlarla uğraşamayanlar olursa onlarda AMP eklentisinin ardından aşağıdaki eklentiyi kurabilirler. Eklentinin ayarlar sayfasından kodlarla uğraşmadan Logo ekleyebilir, Google Analytics veya diğer izleme kodlarını, ayrıca Google Adsense reklamlarını AMP sayfalarına dahil edebilirler. Ama uyarayım; eklenti de Analytics ve Adsense entegrasyonu için Google hesabınızla oturum açmanız isteniyor. Ben WordPress’de çok fazla eklenti kullanılmasına karşı olduğum ve kolayıma geldiğinden üstte anlattığım yolu izledim.
>> AMP için Analytics ve Adsense Eklentisi
Ayrıca Analytics kod eklemek içinde yeni bir eklenti yazılmış. İsteyenler üstteki yerine sadece Analytics için bu eklentiyi de kullanabilirler.
>> AMP için Analytics Eklentisi
Yazımı bitirirken tekrar uyarayım! AMP daha yolun başında yada bizler yolun başındayız. Bu sebeple yanlışlarım, eksiklerim olabilir. Zamanla gelişmeler, geliştirmeler ve düzeltmeler yapacak ve yazımı daha faydalı hale getirmeye çalışacağım. Sorularınız yada eklemek, düzeltmek istedikleriniz olursa yorum panelinden yazabilirsiniz.
Ayrıca AMP eklentisinin gelecek güncellemelerinde /amp/templates içerisinde yaptığımız değişiklikler sıfırlanabilir, bu sebeple yedek almakta yarar var. Belki özelleştirilmiş temamızı farklı bir konumda da çalıştırabiliriz ama şuan bunun yolunu ve etkilerini araştırmadım.
Çözülmemiş Hatalar:
[ÇÖZÜLDÜ:] 1) Dailymotion videoları artık amp sayfalarında oynatılıyor.
[CHROME KAYNAKLI] 2) Geliştirici konsolunda göreceğiniz bu hatanın “Failed to load resource: net::ERR_FAILED… cast_sender.js” henüz çözümü yok. Çünkü bu sorunun Youtube ve Chrome kaynaklı olduğu söyleniyor. Google el atarsa çözülecektir.
[ÇÖZÜLDÜ:] 3) “amp-analytics extension .js script” etiketi eksik veya yanlış. Ancak bu etiket “amp-analytics” için gerekli. Bu hata sebebiyle önceki analytics yerleşim tekniğimizi değiştirdik. Yazıdaki güncellemeden analytics yerleşiminizi kontrol edebilirsiniz.
[ÇÖZÜLDÜ:] 4) “amp-ad extension .js script” etiketi eksik veya hatalı, ancak “amp-ad” tarafından zorunlu tutulmaktadır. Bu durum yakında hata olarak değerlendirilecektir.” Bu hatanın çözümü için html-start.php şablonunda uygun konuma aşağıdaki script’i eklemeniz gerekiyor.
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
5) Resimlerde Lightbox efekti için <amp-img etiketi sonrasına on=”tap:lightbox1″ eklemesi ve head etiketi öncesine lightbox js eklemesi yapmamız gerekiyor. Her resim için bunu otomatik yapacak fonksiyonu henüz bulamadım. Gelişme olursa paylaşacağım.
Güncelleme: Eklentiyi kapatır ve /amp url’lerini ana url’lere yönlendirmek isterseniz .htaccess dosyanızdaki mod_rewrite kodunu aşağıdaki şekle getirmeniz yeterli. (Tabi url yapınız farklıysa kodu biraz daha değiştirmeniz gerekebilir. Ana dizindeki kurulumda denendi, çalışıyor.)
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \/amp$
RewriteRule ^(.*)\/amp$ $1 [R=301,L]
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
Yazı ortasına Adsense eklemek için aşağıdaki yorumdan yararlanabilirsiniz.
Ali yazdı; 01.03.2017, 18:39
<?php if ( is_amp_endpoint() ) { echo '<div class="Ads"> <amp-ad width="auto" height="250" type="adsense" data-ad-client="ca-pub-xxxxxxxxx" data-ad-slot="xxxxxx"> </amp-ad> </div>'; } else { echo '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxx" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>'; } ?>verdiğim kodla ad-inserter eklentisi ile reklamları kolayca yayınlayabiliriz. Amp sayfalarında ilk reklam kodu, normal sayfalarda ise ikinci reklam kodu görüntülenir.
AMP Projesine Dair Faydalı Bağlantılar:
1) https://support.google.com/webmasters/answer/6340290 2) https://developers.google.com/search/docs/guides/mark-up-content#use-amp-html 3) https://github.com/Automattic/amp-wp 4) https://github.com/ampproject/amphtml/pull/75/files 5) https://developers.google.com/structured-data/testing-tool/ 6) https://developers.google.com/analytics/devguides/collection/amp-analytics/ 7) https://www.ampproject.org/ 8) https://www.ampproject.org/docs/guides/validate
