Bir AMP sayfası 2 farklı şekilde oluşturulabilir: birincisi masaüstü ve mobil cihazlarda görüntülenen bir AMP sürümü oluşturmak, ikincisi ise standart sayfadan ayrı bir AMP sayfası oluşturmaktır.
Bir örnek verecek olursak, sadece bir AMP sürümü ile oluşturulan Blogger AMP temaları olarak kullanılan yani tüm cihazlarda görüntülenmesi sağlanan sürümüdür. Fakat, m=1 Blogger URL'sindeki mobil URL'yi kullanarak standart sayfadan ayrı bir AMP sayfası da oluşturabilirsiniz. Bu şekilde düzenlenen sayfa, sadece mobil cihazlarda AMP sürümü ile görüntülenecektir.
Sadece m=1 mobil URL'de AMP sayfalarını görüntüleyerek, Blogger masaüstü ve tabletteki tarayıcı uzantısındaki AMP doğrulayıcı simgesi, AMP eklentisini kullanan WordPress bloglarında olduğu gibi bağlantı simgesiyle aynı renk yani mavi renkte olacaktır.
Masaüstü ve tablet ekranındaki tarayıcı uzantısında bulunan mavi AMP onaylayıcı simgesi, AMP sayfası olarak görüntülenen standart sayfanın görüntülendiğini belirtir.
Blogger'da sadece m=1 mobil URL'de bir AMP sayfası oluşturmak için geçerli bir AMP olması gereken bloga yani AMP şablona sahip olmak gerekir. Sonra, AMP'yi yalnızca m=1 mobil URL'de görüntülenecek şekilde düzenlemek için bazı küçük değişikliklerin yapılması gerekir.
Blogger Mobil URL'ler AMP Uyumlu Hale Nasıl Getirilir?
Sayfalarınızın mobil URL'lerini AMP uyumlu hale getirmek için aşağıdaki adımları takip edin.
Birinci adım: AMP temanızda bulunan aşağıdaki benzer kodu bulun.
HTML
<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='tr'>Bulmuş olduğunuz yukarıdaki benzer kodu aşağıdaki kodla değiştirin.
HTML ve AMP Referans Kodu
<HTML expr:dir='data:blog.languageDirection' lang='tr'>
<b:attr cond='data:blog.isMobile' name='amp' value='amp'/>İkinci adım: Aşağıdaki kodu veya benzer kodları bulun.
Canonical
<link expr:href='data:blog.url' rel='canonical'/>Bulduğunuz kodun hemen altına aşağıdaki kodu ekleyin.
AMP HTML
<b:if cond='data:blog.isMobileRequest == "false"'>
<link expr:href='data:blog.url + "?m=1"' rel='amphtml'/>
</b:if>Yukarıdaki adımları tamamladıktan sonra şablonu kaydedin. Bu iki adımı tamamladıktan sonra AMP sayfası sadece m=1 mobil URL'de görüntülenecektir.
Burada, AMP öğeleri artık bir AMP sayfası olmasa bile masaüstü ekranlarda çalışmaya devam edecek. Bu nedenle, AMP blog şablonunun önceki düzeninde değişiklikler yapılması gerekir.
Blog içerik sorunları için değişiklikler yapılmış oldu. Ancak, yine de AMP formatında daha önce olduğu gibi yayınlar oluşturulacaktır.
Buraya kadar yapılanlar blog ile ilgili olan kısımdı. Şimdi bir de yapılması gereken bir şey daha var, Adsense reklamlarını optimize etmek. Masaüstü görüntülü reklamlarda ve AMP/mobil görüntülü reklamlara ayrı Adsense reklamlarının oluşturulması gerekiyor.
Yapılacak ilk şey Adsense reklam js kodlarını ayırmaktır. Şimdi şablon kodlarınız arasında aşağıdaki kodu bulun.
Amp-ad
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>Yukarıdaki kodu kaldırın ve aşağıdaki kodu </head> veya </head><!--<head/>--> kodunun bir satır üzeri ekleyin. Kod içerisinde belirtilen yeri kendi Adsense hesabınıza göre düzenleyin.
Adsense Javascript ve Amp-ad
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery'>
<b:if cond='data:blog.isMobile'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<b:else/>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
//<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3028123528390000",
enable_page_level_ads: true
});
//]]>
</script>
</b:if>
</b:if>Yukarıdaki adımı da tamamladıktan sonra, blogunuzda bulunan tüm reklam kodlarını aşağıdaki kod ile değiştirin.
Adsense Reklam Kodları
<b:if cond='not data:blog.searchQuery'>
<b:if cond='data:blog.isMobile'>
<amp-ad data-ad-client='ca-pub-3028123528390000' data-ad-slot='7264560000' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
<b:else/>
<ins class='adsbygoogle' data-ad-client='ca-pub-3028123528390000' data-ad-format='rectangle' data-ad-slot='7264560000' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
</b:if>Burada dikkat etmeniz gereken bir durum daha var, robots.txt dosyasının Blogunuzun m=1 URL'lerini engellemediğinden emin olun.
Bknz: Blogger Mobil Sayfalar İçin Sticky Reklam Eklentisi
Blogger AMP şablonlarında bu değişikliklerin yapılmasının nedeni, AMP teması kullanan kullanıcıların Adsense gelirlerinde ve Google sıralamasında yaşanan düşüşlere neden olan sorunları gidermek için yapılmaktadır. Bu yazımız hakkında görüş ve sorularınızı yorum formunu kullanarak bize iletebilirsiniz.
0 komentar: