İpucu: Wordpress Siteniz için AMP Eklenti ve Ayarlar

Wordpress sitenizde Google hızlandırılmış mobil sayfalar (Google accelerated mobile pages) yani AMP eklentisi kurarak ayarlarını nasıl yapabileceğinize dair pratik bilgiler vereceğim.

AMP nedir? AMP ne işe yarar? gibi bilgileri zaten forumdaki farklı konulardan öğrenmiş olduğunuzu düşünerek bu detaylara hiç girmiyorum. Wordpress site için AMP kurulum ve ayarlar nasıl yapılır bunu açıklayacağım.

Bazı arkadaşlar AMP eklentisi kurduktan sonra AMP Temayı düzenleyemediğinden, analytics kodu ekleyemediğinden, reklam ekleyemediğinden veya tasarımın çok sade olmasından yakınıyor. Bunun gayet pratik bir çözümü var. Sitenizin AMP olması için ücret ödemenize gerek yok bir kaç adımda kendiniz uygulayabilirsiniz.


1. Eklenti : AMP (Geliştirici: Automattic)

2. Eklenti : AMP for WP - Accelerated Mobile Pages (Geliştirici: Ahmed Kaludi, Mohammed Kaludi)

1. ve 2. eklentileri kurun ve aktifleştirin. (iki eklenti birlikte çalışmaktadır)

AMP sayfalarınıza siteadi.com/konu-link.html/amp şeklinde ulaşarak kontrol edebilirsiniz.

Sitenizin wp-admin panelini yenileyin sol menünün en altında AMP menüsü çıkacaktır.

Getting Started kısmına tıklayın ve ayarlamaya başlayın.

General

Bu kısımda logo ayarları ve analytics ayarları bulunmaktadır. Benim uyguladığım ayarlar resimdeki gibidir.



Design

Bu bölümde birşey değiştirmenize gerek yok. Design Two ayarı olduğu gibi kalsın.

Eğer ki AMP Tema rengini değiştirmek isterseniz

Design menüsündeki Drag & Drug Post Builder yazan yerin sağındaki Launch Post Builder 'a Tıklayın. AMP Tema özelleştirme sayfası açılacak.

Üst kısım arkaplan ve bağlantı renkleri yazan yerden sitenin rengini değiştirebilirsiniz. Temayı açık versiyon veya koyu versiyon olarak düzenleyebilirsiniz.

Ayrıca bu kısımda sol menü üstte bulunan Meta info yanındaki clicki kaldırın. Yazar görünmesin.

Seo

Yoast SEO eklentisi kullanıyorsanız aşağıdaki ayarları ON olarak ayarlayın. All in one seo kullanıyorsanız yada seo eklentisi kullanmıyorsanız OFF olarak ayarlayın.

• Add Meta Tags from Yoast
• Yoast Custom Description for AMP page

MENU

Bu kısımdan sitenizdeki konulardaki AMP sayfa üzerinde bulunan menü ayarını yapıyorsunuz. Sitenizin ana menü pozisyonu hangisi ise amp içinde bu menüyü seçip menüler kısmını kaydetmeniz yeterlidir.

Advertisement

AMP versiyonda bulunan adsense yada farklı reklam ayarlarını yapmanızı sağlayan kısımdır.

Site geneli üst ve alt kısım reklam ekleme (AD #1 #2), tekil yazı üstüne ve altına reklam ekleme (AD #3 #4) şeklindedir.

AD #1
Below the Header (SiteWide)


AD #2
Below the Footer (SiteWide)


AD #3
Above the Post Content (Single Post)


AD #4
Below the Post Content (Single Post)


Single

Single yani tekil yazı sayfasında benzer yazıların miktarı, önceki ve sonraki yazı gösterimi, sosyal medya paylaşım ikonlarının gösterimi gibi seçeneklerin bulunduğu kısımdır. Benim ayarlarım aşağıdaki şekildedir.



Social

Bu bölümden sosyal medya paylaş butonlarını belirleyebilirsiniz.

Structured Data ve Notifications menüsünde herhangi bir ayar yapmadım. Notifications OFF durumdadır. Ziyaretçiye herhangi bir bildirim göndermeye gerek görmedim.

Translation Panel

Bu kısım dil çevirisi yapacağınız alandır. Site diliniz ne ise ona göre çeviri yapabilirsiniz.



Aşağıdaki video ile kurulum ve ayarlarla ilgili bilgi alabilirsiniz.


https://www.youtube.com/watch?v=zzRy6Q_VGGc


Sitenizin mobil ziyaretlerde daha hızlı açılması için ve sitenizin mobil kullanımlarda gereksiz sorgular ile kasılmaması için AMP gayet etkili bir çözümdür. Mobil kullanımın yüksek olduğu sitelerde AMP ile site hızınızı arttırabilirsiniz.

Örnek GTmetrix ve Google PageSpeed Tools sonuçları :





EK BİLGİ

https://validator.ampproject.org/ bu kısımdan AMP sayfanızın uyumluluğunu kontrol edebilirsiniz.

Eğer şu hatayı alırsanız : The extension 'amp-social-share extension .js script' was found on this page, but is unused (no 'amp-social-share' tag seen). This may become an error in the future.

Hatanın sebebi olan kod:

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

Çözümü :

wp-admin menüsünden Görünüm -> AMP tıklayın.

Açılan sayfa sol menüden TASARIM tıklayın ve Social Icons yanındaki clicki kaldırın, kaydedin. Yeniden validator ile kontrol edin, sorun çözülmüştür.



Umarım faydalı olmuştur. Bu 2 eklenti ile istediğiniz gibi yöneteceğiniz AMP versiyona kavuşabilirsiniz.

Çok fazla zamanım olmadığı için konuda soracağınız sorulara yanıt veremeyebilirim, bilgisi olan arkadaşlarla yardımlaşabilirsiniz.

iyi forumlar

Yardımcı olabilirseniz sevinirim.

Öncelikle çok teşekkür ederim. Dediğiniz gibi eklentileri vs. kurdum. Test sitesine siteadresi.com/amp şeklinde mi yazacağız yoksa sadece siteadresi.com olarak mı?

Ayrıca telefondan girince amp sayfasına yönlendirmiyor? Mobil tema geliyor? Bu sorunu nasıl aşabilirim

AMP -> General -> Mobile Redirection

Aktif ederseniz mobil sayfalar AMP sayfasına yönlendirilir.

İlginiz için çok teşekkür ederim, yaptım şuan yönlendiriyor.

İlk soruma da cevap verme şansınız varsa sevinirim hocam.

Bilgisayardan kaynak kodunu açıp <link rel="amphtml" href=" şeklinde arama yapın hangi URL yapısı olduğunu görebilirsiniz.

Wordpress sitenizde Google hızlandırılmış mobil sayfalar (Google accelerated mobile pages) yani AMP eklentisi kurarak ayarlarını nasıl yapabileceğinize dair pratik bilgiler vereceğim.

AMP nedir? AMP ne işe yarar? gibi bilgileri zaten forumdaki farklı konulardan öğrenmiş olduğunuzu düşünerek bu detaylara hiç girmiyorum. Wordpress site için AMP kurulum ve ayarlar nasıl yapılır bunu açıklayacağım.

Bazı arkadaşlar AMP eklentisi kurduktan sonra AMP Temayı düzenleyemediğinden, analytics kodu ekleyemediğinden, reklam ekleyemediğinden veya tasarımın çok sade olmasından yakınıyor. Bunun gayet pratik bir çözümü var. Sitenizin AMP olması için ücret ödemenize gerek yok bir kaç adımda kendiniz uygulayabilirsiniz.


1. Eklenti : AMP (Geliştirici: Automattic)

2. Eklenti : AMP for WP - Accelerated Mobile Pages (Geliştirici: Ahmed Kaludi, Mohammed Kaludi)

1. ve 2. eklentileri kurun ve aktifleştirin. (iki eklenti birlikte çalışmaktadır)

AMP sayfalarınıza siteadi.com/konu-link.html/amp şeklinde ulaşarak kontrol edebilirsiniz.

Sitenizin wp-admin panelini yenileyin sol menünün en altında AMP menüsü çıkacaktır.

Getting Started kısmına tıklayın ve ayarlamaya başlayın.

General

Bu kısımda logo ayarları ve analytics ayarları bulunmaktadır. Benim uyguladığım ayarlar resimdeki gibidir.



Design

Bu bölümde birşey değiştirmenize gerek yok. Design Two ayarı olduğu gibi kalsın.

Eğer ki AMP Tema rengini değiştirmek isterseniz

Design menüsündeki Drag & Drug Post Builder yazan yerin sağındaki Launch Post Builder 'a Tıklayın. AMP Tema özelleştirme sayfası açılacak.

Üst kısım arkaplan ve bağlantı renkleri yazan yerden sitenin rengini değiştirebilirsiniz. Temayı açık versiyon veya koyu versiyon olarak düzenleyebilirsiniz.

Ayrıca bu kısımda sol menü üstte bulunan Meta info yanındaki clicki kaldırın. Yazar görünmesin.

Seo

Yoast SEO eklentisi kullanıyorsanız aşağıdaki ayarları ON olarak ayarlayın. All in one seo kullanıyorsanız yada seo eklentisi kullanmıyorsanız OFF olarak ayarlayın.

• Add Meta Tags from Yoast
• Yoast Custom Description for AMP page

MENU

Bu kısımdan sitenizdeki konulardaki AMP sayfa üzerinde bulunan menü ayarını yapıyorsunuz. Sitenizin ana menü pozisyonu hangisi ise amp içinde bu menüyü seçip menüler kısmını kaydetmeniz yeterlidir.

Advertisement

AMP versiyonda bulunan adsense yada farklı reklam ayarlarını yapmanızı sağlayan kısımdır.

Site geneli üst ve alt kısım reklam ekleme (AD #1 #2), tekil yazı üstüne ve altına reklam ekleme (AD #3 #4) şeklindedir.

AD #1
Below the Header (SiteWide)


AD #2
Below the Footer (SiteWide)


AD #3
Above the Post Content (Single Post)


AD #4
Below the Post Content (Single Post)


Single

Single yani tekil yazı sayfasında benzer yazıların miktarı, önceki ve sonraki yazı gösterimi, sosyal medya paylaşım ikonlarının gösterimi gibi seçeneklerin bulunduğu kısımdır. Benim ayarlarım aşağıdaki şekildedir.



Social

Bu bölümden sosyal medya paylaş butonlarını belirleyebilirsiniz.

Structured Data ve Notifications menüsünde herhangi bir ayar yapmadım. Notifications OFF durumdadır. Ziyaretçiye herhangi bir bildirim göndermeye gerek görmedim.

Translation Panel

Bu kısım dil çevirisi yapacağınız alandır. Site diliniz ne ise ona göre çeviri yapabilirsiniz.



Aşağıdaki video ile kurulum ve ayarlarla ilgili bilgi alabilirsiniz.


https://www.youtube.com/watch?v=zzRy6Q_VGGc


Sitenizin mobil ziyaretlerde daha hızlı açılması için ve sitenizin mobil kullanımlarda gereksiz sorgular ile kasılmaması için AMP gayet etkili bir çözümdür. Mobil kullanımın yüksek olduğu sitelerde AMP ile site hızınızı arttırabilirsiniz.

Örnek GTmetrix ve Google PageSpeed Tools sonuçları :





EK BİLGİ

https://validator.ampproject.org/ bu kısımdan AMP sayfanızın uyumluluğunu kontrol edebilirsiniz.

Eğer şu hatayı alırsanız : The extension 'amp-social-share extension .js script' was found on this page, but is unused (no 'amp-social-share' tag seen). This may become an error in the future.

Hatanın sebebi olan kod:

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

Çözümü :

wp-admin menüsünden Görünüm -> AMP tıklayın.

Açılan sayfa sol menüden TASARIM tıklayın ve Social Icons yanındaki clicki kaldırın, kaydedin. Yeniden validator ile kontrol edin, sorun çözülmüştür.



Umarım faydalı olmuştur. Bu 2 eklenti ile istediğiniz gibi yöneteceğiniz AMP versiyona kavuşabilirsiniz.

Çok fazla zamanım olmadığı için konuda soracağınız sorulara yanıt veremeyebilirim, bilgisi olan arkadaşlarla yardımlaşabilirsiniz.

iyi forumlar