İçeriğe geçmek için "Enter"a basın

WordPress Ücretsiz AMP Eklentisi Kurulumu ve Reklam Yerleştirme

Mobil platformlarda sayfalarınızın hızlı açılması ve ziyaretçinin içeriğe direkt olarak erişmesi için geliştirilen Accelerated Mobile Pages (Google AMP Project)’i WordPress ekibinin geliştirdiği bir eklenti ile kolayca kurabilirsiniz.

WordPress ve Google’ın geliştirdiği AMP Eklentisi

Buradan AMP For WordPress eklentisini indirelim ve websitemize Eklentiler > Yeni Ekle kısmından yükleyelim, ardından aktifleştirmeyi unutmayalım.

Eklentiyi etkinleştirdikten sonra Admin panelimizde Ayarlar sekmesinin hemen altında AMP isminde bir sekme göreceksiniz. Buna tıklayalım.

Buradan ben sadece yazıların AMP sayfa sürümleri gözükmesini istediğim için sadece yazıları işaretledim, siz eğer sayfalarında gözükmesini istiyorsanız işaretleyebilirsiniz. Ücretsiz sunulan bu eklentide, Anasayfa ve Kategori sayfalarının AMP versiyonları maalesef bulunmuyor.

Eğer Kategori ve Anasayfanızında AMP sürümünün bulunmasını istiyorsanız CodeCanyon’dan ücretli AMP eklentisi edinebilirsiniz.

[reklam]

WordPress AMP Eklentisi Google Analytics Kodu Ekleme

Ziyaretçileri metriklemek için Analytics kodumuzu girelim. Kodu girmeden önce temanın <head> etiketi arasına;

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

yukarıdaki kodu giriyoruz. Ardından hemen AMP > Analytics kısmına girelim ve Kodumuzu Ekleyelim.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

Burada UA-XXXXX-Y yazan kısma Google Analytics idnizi girebilirsiniz. Type kısmına ise googleanalytics yazıyoruz. Eğer

Invalid analytics config JSON.

hatasını alırsanız ya manuel yada Yoast Seo eklentisinin AMP eklentisi kurmanız gerekir. Manuel için buradan yardım alabilirsiniz. Amp Yoast Seo eklentisi buradan indirebilirsiniz.

Analitik kodunu yukarıdaki kodu düzenleyerek elde edebilirsiniz. Kodu girdikten sonra ayarları kaydedelim, birde AMP örnek sayfamızda kodun eklenip eklenmediğini kontrol edelim.

Gördüğünüz gibi sorunsuz kodumuz amp sayfamıza dahil oldu.

Amp Sayfalarımıza Reklam Yerleşimi

Sitemizdeki bütün makalelere Amp versiyonlu birer sayfa oluşturduk. Şimdi bu sayfalara reklam kodlarını ekleyelim. Google Adsense otomatik reklamlar seçeneğini kullanarak AMP sayfalarımıza özel Google Adsense Kodlarımızı alalım.

Reklamlarım > İçerik > Otomatik Reklamlar > Amp için Otomatik Reklamlar yolunu izleyerek yukarıdaki sayfaya erişebilirsiniz. Ardından 1. Adımda Metin ve görüntülü reklam biçimlerini etkinleştirin kısmını aktif ediyoruz. Daha sonra 2. Adımda yer alan kodu AMP sayfalarımızın <head> </head> tagları arasına ekliyoruz. Yani;

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

yukarıdaki kodu Eklentiler > Düzenleyici > amp > templates > html-start.php yoluna gidin. Açılan sayfada <head> tagları arasına ekleyin.

<?php
/**
 * HTML start template part.
 *
 * @package AMP
 */

/**
 * Context.
 *
 * @var AMP_Post_Template $this
 */
?>
<!doctype html>
<html amp <?php echo AMP_HTML_Utils::build_attributes_string( $this->get( 'html_tag_attributes' ) ); // WPCS: XSS ok. ?>>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <?php do_action( 'amp_post_template_head', $this ); ?>
  <style amp-custom>
    <?php $this->load_parts( array( 'style' ) ); ?>
    <?php do_action( 'amp_post_template_css', $this ); ?>
    
  </style>
  <script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
</head>

<body class="<?php echo esc_attr( $this->get( 'body_class' ) ); ?>">

Yani yukarıdaki gibi olacak. Şimdi Diğer kısma geçiyoruz. Reklamların gözükmesini istediğiniz yere 3. Adımdaki

<amp-auto-ads type="adsense"
              data-ad-client="ca-pub-XXXXXXXXXXXXXXX">
</amp-auto-ads>

kodunu eklemeliyiz. Eklentiler > Düzenleyici > AMp > Templates > single.php dosyamızı açalım. içerisine yapıştıralım.

<?php
/**
 * Single view template.
 *
 * @package AMP
 */

/**
 * Context.
 *
 * @var AMP_Post_Template $this
 */

$this->load_parts( array( 'html-start' ) );
?>

<?php $this->load_parts( array( 'header' ) ); ?>
<amp-auto-ads type="adsense"
              data-ad-client="ca-pub-XXXXXXX">
</amp-auto-ads>
<article class="amp-wp-article">
  <header class="amp-wp-article-header">
    <h1 class="amp-wp-title"><?php echo esc_html( $this->get( 'post_title' ) ); ?></h1>
    <?php $this->load_parts( apply_filters( 'amp_post_article_header_meta', array( 'meta-author', 'meta-time' ) ) ); ?>
  </header>

  <?php $this->load_parts( array( 'featured-image' ) ); ?>

  <div class="amp-wp-article-content">
    <?php echo $this->get( 'post_amp_content' ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?>
  </div>

  <footer class="amp-wp-article-footer">
    <?php $this->load_parts( apply_filters( 'amp_post_article_footer_meta', array( 'meta-taxonomy', 'meta-comments-link' ) ) ); ?>
  </footer>
</article>

<?php $this->load_parts( array( 'footer' ) ); ?>

<?php
$this->load_parts( array( 'html-end' ) );

Artık yazılarınızın Amp sürümlerinde de Google reklamları otomatik yer alacak. Yazınızın uzunluğuna göre belirli aralıklarla Google kendisi reklam yerleştirimi sağlayacak.

Ek Not: Uyarı: Etkin durumdaki eklentilerde değişiklik yapılması önerilmez. gibi bir uyarı ile karşılaşırsanız AMP eklentisini devre dışı bırakıp gerekli değişiklikleri gerçekleştirdikten sonra işleme tekrar etkinleştirin.

Amp Sayfalarımızın Daha Hızlı İndex Alması için Ne Yapabilirim ?

Bu önerimide dikkate almanızda fayda var, Google’da sitenizin indexlenmesi çok kısa sürede gerçekleşiyorsa AMP sayfalarınızıda hızlıca indexletebilirsiniz. Bunun için Temanızın Single.php dosyasını düzenleyerek Post meta kısmına bir link ekleyebilirsiniz. Buda Google botlarının sitenizi ziyareti esnasında AMP sayfalarınıza da erişmesini kolaylaştıracak ve böylece AMP sayfalarınızın indexlenmesi daha kolay olacaktır.

<a style="padding-left:10px;font-size:14px;" href="<?php the_permalink(); ?>amp/"> Mobil Versiyonda Görüntüle</a>

kodunu single.php dosyanıza  eklemeniz yeterlidir.

Artık her postumun içerisinde mobil versiyonda görüntüle linki çıktı ve bu linke tıkladığımda otomatik olarak yazının AMP versiyonuna yönlendiriyor.

2 Yorum

  1. Tamer ALTIN Tamer ALTIN Mart 18, 2019

    Çok faydalı bir paylaşım olmuş hocam teşekkür ederim. Benim bir kaç sorum olacaktı size.

    1- Söylemiş olduğunuz gibi yapmış olmama rağmen, Amp otomatik reklamlar benim web sitemde 5 gündür aktif hale gelmedi. Daha önce başka bir adreste aynı işlemleri yaptığımda 2 gün sonra aktif olmuşlardı.

    2- İkinci sorum Konuyla direkt olarak alakalı olmasa da bilginiz dahilindeyse lütfen cevap verin.

    Search console’den apm sayfalarda “Resmin boyutu, önerilen boyuttan daha küçük” hatası alıyorum. Google makaleleri incelediğimde resimler için ” 16 × 9, 4 × 3 ve 1 × 1 en-boy oranlarından herhangi birine göre, yüksek çözünürlükle görseller kullanın.” yazıyor.

    Burada verilen ölçüler yaklaşık genişlik ve yükseklik oranı nedir. ? Örneğin 16:9 için 1920×1080 boyutunda resimler mi eklemem gerekiyor ? Bu boyutta bir foto masaüstü temaya için bu sefer büyük görseller hatası oluşmayacak mı ?

    3- Amp sayfasında fav icon gözükmüyor, bu sorunu da ne yaptıysam çözemedim bunla ilgili bir bilginiz var mı ?

    4- Son sorum ise temanız ile ilgili. Temadan memnun musunuz ve hangi hosting firmasını kullanıyorsunuz ?

    Bilginiz dahilindeyse vaktinizi ayırır ve cevaplarsanız çok sevinirim. Teşekkürler, kolay gelsin.

    • Kazım Uslu Kazım Uslu Yazar | Mart 21, 2019

      1. Sorun Google ile alakalı olabilir. Son güncellemeden sonra birçok sitemde reklam sıkıntısı yaşadım.
      2. internetten baktım ve en boy orantısı olarak geçiyor. 16×9 yada 4×3 veya 1×1 şeklinde kare resim gönderebilirsiniz. Minimum olarak 1200 piksel genişlik istiyor ve her içerikte en az bir adet resim bulunmalı.
      3. favicon kodunu html-start.php dosyasında head tagları arasına ekle 4. Polonyoda bulunan kendi sunucumu kullanıyorum herhangi bir hosting firması değil, temada fena sayılmaz 🙂

Bir cevap yazın

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