Amp Nedir?
WordPress AMP kurulumu
WordPress AMP Reklam Yerleşimi
Joomla Amp Kurulumu

AMP Nedir?

Accelerated Mobile Pages yani Türkçe olarak Hızlandırılmış Mobil Sayfalar. Amp kurulumları sonrası siteler mobil kullanıcılar için oldukça hızlı bir şekilde açılma ve kullanıcıların siteyi hızlı bir şekilde görüntülemesini sağlamak amacındadır. Eğer wordpress, joomla gibi hazır yazılımlar vasıtasıyla sitenizi oluşturmuşsanız eklentiler sayersinde amp kurulumu gerçekleştirebilirsiniz.Fakat html tabanlı bir siteye sahipseniz hali hazırda olan html sayfalarınıza bir kaç eklenti yapmak durumunda kalacaksınız. Ama bu işlem o kadar zor ve zamanınızı çalacak bir işlem değil.

Arama motorlarında Google Amp kullanıcılar için hızlı bir gösterim imkanı sunarken, amp içerikleri sağlamayan web siteleri için mobil arama sonuçlarında dalgalanmalar görülmektedir.Özellikle haber siteleri başta olmak üzere bir çok blog ampye geçiş yapmıştır.

Mobil sitelerin artması ve http, htpps protokollarinin yönlendirilerek şişirilmiş olmasından web sitelerin performanslarında ciddi düşüşler gözlemlenmekteydi. Artan mobil kullanıcılarına bir çözüm olarak Google Search Console’da karşımıza birden Hızlandırılmış Mobil Sayfalar sekmesi belirdi ve çok kısa sürede hayatımıza girdi. AMP üçüncü taraf javascript izin vermediğini dile getirmeliyiz. AYnı zamanda html isteklerine ve kodlarına da minimum düzeyde yer vermektedir. Css kodları kısıklaması maximum düzeyde olduğunu da belirtmekte fayda var. Durum böyle olunca ziyaretçi için site deneyimi sade, hızlı ve maximum verimde gerçekleşmekte.

Sitenizde amp kullanılıp kullanıllmadığını öğrenmek için Google Search Console uygulamasına sitenizi bağlamanız gerekmektedir. Ardından search console menüsünde sol tarafyan Hızlandırılmış Mobil Sayfalar sekmesine giriş yapmalısınız. Eğer amp kullanılmadığına dair bir hata ile karşılaşırsanız aşağıdaki seçeneklerden size uyanı seçerek Amp Kurulumu gerçekleştirebilirsiniz.

WordPress AMP kurulumu

WordPress, dünya üzerinden çok büyük bir kullanım alanına sahip. Daha önceki yazılarımda wordpressin kendi ekosistemini kurduğunu ve açık kaynak koda sahip olmasından dolayı bir çok kullanıcı ve geliştirici tarafından yeni eklentiler, tasarımlar yapıldığını söylemiştim. WordPress Amp eklentisi için de baktığınızda bir çok yeni ücretli ve ücretsiz eklentinin olduğunu görebilirsiniz. Bizi kodlar arasında boğulmaktan kurtarıyor diyebiliriz. Ama her eklenti bizim istediğimiz sonucu vermeyebilir. Bu yüzden işimizi kolaylaştıracak 2 adet Amp eklentisini veriyorum sizlere.

WordPress Amp Eklentisi:

1-Wp For AMP

2- Wp-AMP

WordPress AMP Eklentisi Kurulumu ( Admin Paneli Üzerinden)

Sitenizin Yönetim Paneline gidip yönetici girişi yaptıktan sonra Eklentiler> Yeni Ekle seçeneğine tıklayarak devam edin ve açılan pencerede sağ üst tarafa yani arama kısmına yukarıda verdiğim eklenti isimlerinden birini yazarak arayınız. Çıkan sonuçlardan uygun olanı seçip kurulumunuzu yapınız. Etkinleştir diyerek devam ediniz. WordPress Amp Kurulumu anlatımına manuel eklenti kurulumunu anlattıktan sonra devam edeceğiz.

WordPress Amp Eklentisi Kurulumu ( FTP Üzerinden)

İstediğiniz wordpress amp eklentisini tarayıcınız üzerinden indirin ve klasöre çıkartın. Sitenizin sunucuna istediğiniz programla bağlanarak çıkarttığınız klasörü public_html/wp-content/plugins yoluna gönderiniz. Ardından yönetici hesabınıza admin panelinize girip eklentiyi etkinleştirebilirsiniz.

Genellikle wordpress amp kurulumu sonrası bir ayar yapmanız gerekmektedir. Gerekli tüm ayarları eklentiler kendi içlerinde barındırıyorlar. Fakat bazı eklentileri türkçeleştirmeniz için Translations Sekmesi olmaktadır. Bazı eklentilerde ise WordPress admin panelinizden Görünüm> Özelleştir dediğinizde AMP Theme diye bir sekmeden amp görünümüzü düzenlemenize olanak sağlamaktadır. Eğer böyle bir seçenek sizde belirmediyse siz kendiniz functions.php dosyanıza eklemeler yaparak düzenlemeler yapabilirsiniz.

WordPress AMP Logo Sorunu İçin:

/* 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.siteniz.com/logo.png’ );
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 28px;
width: 94px;
margin: 0 auto;
text-indent: -9999px;
}
<?php
}

WordPress AMP Resimler Gözükmüyor Sorunu için

/* 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;
}

 

AMP sayfamızı arama motorlarına belirtmek için temanızın header.php dosyasını açın ve </head> tagından önce şu kodu ekleyin:

<link rel=’amphtml’ href='<?php the_permalink(); ?>/amp’ />

header.php içinde zaten <link rel=’amphtml’ ile başlayan bir kod bulunuyorsa eklemenize gerek yoktur.

WordPress Amp İçin Google Analytics

Ftp programı yardımıyla site dizininizden wp-content/plugins/amp/templates klasörüne giriş yapmanız gerekiyor. Single.php dosyası görmneniz gerekecek bu dosyayı açıp </body> etiketi önüne kodlarınızı ekleyebilirsiniz. Aşağıda örnek bir kod veriyorum.UA-xxxxx kısımlarınızı kendi Google Analytics kimliğiniz ile değiştirmelisiniz.

<amp-analytics type=”googleanalytics” id=”analytics1″>
<script type=”application/json”>
<?php
echo json_encode( array(
‘vars’ => array(
‘account’ => ‘UA-XXXXXXX-XX’,
),
‘triggers’ => array(
‘trackPageview’ => array(
‘on’ => ‘visible’,
‘request’ => ‘pageview’,
)
),
) );
?>
</script>
</amp-analytics>

WordPress amp kurulumu için son işlem olarak wp-content/themes/temanız klasöründeki functions.php dosyanıza (?> tagından önce aşağıdaki kodları eklemelisiniz.

/**
* Add the AMP analytics script to head of AMP pages
*/
function isa_amp_scripts( $data ) {
$data[‘amp_component_scripts’][‘amp-analytics’] = ‘https://cdn.ampproject.org/v0/amp-analytics-0.1.js’;
return $data;
}
add_filter( ‘amp_post_template_data’, ‘isa_amp_scripts’ );

Tabi bu kodları eğer bahsettiğim Görünüm> Özelleştir kısmında AMP Template ya da AMP Tema gibi bir seçenek görmeyen arkadaşlar yapması gerekecek. Eğer özelleştir dedikten sonra amp tema seçeneğini görüyorsanız zaten oradan bu işlemleri sadece izleme kimliğini girerek kurtulabilirsiniz. 🙂

WordPress AMP Reklam Yerleşimi

WordPress Amp Kurulumu sonrası sitenizdeki reklamlar amp versiyonunuzda yer almayacaktır. Eğer adsense gibi reklam sağlayıcılardan reklam yerleştirmişseniz ve bu reklamların amp sayfalarınızda da yer almasını istiyorsanız aşağıda vereceğim düzenlemeleri yapmanız gerekecektir.

Ftp programı yardımıyla public_html/wp-contetnt/plugins/amp/templates  klasörüne giriş yapıyoruz ve single.php dosyamızı açıyoruz.

Aşağıda vereceğim kodları yazı başına ve ya yazı sonuna göre istediğiniz yere ekleyebilirsiz.

Yazı başlangıcına eklemek için: <div class=”amp-wp-content”> kodundan sonra aşağıdaki kodları ekleyin ve düzenleme yapın.
Yazı sonuna eklemek için: amphtml content; no kses ?> kodundan sonra aşağıdaki kodları ekleyin ve düzenleme yapın.

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

Kod için yapmanız gereken düzenlemeler:

-width: 300px olan kısımda 300 yerine reklam genişliğini yazın.
-height: 250px olan kısımda 250 yerine reklam yüksekliğini yazın.
-data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX” yazan kısma ca-pub-xx yerine yayıncı kimliğinizi yazın.
-data-ad-slot=”XXXXXXXXXX” yazan kısma xx yerine reklam isminizi yazın.

Amp eklentileri güncellemesi sonucu wordpress amp reklam yerleşiminizi kaybedebilirisiniz. Tekrardan wordpress amp reklam yerleşimi yapmanız gerekebilir. Lütfen arada sırada kontrolleriniz gerçekleştiriniz.

WordPress Amp Kurulumu ve wordpress amp reklam yerleşimi için alıntı olarak gösterdiğim kodlar https://www.seosefi.com/amp-kurulum-rehberi/ adresinden alıntıdır.

Joomla Amp Kurulumu

WbAMP Community edition joomla amp eklentisi yardımıyla içeriklerinizin otomatik olarak AMP sürümü oluşturulur, böylece arama motorlarına internet sitenizdeki içeriğin “hızlandırılmış mobil sayfalar” sürümü bildirir. Eklentinin ücretli ve bedava versiyonları bulunuyor olup, bu bedava sürümü Joomla! com_content ile çalışacak ve sitenizin temiz, kolay bir sürümünü AMP formatında görüntüleyecektir.

ÖZELLİKLER:

– DISQUS yorumları amacıyla destek eklendi.
– En son AMP spesifikasyonunda güncelleme yapıldı.
– Yanlış yapılandırma halinde uyarılar.
– Beyaz listeye dayalı AMP doğrulama, daha verimli.
– Çoklu doküman türleri.

Eklenti adresi paylaşım yapmadan açılmayacaktır.

Joomla Amp Eklentisi: [sociallocker] https://weeblr.com/download?dl_ids=16 [/sociallocker]

Sizler için amp nedir, wordpress amp kurulumu ve reklam yerleşimi, joomla amp kurulumu hakkında bilgi vermeye çalıştım. Umarım faydalı olabilmişimdir. ClassiPress Amp Kurulumu için yazıma göz atabilirsiniz.