Google AMP Rehberi: Hatasız Bir Kurulum

scrop

Eski üye
Katılım
8 Nis 2022
Mesajlar
127
Tepki
4

Google AMP Rehberi: Hatasız Bir Kurulum​

Google AMP Rehberi


AMP, “Hızlandırılmış Mobil Sayfalar” anlamına gelir ve mobil kullanıcılara bir siteyi daha süratli hale getirmeyi amaçlar. AMP, siteyi ön belleğinde meblağ ve mobil cihazlardan siteye giren kullanıcılar erişim sağladığında erişimi daha süratli bir hale getirir. Kısacası AMP ile kullanıcılar mobil cihazlardan sitenizi daha süratli bir halde erişim sağlar. Bu sayede hem kullanıcı deneyimini hem de trafiği artırır.

AMP kurulumu, WordPress ve Joomla benzer biçimde hazır yazılımlarda eklentiler ile oldukca kolay bir halde yapılabilir. Eğer hazır yazılımlar yerine HTML tabanlı bir tasarıma sahipseniz değişik bir mobil tasarım sayfası oluşturmanız ve bu HTML sayfaları üstünde bir kaç ekleme yapmanız gerekir.

AMP Kurulumu Iyi mi Yapılır?

1- WordPress AMP Kurulumu Iyi mi Yapılır?


wordpress amp kurulumu


Yazılımınız WordPress yada Joomla benzer biçimde hazır yazılım değil de hususi bir yazılım ise AMP kurulumu zamanınızı alabilir. Fakat hazır bir yazılım kullanıyorsanız ve bu hazır yazılım WordPress ise iki tane eklenti yardımıyla AMP kurulumunu birkaç dakikada gerçekleştirebilirsiniz:

  • AMP for WordPress
  • Mobile Pages

Bu iki eklenti yardımıyla WordPress sitenizde oldukca kolay bir halde AMP kurulumunu gerçekleştirebilirsiniz. WordPress AMP kurulumu için sizlerle daha ilkin paylaştığımız WordPress AMP Nedir? Kurulumu Iyi mi Yapılır? içeriğimizi ziyaret edebilirsiniz.

2- HTML AMP Kurulumu Iyi mi Yapılır?


html amp kurulumu


1.Adım: AMP Sayfası Oluşturma


AMP sayfası oluşturmak için ilk adımda .html uzantılı bir dosya oluşturmanız gerekir. AMP sayfası oluştururken dikkat etmeniz ihtiyaç duyulan bazı kurallar vardır. Şu sebeple oluşturulan her sayfa AMP için uygun olmayabilir. Bu kurallar şu şekildedir:

  • HTML kodunun başına aşağıdaki kodu ilave edin.

<!doctype html>
  • Yeni ve sıfırdan bir dosya oluşturacaksanız <html> etiketini <html amp> olarak değiştirin. Fakat </html> etiketinde herhangi bir değişim yapmayın.
  • <head> ve <body> etiketlerini kesinlikle kullanın.
  • AMP olmayan sayfalarda <head> ve <body> etiketlerinin içinde aşağıdaki koda yer verin.

<bağlantı rel="canonical" href="http://siteadi.com/index.html" />
  • Yukarıda olduğu benzer biçimde <head></head> etiketlerinin arasına <meta charset=”utf-8″> kodunu eklemelisiniz. Kodda Türkçe siteleri baz aldığımız için karakter dili için utf-8 kullanıldı. Eğer değişik bir dilde siteye uygulayacaksanız buna dikkat edin.
  • Mobil uyumluluk için <meta name=”viewport” content=”width=device-width,minimum-scale=1″> kodunu <head></head> arasına eklemeniz gerekiyor.
  • Kodlar içinde </body> etiketinin en alt kısımlarda yer alanından ilkin script async src=”https://cdn.ampproject.org/v0.js“></script>kodunu ilave edin.
  • <head></head> etiketleri arasına dosyada son olarak

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 düzgüsel both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 düzgüsel both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 düzgüsel both;animation:-amp-start 8s steps(1,end) 0s 1 düzgüsel both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

2. Adım: AMP Sayfalara Fotoğraf Ekleme


Fotoğraf eklerken HTML sayfalarda <img src=”fotoğraf.png” alt=”fotoğraf” /> kullanılır. AMP sayfalarda ise bu algılanmaz. Bunun yerine <amp-img></amp-img> etiketini kullanın. Mesela;

<amp-img src=”xxx.jpg” alt=”xxx” height=”400″ width=”800″></amp-img> şeklinde kendi sitenize uyarlayabilirsiniz.

3. Adım: Yoldam Dosyası Ekleme


fotoğraf dosyalarında olduğu benzer biçimde yoldam dosyası eklerken de AMP için bazı düzenlemeler yapmalısınız. Normalde yoldam dosyası eklerken <style></style> kullanılır. Fakat AMP dosyalarda <style amp-custom></style> şeklinde ekleme yapılır.

4. Adım: AMP Sayfa Kontrolü


İlk üç adımda AMP sayfasını oluşturduk. Fakat hata yapmış olup yapmadığınızı hemen hemen bilmiyorsunuz. Bu adımda sayfayı oluştururken hata yapmış olup yapmadığınızı denetim edeceksiniz. Bunun için de sayfayı sitenize ya da localhost sunucusuna yükleyerek denemeniz gerekir.

  • Denetim için ilk olarak Chrome’u açın. Sitenin sonuna #development=1 eklemesi yapın. Arkasından Chrome Geliştirici Konsolu üstünden sayfayı denetim edebilirsiniz. Kırmızı olarak belirtilen kısımlar hata yaptığınız kısımlardır.

5. Adım: Bağlantı Ekleme


Oluşturduğunuz AMP sayfasının arama motorları tarafınca düzgüsel sayfa değil AMP sayfası bulunduğunu belirtmezseniz arama motorları sayfayı AMP olarak görmeyecektir. Bunun için de <head></head> etiketleri arasına aşağıdaki kodu ilave edin:

<bağlantı rel="amphtml" href="https://www.example.com/amp.html">



Bu beş adımı doğru bir halde uyguladıysanız oluşturduğunuz sayfada aşağıdaki benzer biçimde bir yapıya ulaşacaksınız.

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<bağlantı rel="canonical" href="http://siteadi.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 düzgüsel both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 düzgüsel both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 düzgüsel both;animation:-amp-start 8s steps(1,end) 0s 1 düzgüsel both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>

AMP tarafınca örnek gösterilen kodlar ile sizlere HTML siteler için AMP kurulumu iyi mi yapılır gösterdik. Artık bir AMP sayfanız var. Fakat hala kafanızda bazı sorular canlanıyor. Şimdi kafanızda canlanan bu sorulara cevap verelim.

AMP Kullanımının Dezavantajları Var Mıdır?


AMP sunucu yükünü azaltırken bunun yanı sıra site hızı, kullanıcı deneyimi benzer biçimde mevzularda avantaj sağlıyor. Sadece bazı durumlarda dezavantajları bulunduğunu da belirtmek isteriz. AMP dezavantajları:

  • E-Tecim siteleri için kullanım uygun değildir.
  • Hususi yazılım sitelerde vakit kaybı ve maliyet artışına yol açabilir. Ek olarak bazı sitelerde AdSense geliri üstünde negatif tesir yarattığı da oldukca yaygın olmasa da görülen bir durum.

AMP Sayfalarda Sitemap Oluşturulması Gerekir Mi?


AMP sayfalarda yeni bir sitemap oluşturulmasına gerek yok. AMP olmayan sürümler için ise URL kısmına AMPHTML etiketini ve AMP içeren URL şeklini yazmalısınız. Bu sayede AMP sayfalarınız Google tarafınca fark edilecek ve arama sonuçlarında buna bakılırsa sıralanacaktır. Ek olarak AMP’de sitemap oluşturma kısmı yoktur. Düzgüsel sitemap dosyası içinde aslına bakarsan URL’lerde AMPHTML etiketi olacağı için URL’ler tarandığında AMP versiyonları da Googlebot otomatikman görecektir. Bu sayfaların indekslenmesi de gene aynı şekilde Googlebot’un AMP sayfaları ne vakit göreceğine bağlıdır.
 
Üst Alt