Web Sitenize AMP Nasıl Uygulanır ve Süpersonik Yükleme Hızı Alınır

Sayfa Hızını artırmak için AMP uygulamak isteyebilirsiniz. İşte neden

Hızlı yüklenen bir web sitesi vazgeçilmezdir . İnsan dikkat süresi aşağı doğru bir sarmal içindedir - hiç kimse, özellikle de bir mobil cihazdaysa beklemek istemez.

Ne kadar hızlı olmamız gerekiyor? Google, iki saniyeden kısa bir sayfa yükleme süresi önerir.

SEO'nun sayfa içi ve teknik alanlarında, hedefe ulaşmanıza yardımcı olan birçok popüler önlem vardır.

Ancak, bu önlemlerden biri - Bir web sitesinin mobil versiyonu için Hızlandırılmış Mobil Sayfalar (AMP) kurmak - çok az kullanılır.

Neden? Niye? Özetle, AMP'ye geçiş, bir web sitesinin ne kadar büyük olduğuna bağlı olarak oldukça fazla zaman, çaba ve para gerektirir. Sonunda, buna değmeyebilir bile.

AMP'ye yatırım yapmaya değer mi? Cevabınız evet ise, bu gönderi, WordPress web siteniz için AMP'yi etkili bir şekilde kurmak için adım adım bir süreçte size yardımcı olacaktır.

AMP'yi uygulayın 1. Adım: Doğru eklentiyi seçin

Eklenti seçenekleri

WordPress, AMP için birçok eklenti sunar. Birkaçını farklı derecelerde başarı ile denedim. Bunlardan biri bir süredir Google Pagespeed Insights'ta harika sonuçlar verdi. Ama mobilde tüm AMP sayfalarımı kırdı!

Benim tavsiyem

AMP for WP – Accelerated Mobile Pages – WordPress eklentisini tavsiye ederim. Bu eklenti, mobil web sayfalarını özelleştirmek için birçok seçenek sunar. Yazının geri kalanı, bu eklentiyi kullanarak web siteniz için AMP kurmakla ilgili olacak.

Eklentiyi kurup etkinleştirdikten sonra, WordPress panosu web sitenizin AMP sürümünü açma seçeneğini gösterecektir. Aşağıdaki resimde vurgulandığı gibi yeni eklentiyi (AMP) de göreceksiniz.

Yukarıdaki resimde olduğu gibi, bir dizi seçenek göreceksiniz, her birini tek tek ele alacağız.

Ayarlara geçelim.

AMP 2. Adımı uygulayın: Eklentinin temel kurulumu

Web sitesi türü

İşletmenizi en iyi temsil eden seçeneği seçin. Başka hiçbir şey eşleşmiyorsa ' diğer'i seçin, bundan sonra web sitenizin türünü yazma seçeneği sunulur.

AMP'yi nerede uygulamanız gerekiyor?

AMP'yi uygulamak istediğiniz yeri seçin. AMP'ye gittiğinizde, mobil web sayfalarınızı neredeyse tamamen HTML olarak tutmaya karar veriyorsunuz. Yükleme hızını azaltan CSS/JS kodlarını bırakmanız gerekir.

Bunun dezavantajı, kullanıcı deneyiminin (UX) etkilenmesidir. Örneğin, artık bir ziyaretçinin dikkatini çekmek için dönen bir harekete geçirici mesaj (CTA) düğmesine sahip olamazsınız. AMP bu kodu keserek sayfa yükleme süresinden tasarruf sağlar. Bu, sonuçta daha düşük bir etkileşim oranına neden olabilir.

Yukarıdaki listede, sayfalarınızda, gönderilerinizde veya her ikisinde de AMP olmasını seçebilirsiniz.

Tasarım ve sunum

Burada Logonuzu Kurabilirsiniz , önerilen boyut 120 x 90 pikseldir. Sayfa yükleme süresini uzattığı için logoyu kullanmamanızı tavsiye ederim. Bu panelde hiçbir logo güncellenmezse, AMP sayfasında logo yerine yalnızca web sitesi adı bulunur.

Global Renk Düzeni seçeneği, sayfadaki CTA bağlantılarında ve altbilgi bağlantısında görünen AMP sayfalarınız için bir renk seçmenize yardımcı olur.

Örneğin, aşağıdaki resimde görüldüğü gibi Global Color olarak açık maviyi seçtim.

Analitik izleme

Bu seçenek panelinde, takip için kullandığınız araçları etkinleştirebilirsiniz. Örneğin, İzleme Kimliğini ekleyerek Google Analytics'i etkinleştirebilirsiniz. Bu şekilde AMP sayfalarından gelen veriler doğrudan Google Analytics hesabınızda güncellenecektir.

Benzer şekilde, yukarıdaki resimde listelendiği gibi birden çok başka izleme aracı ekleyebilirsiniz.

Gizlilik ayarları

Çerez Bildirim Çubuğu , web sitesinde kullandığınız çerezler için ziyaretçilerden izin almanızı sağlar. Aşağıdaki resimde, siyah renkli diyalog kutusu bir çerez bildirim çubuğudur.

Görüntü Kaynağı – Monster Insights

Siz veya hedef kitleniz bir GDPR ülkesinden iseniz, GDPR – Genel Veri Koruma Yönetmeliği ayarlarını açmanız gerekir.

Lütfen, seçim yapmanız gerekiyorsa, ikisini birden değil, iki seçenekten yalnızca birini seçebileceğinizi unutmayın.

Reklamcılık

Bu segmentte, Reklamlarınızı nereye konumlandırmak istediğinizi seçin. İhtiyaca göre özelleştirebilirsiniz - Reklamların site genelinde veya tek gönderilerde veya diğer seçeneklerin yanı sıra başlıklarda yayınlanmasını sağlayabilirsiniz.

Adsense Reklam Kodundan Reklam türünü, Reklam boyutunu ve Veri Reklam İstemcisi ve Veri Reklam Yuvasını seçebilirsiniz.

3. taraf uyumluluğu

Son varlık, AMP uyumluluğuna ihtiyaç duyduğunuz eklentilerin listesini yakalar.

AMP için Gravity Form ve Elementor, uzantılar için ödeme yapmanızı gerektirir. Yapılandırılmış Veriler, WP için Reklamlar ve WP için PWA ücretsiz eklentilerdir. Son üçü, yazının ilerleyen bölümlerinde biraz daha ayrıntılı olarak ele alınacaktır.

AMP'yi uygulayın 3. Adım: Daha fazla AMP ayarı

Genel Ayarlar

Genel sekmesi, temel kurulumda ele aldığımız seçenekleri kapsar. Ek olarak, arşivlerde, kategorilerde ve etiket sayfalarında AMP'nin olmasını isteyip istemediğinizi seçebilirsiniz.

Son seçeneğin etkinleştirilmesi – AMP Devralma (Beta) – masaüstü ve mobil sürümünüzün aynı olmasına neden olur. Bu, masaüstü sürümünüzün de AMP sayfalarına sahip olacağı anlamına gelir.

Bu seçeneği kapalı tutmanızı tavsiye ederim. Sayfa yüklemesi genellikle masaüstünde mobilden daha iyidir. AMP'nin masaüstünde olması, Sayfa hızında küçük bir artış için UX'den ödün vermek anlamına gelir. İyi bir pazarlık değil.

Reklamcılık

Bu bölüm, temel kurulumdaki Reklam bölümüyle aynı seçeneklere sahiptir.

SEO

Meta Açıklama'yı açmayı seçerseniz, Başlık Bölümüne doldurduğunuz metin Google tarafından alınır. Bu, masaüstü sürümü için doldurduğunuz metinden farklı olacaktır. Ayarı kapalı tutmanızı ve Meta Açıklamasını iki sürüm arasında tutarlı tutmanızı tavsiye ederim.

OpenGraph Meta Veri etiketleri, sosyal medyada paylaşıldığında URL'lerin nasıl görüntüleneceğini kontrol eden kod parçacıklarıdır. Bu bölüm, SEO eklentinizde Başlık ve Meta Verileri ayarlarken masaüstü sürümü için görünür. Aşağıda Yoast SEO eklentisine bir örnek verilmiştir.

Herhangi bir yazının veya sayfanın Editör bölümüne giderek en alta kaydırarak bulabilirsiniz. Yoast bölümünü gördüğünüzde, 'Sosyal' sekmesine tıklayın, ardından istediğiniz sosyal medya platformunu seçebilirsiniz.

AMP eklentisi, aynı seçenek panelinde tercih ettiğiniz SEO eklentisini seçmenize olanak tanır. Yukarıdaki örnekte, Yoast seçilen eklentidir. Masaüstü sürümü için Yoast'a girdiğiniz tüm veriler AMP sürümüne kopyalanır.

Sayfalara Ayrılmış Sayfaları Dizine Ekleme ve URL Denetleme Aracı Uyumluluğunu Kaldırma seçeneğini göreceksiniz.

Sayfalandırılmış sayfalar dizine eklenmelidir, ancak yalnızca kurallı olarak. Bu ayarı kapalı tutmanızı tavsiye ederim.

URL Denetleme Aracı Uyumluluğu, sizin için daha şeffaf bir arama yapılmasını sağlar. Google Arama Konsolu hesabınızdaki tarama, dizin oluşturma ve sunma bilgileri hakkında ayrıntılı raporlar sağlar. Açık tutmanı tavsiye ederim.

Elementor Desteği

AMPforWP PageBuilder seçeneği, masaüstü sürümünden farklı olarak AMP sürümü için ayrı sayfalar oluşturmanıza olanak tanır. AMP sayfaları için biraz farklı metin veya CTA'ya sahip olmak istediğinizde kullanışlıdır.

Örneğin, masaüstü için 'Bize Ulaşın' CTA'nız varsa ancak mobil ziyaretçilerin sizi aramasını tercih ediyorsanız, bu seçeneği etkinleştirebilir ve ayrı bir sayfa oluşturabilirsiniz.

PWA

AMP for WP Plugin'in açıklamasına göre – Aşamalı Web Uygulamaları (PWA), web sitenizi bir web uygulamasına dönüştürür ve ziyaretçilere yerel mobil uygulama benzeri bir deneyim sunar.

Bu bir tasarım geliştirmesidir. Modülü etkinleştirmek bir seçim meselesidir.

Verim

Performans paneli, sayfa hızı optimizasyonunu daha derinlemesine inceler.

UX veya işlevselliği etkilemeden bant genişliği kullanımını azaltmak için CSS/ JS'yi Küçültmenizi sağlar. Tarayıcı Önbelleğinden Yararlanma , geri gelen ziyaretçiler için yükleme süresini hızlandırmanıza olanak tanır. Her iki seçeneği de açık tutmanızı tavsiye ederim.

Optimize CSS'yi etkinleştirmek, CSS'yi optimize etmenin ağaç sallama özelliğini tetikleyecektir. Zaten bu işi yapan farklı bir eklentiniz yoksa, onu açık tutabilirsiniz.

Analitik, Yapılandırılmış Veri, Bildirim Çubuğu ve GDPR

Bu bölümler, temel kurulumda kapsanan seçeneklerle aynı seçeneklere sahiptir.

Push bildirimleri

Push bildirimlerini ayarlamak isterseniz OneSignal, iZooto ve Truepush arasından birini seçebilirsiniz.

Yukarıdaki örnekte OneSignal'ı seçtim. Ancak, herhangi bir seçim için, Sayfalar için anında iletme bildirimlerini etkinleştirme seçeneği olan APP Kimliğini girmek için bir bölüm göreceksiniz. Ek olarak, bildirimi nereye yerleştirmek istediğinizi (örneğin sayfanın alt kısmı) ve hangi metni görüntülemek istediğinizi seçmeniz gerekir.

İletişim Formları

Bu, AMP'yi optimize etmek için 3 eklentiden birini seçmenizi sağlar – Contact Form 7, Gravity Forms ve Ninja Forms.

Üçü de bir uzatma için ödeme yapmanızı gerektirir. CTA'nızın ağırlıklı olarak formlara odaklanması durumunda, uzantıya yatırım yapmak akıllıca olacaktır.

Yorumlar

Bu ekran, kullanıcı tarafından oluşturulan yorumların web sitenizde nerede gösterilmesini istediğinizi seçmenize olanak tanır. Ayrıca yorumların görüntüleneceği kaynakları da seçebilirsiniz.

Size en uygun ayarları seçin.

Anında Makaleler

Anında Makaleler, mobil kullanıcılar için Facebook Uygulamasında web sitenizdeki makaleleri barındırmanıza olanak tanıyan bir özelliktir.

Bu özelliği açmanın yararı, aynı makalenin web sitenizde bulunmasına kıyasla daha hızlı yükleme süresidir. Makale Uygulama içinde yüklendiğinden, 10 kata kadar daha hızlı yükleme hızı elde edersiniz.

Ancak içerik Facebook'ta kaldığından, bazı web sitesi trafiğini kaybedebilirsiniz. Sayfa hızı ve web sitesi trafiği arasında bir dengedir. kapalı tutmanı tavsiye ederim.

Açık tutmayı seçerseniz, aşağıdaki ayarları göreceksiniz.

Facebook Sayfa Kimliğinizi girdikten sonra makale ayarlarını özelleştirebilirsiniz. Daha fazla açıklama gerektiren bir ayar – Crawler Ingestion .

Web sitenizde barındırılan makalenizin bağlantısı Facebook'ta paylaşıldığında, Facebook tarayıcıları ia:markup_url etiketini arar. Varsa, Facebook makalenizi alır ve Facebook sayfanızda anında bir makale oluşturur.

Aletler

Bireysel AMP Sayfası seçeneği, AMP sayfalarını varsayılan olarak göstermek isteyip istemediğinizi seçmenize olanak tanır. Varsayılan Olarak Göster 'i seçtiğinizde, tüm sayfalarınız AMP sürümünü gösterir. Ancak, tek tek gönderiler veya sayfalar için AMP'yi gizlemeyi seçebilirsiniz.

Bunu yapmak için herhangi bir sayfaya gidin ve Sayfayı Düzenle 'ye tıklayın. Sağa doğru Ayarlar sekmesinde, kapatma seçeneğini bulabilirsiniz.

Benzer şekilde, seçili kategoriler ve gönderiler için AMP sürümlerini Gizlemeyi seçebilirsiniz.

Query Monitor , WordPress için geliştirici araçları panelidir. Sayfadaki sorguları görmesi gereken bir geliştiriciyseniz, ayarı açık tutmalısınız.

Geliştirilmiş ayarlar

Gelişmiş Ayarlar seçenek panelinde, çoğu kendi kendini açıklayan bir dizi ayar bulunur.

Bir WP geliştiricisi değilseniz veya web sitenizi tasarlaması için bir uzman tutmadıysanız, varsayılan ayarları açık tutmanızı tavsiye ederim.

e-ticaret

Bir çevrimiçi mağazanız varsa, AMP sürümünüzü WooCommerce için özelleştirebilirsiniz. Öncelikle dijital varlık satıyorsanız, Kolay Dijital İndirme Desteği seçeneğini açabilirsiniz. Her iki seçenek de ücretli bir uzantıyı etkinleştirmenizi gerektirir.

Çeviri Paneli

Bu panel, yaygın olarak kullanılan bir sözcük grubu için seçtiğiniz dile doğru çevirileri seçmenizi sağlar.

Örneğin, hedef kitlenize uygun AMP Olmayan Sürümü Görüntüle için çeviriyi yazmanız gerekir.

Çok dilli çeviriler için Çeviri'nin POT dosya yöntemini kullan seçeneğini açabilirsiniz. POT (Taşınabilir Nesne Şablonu) dosyası, PO dosyaları için bir şablondur. Çevirileri içeren düz metin dosyalarıdır. Her dilin kendi dosya uzantısı vardır. Örneğin Fransızcada po.fr vardır.

AMP Adım 4'ü uygulayın: Tasarım

Temalar

Tıpkı web sitenizin masaüstü sürümünde olduğu gibi, AMP sürümü için de bir tema seçebilirsiniz.

Aralarından seçim yapabileceğiniz dört ücretsiz seçenek vardır.

• Süratli
• Tasarım Bir
• Tasarım İki
• Ve, Tasarım Üç

Ayrıca her sayfa ve gönderide kendi tasarımınızı oluşturabileceğiniz bir bölüm bulunmaktadır.

İşte onu nasıl bulacağınız. Sayfaya veya gönderiye gidin ve üst araç çubuğundaki 'Sayfayı Düzenle'yi tıklayın. Aşağıdaki ekranı görmek için aşağı kaydırın.

Builder Kullan onay kutusunu işaretlerseniz oluşturduğunuz şablon gösterilir, aksi takdirde seçtiğiniz ücretsiz şablon gösterilir.

Kendi şablonunuzu oluşturuyorsanız, aralarından seçim yapabileceğiniz aşağıdaki modüllere sahipsiniz.

Unutmayın, AMP temelde bir HTML sayfasıdır. Çok fazla özelleştirme veya süslü düğmeler elde edemezsiniz.

Lütfen dikkat: Bir tema seçmelisiniz. Eklentinin, kendi tasarımınızı oluşturduğunuzda bile, simgeleri ve yapıyı seçmesi gerekir. AMP'yi uygularken bu adımda daha fazla ayrıntıya girebilirsiniz.

küresel

Bu seçenek paneli, AMP sürümünüzü özelleştirmenize olanak tanır.

İstediğiniz renkleri yukarıdaki gibi seçebilirsiniz. Ayrıca, Google Fonts'u da seçebilirsiniz. Ancak, Google Yazı Tipleri yükleme süresini artırarak AMP'nin amacını ortadan kaldırdığı için bunu kapalı tutmanızı tavsiye ederim.

Ayrıca, web sayfanızın böyle görünmesini istiyorsanız Kenar Çubuğu ve Sonsuz Kaydırma'yı açık tutmayı seçebilirsiniz. Ancak, sayfa hızı açısından bunu uzak tutmalısınız.

Yazı Tipi Simge Kitaplığı , Tasarım panelinin başında seçtiğiniz temayla aynı olacaktır.

başlık

Başlık seçenekleri paneli, başlığınızın düzenine ve gezinme menünüzün nasıl görünmesi gerektiğine karar vermenizi sağlar.

Ayrıca Şimdi Ara Düğmesi eklemenizi sağlar. Mobil kullanıcılar için kullanışlı bir düğmedir.

AMP olmayan bağlantınızı Başlıkta göstermeyi seçebilirsiniz. Ancak hedef kitleniz teknik olarak SEO odaklı değilse bağlantıya tıklamayabilir.

Arama çubuğunu da etkinleştirebilirsiniz. Bir blog web siteniz varsa faydalıdır.

Gelişmiş Başlık Seçeneği , başlık bölümü ayarlarınızla daha spesifik olmanızı sağlar. Bu bir seçim meselesi. Ancak sayfa yükleme hızını olumsuz etkileyeceğinden koda ekleme yapmayın.

Ana Sayfa, Tek, Altbilgi, Sayfa, Sosyal Paylaşım, Tarih ve Çeşitli

Bu seçenek panelleri, tıpkı başlık gibi, tamamen bir tasarım tercihi meselesidir. Size en uygun olan herhangi bir ayarı seçebilirsiniz.

Özetliyor

Yukarıdaki adımlar, AMP'yi web sitenizde etkili bir şekilde uygulamanıza yardımcı olacaktır. Değişiklikleri kaydettikten sonra, telefonunuzdaki AMP sürümünü kontrol edin veya URL'den sonra '/amp' ekleyerek.

Aşağıdaki resimler, AMP sayfanızın özelliklerini yakalar.

AMG SAYFA GÖRSEL

altbilgi

İşte aldın. AMP'yi uygulamak ve cep telefonu ziyaretçileri için 2 saniyeden daha kısa sürede yüklenen hatasız, süper hızlı sayfalara sahip olmak için bu adımları izleyin.