Şu anda Görüntülemektesiniz;  WordPress için Google AMP Nedir? Nasıl Kullanılır?
Tarih: 
Google Özel Arama Yükleniyor..
YukarıİletişimYazıya Yorum Gönder!
facebook share twittershare

Wordpress için Google AMP Nedir? Nasıl Kullanılır?

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. 

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. 

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, bileşenler, reklamlar yoksa 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 iki araçtan yararlanıyoruz. 

Accelerated Mobile Pages

İ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. 

Wordpress için Google AMP Nedir? Nasıl Kullanılır?

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; 

Wordpress için Google AMP Nedir? Nasıl Kullanılır?

(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. 

Google Testing Tool

İ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;

Wordpress için Google AMP Nedir? Nasıl Kullanılır?

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ı.) 

Wordpress için Google AMP Nedir? Nasıl Kullanılır?

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 edicez? 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.

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>

Adsense reklamı için ise aşağıdaki kodu düzenliyor ve (Single.php dosyasına) reklamların başlıktan hemen önce görünmesi için <header class="amp-wp-article-header"> etiketinden önce, yazının en sonunda görünmesi için ..// amphtml content; no kses ?> etiketinden sonrasına ekliyoruz. 

<style>
.articlead { width: 300px; height: 250px; }
@media(min-width: 336px) { .articlead { width: 336px; height: 280px; } }
</style>
<amp-ad class="articlead"
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX">
</amp-ad>    

Yukarıdakini kullandığımızda düzgün çalışıyor fakat Chrome geliştirici modunda hata görünüyor. Hatalar olmasın diyorsanız (ki hatalar yüzünden belki Google AMP sayfalarınızı dışlayabilir) doğrudan aşağıdakini kullanın.

<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX">
</amp-ad>

Sonrasında single.php dosyasında head etiketi içerisinede şunu ekleyin;

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

Ve dosyayı 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 single.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="gplus"
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="254325784911610"></amp-social-share>
</div>

Başka birşey yapmanıza gerek kalmadan paylaşım butonları konu bitiminde, adsense reklamı öncesinde görünmeye başlayacak. (Anladığım kadarıyla şimdilik Facebook paylaşımında sorun var ama script amp proje sayfasında durduğundan bir süre sonra düzeltip güncelleyeceklerini umuyorum.) 

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. Ayrıca amp sayfasının fontundaki TR karakter sorunu rahatsız ederse style.php dosyasındaki body css komutunda 'Merriweather' fontundan bir öncesine Tahoma font tanımlaması yapabilirsiniz.

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.

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.

4) <style>, <span, <font size= gibi hatalarda yine eklentiden kaynaklanıyor. Eklentinin güncellenerek kaldırılmaları yada bizim functions dosyasına tek tek komut eklememiz gerekiyor. Henüz bununla alakalı çözüm araştırmadım. 

Güncelleme: Eklentiye gelen son güncelleme ile gereksiz <br> etiketleri kaldırıldı. 

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şıcam.

AMP Projesine Dair Faydalı Bağlantılar: 

1)  https://support.google.com/webmasters/answer/6340290
2)  https://developers.google.com/structured-data/carousels/top-stories
3)  https://github.com/Automattic/amp-wp
4)  https://github.com/ampproject/amphtml/pull/75/files
5)  https://github.com/Automattic/amp-wp/blob/master/readme.md
6)  https://developers.google.com/structured-data/testing-tool/
7)  https://developers.google.com/analytics/devguides/collection/amp-analytics/
8)  https://www.ampproject.org/
9)  https://www.ampproject.org/docs/guides/validate.html
10) https://ampbyexample.com/

facebook share twittershare

    Nedi 25 Eylül 2016, 19:55

    amp.nin signle.php si içinde ve
    etiketi var. İçeriklerde normal şekilde çalışırken, sayfalarda birden bire bu hata çıktı bir şey anlamadım

    Lordiz 25 Eylül 2016, 22:45

    @Nedi; Hataların son görülme tarihine bakın. Belki sunucu kaynaklı geçici bir sorun olabilir. Single.php de eksik yoksa, hata yoksa Google’da hata vermez.

    nedi 27 Eylül 2016, 09:49

    Hocam bu sadece içeriklerde çalışan bir şey mi? Normal sayfalarda çalışmıyor sanırım? İçerik yazılarında sorun yok. Ama wp sayfanın sonuna /amp yada //amp yazıp baktığımda, orjinal sayfaya dönüyor. Wp sayfalara uygulanmıyormu diye düşünmeye başladım

    Lordiz 29 Eylül 2016, 18:26

    @nedi; Şimdilik sadece içeriklerde kullanılıyor. Anasayfa, iletişim sayfası, gizlilik sayfası vb. sayfalarda kullanılmıyor. Amp’ın amacı internetin yavaş olduğu yerlerde sadece içeriği hızlıca sunabilmek. Yani sadece Google ve Bing tarafından arama sonuçlarında görünüyorlar. Kimse tarayıcıya anasayfa adresi yazıp amp sayfasını görmüyor veya içerik bağlantısı sonuna /amp eklemesi yapmıyor. Ancak ilerleyen zamanda Google’un Amp’ı genele yayma ihtimali var. O zaman mobil tasarımın yerini alabilirse tüm sayfalar mecburen amp destekli olacak. Öyle birşeyde de eklenti geliştiricisi gerekli güncellemeyi yapar.

    www.seslinerede.com 11 Ekim 2016, 22:58

    Bilgi için cani gönülden teşekkür ederim

    Eren 18 Ekim 2016, 14:27

    Merhaba hocam eklentiyi aktif ettim ama amp’de yazı içindeki resimler gözükmüyor nasıl çözebilirim bunu

    Lordiz 18 Ekim 2016, 21:07

    @Eren; Tarayıcıdan resim görünmeyen bir amp sayfasını açın, sonrasında ekranda sağ tıklayarak sayfa kaynağına bakın. Orada resim görünmesi gereken yerde ne görünüyor? Bende şöyle görünüyor;

    <amp-img alt="Wordpress için Google AMP Nedir? Nasıl Kullanılır?" src="http://i1145.photobucket.com/albums/o519/ynsyksl/lordblog/google-webmaster-tools-amp_zpsa2oh0h0e.png" class="amp-wp-inline-d8211a35723761ee1b99470655ce298e amp-wp-enforced-sizes" width="678" height="360" sizes="(min-width: 600px) 600px, 100vw"></amp-img>
    pcmy 27 Kasım 2016, 21:01

    iyi akşamlar, güzel anlatımınız için teşekkür ederim. konudan beklenilen tüm sorulara cevap niteliğinde güzel bir yazı olmuş.

    mduman.net

Üyeliksiz Yorum Bırak

Sorularınıza gelen cevapları görmek için sayfayı CTRL+D tuşları ile Yer İmlerine eklemeyi unutmayın.


© 2016 Lordiz.com