Süleyman Sönmez

Google geçen yıldan beri web site yayıncılarına AMP hakkında önerilerde bulunuyor. Sayfanın cep telefonunda çok hızlı açılması, görsellerin sıkıştırılıp 4G kotanızı bitirmemesi AMP’nin getirdiği en büyük yenilikler.

Ekranı kaplayan reklamların, üyelik isteyen tam ekran kutuların, minicik yazıların, kodların, yüklenmeyen sayfaların sonu demek aynı zamanda.

AMP adlı yeni standart, webin ergonomik kullanımı için olmazsa olmaz oluyor. Web siteniz varsa ve Google aramalarında SEO açısından da öne çıkmak istiyorsanız bu yazı işinize yarayacaktır.

Süleyman Sönmez - Güneşin Tam İçinde amp-wordpress-960x795 Websitenize AMP Nasıl Kurarsınız? AMP ile Siteler Cep Telefonu için Hızlı ve Kullanışlı Oluyor | Wordpress İçin AMP Pluginleri Bilgisayar ve Web  Wordpress İçin AMP Pluginleri Wordpress İçin AMP Eklentileri Web Siteleri Responsive Mobil Site AMP

AMP bir kısaltma, açık hali Accelerated Mobile Pages (Hızlandırılmış Mobile Sayfalar)

Gördüğümüz gibi anahtar kelime “HIZ”. Mobil kullanıcılarının %48’inin hızlı açılmayan sitelere tekrar girmek istemediği yönünde istatistikler var.

Okuyucu hızlı okunan kolay kullanılan sayfa istiyor.

ÖNEMLİ NOT: Aman dikkat bu responsive tasarım değil. “Benim sitemin zaten mobil teması var. Bana lazım değil” demeyin. Artık her sitenin neredeyse, mobile uygun otomatik boyutlanan site arabirimi var. Ama bu yeni bir şey.

AMP Projesinin ana sayfası:
https://www.ampproject.org/tr/

AMP Kısa Tanıtım Videoları

Google uzmanından daha teknik bir anlatım.

 

Google Youtube AMP Kanalına abone olmak veya videoları izlemek isteyebilirsiniz.
https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw/videos

 

Worpdress Sitenize AMP Nasıl Kurulur?
Sitenizin AMP versiyonunu hemen oluşturabilirsiniz.

  1. Eklentimiz AMP Plugin (Automattic geliştirici)
    https://wordpress.org/plugins/amp/
    Türkçe: https://tr.wordpress.org/plugins/amp/
    Bu eklenti oldukça hızlı gelişiyor. Zamanla daha da iyi olacaktır. Yüklediğinizde Google sizin AMP desteğinizi fark ediyor. Arama sonuçlarında sizin bu adresinizi kullanıyor. Yani masa üstü bilgisayardan giren farklı, mobil telefondan giren farklı içerik görüyor.
    İncelemeniz için örnek:
    Normal sayfa
    https://www.gunesintamicinde.com/uc-kitap-yazdim-hiper-super-luper-bob-ikiden-uce-biraz-tuhaf-bir-kitap/
    AMP sayfası
    https://www.gunesintamicinde.com/uc-kitap-yazdim-hiper-super-luper-bob-ikiden-uce-biraz-tuhaf-bir-kitap/amp
  2. Eklenti kurulunca sitemize göre özelleştime için WordPress yönetim panelinde Görünüm menüsü altında AMP seçerek renkleri nelerin görünüp görünmeyeceğini seçebilirsiniz.
    Süleyman Sönmez - Güneşin Tam İçinde amp-wordpress-960x795 Websitenize AMP Nasıl Kurarsınız? AMP ile Siteler Cep Telefonu için Hızlı ve Kullanışlı Oluyor | Wordpress İçin AMP Pluginleri Bilgisayar ve Web  Wordpress İçin AMP Pluginleri Wordpress İçin AMP Eklentileri Web Siteleri Responsive Mobil Site AMP   Süleyman Sönmez - Güneşin Tam İçinde screenshot-2-960x734 Websitenize AMP Nasıl Kurarsınız? AMP ile Siteler Cep Telefonu için Hızlı ve Kullanışlı Oluyor | Wordpress İçin AMP Pluginleri Bilgisayar ve Web  Wordpress İçin AMP Pluginleri Wordpress İçin AMP Eklentileri Web Siteleri Responsive Mobil Site AMP
  3. İkinci eklentimiz ise AMP for WP – Accelerated Mobile Pages
    İlkinin eksiklerini kapatıyor daha çok ayar sağlıyor ve onunla birlikte kuruluyor tek başına değil.
    https://wordpress.org/plugins/accelerated-mobile-pages/
    Bu ikinci eklenti tamamen kişisel bir seçim, kurmak zorunda değilsiniz güzel özellikler ekliyor. Testlerim sürüyor. Zamanla farklı AMP eklentileri çıkabilir ve ek özellikler verebilir.
    https://wordpress.org/plugins/search/amp/ adresine ara ara girip en çok indirilen eklentilere bakmakta fayda var. Siz bu yazıyı okuduğunuzda yazdığım tarihten geçen zamana göre değerlendirme yapın lütfen.
  4. Bu ikinci eklenti kurulunca WP yönetim panelinde soldaki menüde altlara yeni bir AMP başlığı açıyor. Başlığa tıklayınca çok sayıda ayar veriyor.
    * Mesela kendi Google Adsense reklamlarınızı ekleyebilirsiniz.
    * Yorumlar sayfaya eklenir.
    * Yazar kutusu gelir.
    * Sayfanın en üstünde görünmesini istediğiniz site logosunu seçebilirsiniz.
    * Aynı şekilde ana sayfa olarak bir yazınızı seçebilirsiniz.
    * Google Analytics izleme kodu ekleyebilirsiniz.
    * 3 Design / Tasarımdan birini seçebilirsiniz. Ben 3. yü sevdim.
    * Sayfanın altına gelecek sosyal medya paylaşım linklerini değiştirebilirsiniz.
    * Önerilen web sitenize ait sosyal medya hesaplarını ekleyebilirsiniz.
    * Translate sayfasında AMP sitenizi Türkçeye çevirebilirsiniz.
    * Mobile Redirection önemli. Google dan arayarak gelenler dışında cep telefonu ile gelen tüm okurlarınızın AMP sayfalarına yönelmesini sağlar.
    * Menü eklemeyi unutmayın. Sol üstte üç çizgi ile çıkan menü için WP yönetim paneli menüler bölümünde AMP için görüntülenecek menüyü seçiniz.

SÜREKLİ CEP TELEFONU İLE KONTROL ETMEDEN BİLGİSAYARLA NASIL ÇALIŞILIR?

Ama sayfanızın nasıl görüneceğini her cihazdan görmek için kolay bir yol var. Sayfa adresinin sonuna /amp eklemek yeterli.

www.siteadresim.com/makalem  sayfa adresiyse
www.siteadresim.com/makalem/amp

AMP sayfa oluyor.

Eklentileri kurduk ve kendimize göre ayarladık diyelim. Oldu mu peki, sitenin eksiklerini hatalarını nasıl kontrol edeceğiz?

AMP DOĞRULAYICI / VALIDATOR

https://validator.ampproject.org/

Sayfasına gidip en üste URL alanına yazdığınızda istediğiniz web sayfasının AMP uygunluğunu denetleyebilirsiniz.

Google da bir AMP doğrulama sayfası sunuyor.

https://search.google.com/search-console/amp

Google Webmaster TOOLS VE AMP

Google Webmaster Araçları site sahiplerinin kullanması gereken önemli bir merkez.
AMP çalışmalarınızın başarısını ölçmek için Google ile çalışmak lazım.
Örneğin
https://www.google.com/webmasters/tools/accelerated-mobile-pages?hl=tr&siteUrl=https://www.gunesintamicinde.com/

bu adreste son kısımda kendi web site adresinizi yazdığınızda (benim site adresimi silip) karşınıza AMP analizi gelecek.

Tabloda kaç sayfanızın Google AMP dizinine eklendiği. Kabul edilmeyen sayfaların neden reddedildiği ve arama sonuçlarından çıkarıldığı da görülecek. Dolayısıyla AMP işi biraz eklentilerden vazgeçmek anlamına da geliyor. Javascript kullanan eklentiler o sayfada yer alamayacaktır.

Süleyman Sönmez - Güneşin Tam İçinde amp-wordpress-960x795 Websitenize AMP Nasıl Kurarsınız? AMP ile Siteler Cep Telefonu için Hızlı ve Kullanışlı Oluyor | Wordpress İçin AMP Pluginleri Bilgisayar ve Web  Wordpress İçin AMP Pluginleri Wordpress İçin AMP Eklentileri Web Siteleri Responsive Mobil Site AMP   Süleyman Sönmez - Güneşin Tam İçinde screenshot-2-960x734 Websitenize AMP Nasıl Kurarsınız? AMP ile Siteler Cep Telefonu için Hızlı ve Kullanışlı Oluyor | Wordpress İçin AMP Pluginleri Bilgisayar ve Web  Wordpress İçin AMP Pluginleri Wordpress İçin AMP Eklentileri Web Siteleri Responsive Mobil Site AMP   Süleyman Sönmez - Güneşin Tam İçinde screenshot-www.google.com-2017-05-08-08-27-49-960x737 Websitenize AMP Nasıl Kurarsınız? AMP ile Siteler Cep Telefonu için Hızlı ve Kullanışlı Oluyor | Wordpress İçin AMP Pluginleri Bilgisayar ve Web  Wordpress İçin AMP Pluginleri Wordpress İçin AMP Eklentileri Web Siteleri Responsive Mobil Site AMP

 

 

Örnek olması için kendi sitemin daha düzeltim yapmadan ilk AMP Google web tools hata raporunu üstte veriyorum. Elbetteki hataları büyük oranda ayıkladım artık 🙂
Bu hatalar ayıklandıkça daha çok sayfanız Google içinde mobil cihazlarla erişilebilir olacak ve öne çıkacaktır.

Yukarıdaki raporda Javascript hatalarına bir denemem neden oldu. Facebook beğen tuşu ekledim. Javascript içerdiği için çok sayıda sayfamı dizinden çıkarmış oldum. Hemen kodu kaldırdım Googlebotu bekledim. (Yeniden değerlendirme de isteyebilirsiniz aceleniz varsa aşağıda anlattım.)

Google’dan Yeniden Değerlendirme Nasıl İstenir?

Google’dan URL’lerinizi yeniden taramasını isteme
Kısa bir süre önce sitenize bir sayfa eklediyseniz veya mevcut bir sayfada değişiklik yaptıysanız Google Gibi Getir aracını kullanarak Google’dan sayfayı (yeniden) dizine eklemesini isteyebilirsiniz.

Google Gibi Getir aracındaki “Dizine eklenmesini iste” özelliği, birkaç URL’nin dizine eklenmesini kolayca istemek için kullanışlı bir yöntemdir. Gönderilecek çok sayıda URL’niz varsa bunun yerine site haritası göndermek daha kolay olacaktır. Her iki yöntem de yanıt süreleri açısından yaklaşık olarak aynıdır.
Kaynak: Google Yardım

Aşağıdaki adresin sonundaki site adınızı kendi siteniz yaparak yeniden değerlendirme isteyebilirsiniz.

https://www.google.com/webmasters/tools/googlebot-fetch?hl=tr&siteUrl=https://www.gunesintamicinde.com/

CSS hataları içinse genelde şu uyarıyı alıyorum

“AMP dokümanlarında satır içi “style” özelliğine izin verilmez. Bunun yerine “style amp-custom” etiketini kullanın.”

Yani yazılarım içinde, kendim bazen yazı şık görünsün diye elle CSS düzenlemesi yapıyorum. Sadece WP editorle yetinmiyorum. Bunları sevmedi arkadaş!

 

Kullandığımız WP AMP eklentilerinin içeriği tarayarak içindeki style komutlarını kendisinin style amp-custom yapması gerekirdi. Ama yapmamış.
Bu da onların bir bugı / hatası … Üşenmedim ve raporladım eklentinin geliştiricilerine…

Bir diğer sorun da “Yasak veya geçersiz HTML Etiketi kullanımı “

“Buna ne sebep oluyor?” derseniz (belki de demiyorsunuzdur AMP ile kafanızı şişiriyorumdur 😀 ) SEO eklentiniz yazı özetinizi alıp META NAME CONTENT üretiyorsa ve kesme işaretleri yerine çeşitli ek işaretler koyuyorsa iş patlıyor.

 
Kısa çözümüm:
2. kurulan AMP eklentisi içindeki SEO ayarından AMP sayfasının Header kısmında Meta Description / Meta etiketleri istemiyorum seçtim. Zaten Google SEO ya artık faydası yok dedi.

HTML KODLAMA İŞLERİ NASIL DEĞİŞTİ PEKİ?

Bütün bunları neden ısrarla öne çıkarıyorum. Google son duyurularında arama sonuçlarında SEO olarak en önemli yenilik olarak AMP’yi sundu.

Nasıl https çok önemliyse, artık AMP de sitenizin öne çıkması için çok önemli. Ayrıca girdiğimiz sitelerin anında açılacak kadar hızlı olması, kotayı bitirmemesi güzel şeyler.

Arabirimin sadeliği, okur için her şeyin anlaşılır olması. Özellikle nefret ettiğimiz bir siteye cep telefonu ile girince tüm ekranı kaplayan reklam, üye ol kutuları falan olmuyor ki harika…

Kısacası sizlerle el birliği yapıp Türk sitelerinin de toparlanması yönünde bilgilendirme yapmak istedim. Bu tüm okurlarımın da deneyimlerini kolaylaştıracak.

TARTIŞMAYA AÇIK BÖLÜM Google AMP Cache:
Google AMP sayfalarının bir kopyasını kendisinde tutup sonucu oradan veriyor. En üste de sitenin orijinal sayfa adresini veriyor. Elbette bu bir yandan iyi bir yandan kötü. Birincisi sitenizin bir kopyası oluşuyor. Güvenlik açısından iyi. Analytics yine ziyaretçileri sayıyor reklamlar da görünüyor.
Kötü mü bilemiyorum düşünülecek kısım teknik olarak yakında tüm web siteleri AMP’ye geçince Google aramalarında bulduğumuz tüm adresler www.google.com ile başlayacak. Onun cache saklama ortamından verilecek sayfalar. Sayfada bir şey değiştirirsek yeniden bu alana son halinin gelmesi gerekecek. Bir yandan yazı okunma sayılarını tutan eklentiler eksik çalışacak. Yazılarınızın reel okunma değerleri belirsizleşecek.

Tartışalım…

 

EK BİLGİ:
Bana daha detaylı teknik bir anlatım lazım diyenler için Google I/O 2016 AMP

 

YAZMASI ARAŞTIRMASI OLDUKÇA ZAMAN ALAN BİR MAKALE OLDU PAYLAŞARAK DESTEK OLABİLİRSİNİZ….

KAYNAKÇA:

Konuya ilk dikkatimi çeken Sunipeyk sitesidir. Teşekkürlerimi bir borç bilirim.
Bu konuda yazdığı makaleler
http://www.sunipeyk.com/wordpress-postlariniz-icin-google-amp-sayfasi-ekleme/
http://www.sunipeyk.com/amp-sayfalariniza-menu-ekleme/

http://www.sunipeyk.com/amp-sayfalariniza-reklam-ekleme/

Eklentilerle ilgili sorularınızı lütfen foruma yönlendirin

https://wordpress.org/support/plugin/amp

AMP Proje FAQ

https://www.ampproject.org/support/faqs/overview

AMP Eleştirisi

https://80×24.net/post/the-problem-with-amp/



Sitede tanıtım yazısı yayınlatmak ister misiniz?
Lütfen tıklayın
www.gunesintamicinde.com/reklamlar/

2 YORUM VAR

Yorum Yazın