Google AMP Rehberi: Hatasız Bir Kurulum

Eklenme Tarihi: 12 Ekim 2018 11:37

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

AMP kurulumu, WordPress ve Joomla gibi hazır yazılımlarda eklentiler ile çok kolay bir şekilde yapılabilir. Eğer hazır yazılımlar yerine HTML tabanlı bir tasarıma sahipseniz farklı bir mobil tasarım sayfası oluşturmanız ve bu HTML sayfaları üzerinde bir kaç ekleme yapmanız gerekir.

AMP Kurulumu Nasıl Yapılır?

1- WordPress AMP Kurulumu Nasıl Yapılır?

Yazılımınız WordPress veya Joomla gibi hazır yazılım değil de özel 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 sayesinde AMP kurulumunu birkaç dakikada gerçekleştirebilirsiniz:

AMP for WordPress
Mobile Pages

Bu iki eklenti sayesinde WordPress sitenizde çok kolay bir şekilde AMP kurulumunu gerçekleştirebilirsiniz. WordPress AMP kurulumu için sizlerle daha önce paylaştığımız WordPress AMP Nedir? Kurulumu Nasıl Yapılır? içeriğimizi ziyaret edebilirsiniz.

2- HTML AMP Kurulumu Nasıl Yapılır?

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 gereken bazı kurallar vardır. Çünkü oluşturulan her sayfa AMP için uygun olmayabilir. Bu kurallar şu şekildedir:

HTML kodunun başına aşağıdaki kodu ekleyin.

       <!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şiklik yapmayın.
<head> ve <body> etiketlerini mutlaka kullanın.
AMP olmayan sayfalarda <head> ve <body> etiketlerinin arasında aşağıdaki koda yer verin.

       <link rel="canonical" href="http://siteadi.com/index.html" />

Yukarıda olduğu gibi <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 farklı 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çerisinde </body> etiketinin en alt kısımlarda yer alanından önce script async src=”https://cdn.ampproject.org/v0.js“></script> kodunu ekleyin.
<head></head> etiketleri arasına dosyada son olarak

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal 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 Resim Ekleme

Resim eklerken HTML sayfalarda <img src=”resim.png” alt=”resim” /> kullanılır. AMP sayfalarda ise bu algılanmaz. Bunun yerine <amp-img></amp-img> etiketini kullanın. Örneğin;

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

3. Adım: Stil Dosyası Ekleme

resim dosyalarında olduğu gibi stil dosyası eklerken de AMP için bazı düzenlemeler yapmalısınız. Normalde stil 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 yapıp yapmadığınızı henüz bilmiyorsunuz. Bu adımda sayfayı oluştururken hata yapıp yapmadığınızı kontrol edeceksiniz. Bunun için de sayfayı sitenize ya da localhost sunucusuna yükleyerek denemeniz gerekir.

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

5. Adım: Link Ekleme

Oluşturduğunuz AMP sayfasının arama motorları tarafından normal sayfa değil AMP sayfası olduğunu belirtmezseniz arama motorları sayfayı AMP olarak görmeyecektir. Bunun için de <head></head> etiketleri arasına aşağıdaki kodu ekleyin:

<link rel="amphtml" href="https://www.example.com/amp.html">

Bu beş adımı doğru bir şekilde uyguladıysanız oluşturduğunuz sayfada aşağıdaki gibi bir yapıya ulaşacaksınız.

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link 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 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal 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ından örnek gösterilen kodlar ile sizlere HTML siteler için AMP kurulumu nasıl 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 yanıt 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 gibi konularda avantaj sağlıyor. Ancak bazı durumlarda dezavantajları olduğunu da belirtmek isteriz. AMP dezavantajları:

E-Ticaret siteleri için kullanım uygun değildir.
Özel yazılım sitelerde zaman kaybı ve maliyet artışına yol açabilir. Ayrıca bazı sitelerde AdSense geliri üzerinde olumsuz etki yarattığı da çok 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ından fark edilecek ve arama sonuçlarında buna göre sıralanacaktır. Ayrıca AMP’de sitemap oluşturma bölümü yoktur. Normal sitemap dosyası içerisinde zaten URL’lerde AMPHTML etiketi olacağı için URL’ler tarandığında AMP versiyonları da Googlebot otomatik olarak görecektir. Bu sayfaların indekslenmesi de yine aynı şekilde Googlebot’un AMP sayfaları ne zaman göreceğine bağlıdır.