HomeBlogSEO EğitimiAMP Kurulum Rehberi

AMP Kurulum Rehberi

AMP Kurulum Rehberi

“AMP” kelimesinin açılımı “Accelerated Mobile Pages“dır ve “Hızlandırılmış Mobil Sayfalar” anlamına gelmektedir. amp kurulum sonrası sitelerin mobil kullanıcılar için çok hızlı bir şekilde açılmasını ve görüntülenmesini sağlamayı hedefler. Eğer WordPress, Joomla gibi hazır yazılımlar kullanıyorsanız yazılımsal bir düzenleme yapmadan hazır eklentiler ile AMP kurulumunu kolayca yapabilirsiniz fakat eğer HTML tabanlı bir tasarım kullanıyorsanız ayrı bir mobil tasarım sayfası oluşturmalı ve hali hazır bulunan html sayfalarınıza bazı eklemeler yapmanız gerekecek.

amp mobil amp mobil test

AMP Uyumluluk Kontrolü

Sitenizde AMP sisteminin kullanılıp kullanılmadığını öğrenmeniz için yapmanız gereken öncelikle web sitenizi Search Console’a  (Google Webmaster) eklemek olacaktır. Site adresinizi Search Console site ekleme kısmına yazdıktan sonra size verilen HTML dosyasını FTP ana dizinine atın ve onaylayın. Ayrıca size verilen meta tag kodunu sitenizin <head> tagının sonrasına ekleyerek de doğrulamayı tamamlayabilirsiniz.

Sitenizi Search Console’a tanımladıktan sonra sol menüde bulunan Arama Görünümü’ne sonrasında Hızlandırılmış Mobil Sayfalar kısmına giriş yapın. Eğer sitenizde AMP kullanımı tespit edilmedi gibi bir hata ile karşılaşırsanız yazımızdaki işlemleri uygulayarak sitenizi AMP sistemine entegre edebilirsiniz.

AMP kurulumunu iki ana parçaya bölüyoruz;

  1. HTML siteler için AMP kurulumu
  2. WordPress için AMP kurulumu

Kurulumu tamamladıktan sonra herşey tabi ki bitmiyor. Kontrol etmememiz gereken ve yapılandırmamız gereken bazı alanlar bulunacak.

ampgif

AMP Sayfamızı Oluşturalım

Bir AMP sayfası oluşturmak için öncelikle .html uzantılı bir dosya oluşturuyoruz. Fakat oluşturduğunuz her sayfa AMP için uygun olmayacaktır ve AMP sistemine uygun olması için gereken bazı kurallar mevcuttur. Bu kurallara aşağıdaki listeden göz atabilirsiniz. Unutmayın bu kurallardan bir tanesi bile eksik olursa AMP için uygun bir sayfa hazırlamamış olacaksınız. Bu kısımdaki bilgiler basit HTML siteler içindir ve kolaylıkla uygulayabilirsiniz.

AMP Kuralları:

  1. HTML kodunuzun başlangıcına 
    <!doctype html>

    kodunu ekleyin.

  2. <html> tagınızı <html amp> olarak düzenleyin yada sıfırdan oluşturuyorsanız bu şekilde kullanın. </html> etiketinde bir değişiklik yapmıyoruz.
  3. Sayfanızı hazırlarken mutlaka <head> ve <body> taglarını kullanın.
  4. AMP kullanılmayan orjinal sayfanızı <head></head> tagları arasında 
    <link rel="canonical" href="http://example.com/index.html" />

    kodunu ekleyin. URL kısmına kendi orjinal sayfanızı yazmayı unutmayın.

  5. Aynı şekilde <head></head> tagları arasına <meta charset=”utf-8″> kodunu ekleyin. Türkçe siteler için kullanılan karakter dili utf-8 olduğu için burada karakter dili olarak uft-8 olarak seçim yaptık, eğer başka bir dilde site hazırlamak istiyorsanız o dilin karakter ismine göre değişiklik yapabilirsiniz.
  6. Sayfamızda <head></head> kodları arasına <meta name=”viewport” content=”width=device-width,minimum-scale=1″> kodunu ekliyoruz. Bu kod sitemizin mobil uyumluluğu için gereklidir.
  7. Kodlarda daha çok alt kısma yakın olan </body> tagından önce <script async src=”https://cdn.ampproject.org/v0.js“></script> kodunu ekliyoruz. Eğer bu Javascript dosyasını kendi sunucunuzda barındırmak isterseniz v0.js dosyasını indirdikten sonra FTP üzerinden sitenize yükleyin ve URL kısmını yüklediğiniz dosyanın adresine göre düzenleyin.
  8. Son olarak <head></head> tagları arasına şu kodu ekliyoruz: 
    <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>

Sayfaya Resim Ekleme:

HTML sayfalara normal olarak resim eklerken <img src=”resim.png” alt=”resim” /> şeklinde bir yapı kullanırız fakat AMP bunu gereksiz resim fazlalığını önlemek için algılamaz. Bu yüzden AMP sayfamızda gözükmesini istediğimiz resmi <amp-img></amp-img> tagını kullanarak eklememiz gerekiyor. Örnek olarak aşağıdaki kodu inceleyebilir ve kendinize göre düzenleyebilirsiniz.

<amp-img src=”merhaba.jpg” alt=”merhaba” height=”400″ width=”800″></amp-img>

css

Stil Dosyası Ekleme:

Sayfamıza stil (css) kodları eklerken resim dosyalarını eklerken yaptığımız düzenleme gibi küçük bir düzenleme yapmamız gerekiyor. Normal stil dosyalarında <style></style> şeklinde ekleme yaparken AMP sayfalarında ise <style amp-custom></style> şeklinde stil eklemesi yapıyoruz. Örnek kodu inceleyebilirsiniz.

  • Normal Stil Ekleme:  
    <style> .test{ color: #eee; } </style>
  • AMP Stil Ekleme:  
    <style amp-custom> .test{ color: #eee; } </style>

amp-console

AMP Sayfa Kontrolü:

Bu kısma kadar basit bir AMP sayfası oluşturduk fakat nasıl göründüğünü ve bir hata yapıp yapmadığımızı bilmiyoruz. Şimdi ise sayfamızı kontrol edeceğiz bunun için dosyayı sitenize yükleyebilir yada localhost sunucunuz da deneyebilirsiniz. Eğer bir localhost kurmak istiyorsanız xammp programını kullanabilirsiniz.

  1. Google Chrome tarayıcısının güncel sürümünü çalıştırın.
  2.  Site adresinizin sonuna #development=1 ekleyin. (Örneğin localhost/amp.html yerine localhost/amp.html#development=1)
  3. Chrome Geliştirici Konsolu‘nu açın ve doğrulama hatalarını kontrol edin. (F12 tuşuna basın ve açılan kısımdan “Console” sekmesine geçiş yapın. Burada kırmızı olarak yapılan hatalar gösterilecektir.)

AMP Linklerini Ekleme (Yönlendirme)

linkler

Şuana kadar başarılı bir şekilde AMP sayfamızı oluşturduk fakat arama motorlarına sitemizdeki normal bir sayfanın AMP sürümü olduğunu belirtmemiz gerekiyor. Aksi taktirde Google AMP sayfamıza ulaşamayacaktır buda boşuna çalışma yapmak anlamına geliyor. Yani bu kısmı mutlaka hatasız bir şekilde tamamlamalıyız. Aşağıdaki kodları <head></head> tagları arasına eklemeniz gerekiyor ve kurallar kısmındaki dördüncü maddeyi uyguladıysanız aşağıdaki kodlardan sadece ilk kısmı yapmanız yeterli olacaktır.

Sayfanızın normal sürümüne AMP kullandığınızı belirtmek için aşağıdaki kodu ekleyin.

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

Sayfanızın AMP sürümüne normal sürümü belirtmek için aşağıdaki kodu ekleyin. (Kurallardaki 4. kısmı uyguladıysanız bu kodu eklemeyin.)

<link rel="canonical" href="https://www.example.com/normal.html">

Bütün işlemleri doğru bir şekilde uyguladıysak aşağıdaki gibi bir kod yapısı elde etmiş olmamız gerekiyor. Örnek sayfa kodlarına bakarak gerekli düzenlemeleri kendinizde yapabilirsiniz. Bu şablon AMP’nin kendisi tarafından örnek gösterilen kodlardır.

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.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>

Başardık!

Evet, yukarıdaki adımları eksiksiz bir şekilde tamamladıysanız artık basit bir AMP sayfasına sahipsiniz demektir. Eğer wordpress kullanan daha gelişmiş bir siteye sahipsiniz bir sonraki kısımda bunun için AMP uygulamasını kullanmayı öğreneceğiz. Merak etmeyin wordpress için kod bilgisine sahip olmanıza ve bu kadar uğraşa gerek kalmayacak.

wordpress-resim

WordPress AMP Kurulumu

Dünya genelinde web sitelerinin %90’lık bir kısmı açık kaynaklı bir ücretsiz yazılım olan WordPress’i kullanıyor ve açık kaynaklı olması nedeniyle her geçen gün geliştiriciler tarafından yeni eklentiler hazırlanıyor. AMP içinde bir eklenti mevcut ve bizi kod ile uğraşmaktan kurtarıyor. SEO Çalışması yapan wordpress kullanıcılar için AMP Kurulumu.

Eklentimizin adı basit bir şekilde “AMP” ve bu eklentiyi sitemize kurmak için iki yol mevcut. Kolayınıza gelen yolu tercih edebilirsiniz, herhangi bir fark yoktur.

wordpress

  1. Manuel Kurulum: Buraya tıklayarak AMP’nin WordPress eklentisinin bulunduğu kısma giriş yapın. Sayfanın sağında kalan x.x.x sürümünü indir butonuna tıklayın. Buradaki x.x.x olarak adlandırdığım kısım şuan için 0.3.3’dür ve güncelleneceği için x değişkeni olarak belirttim. Butona tıkladıktan sonra indirdiğiniz .zip uzantılı dosyayı çıkartın. Çıkartma işlemini yapmak için öncelikle .zip dosyasını açın ve herhangi bir klasöre yada masaüstüne sürükleyin. Sonrasında FTP’ye atacağınız dosya bu olacak. Sonrasında herhangi bir FTP programı (Filezilla veya Winscp tercih edebilirsiniz.) aracılığı ile /wp-content/plugins/ klasörü içine gönderin (sürükleyin). Sonrasında sitenizin sonuna /wp-admin ekleyerek yönetici hesabınıza giriş yapın ve eklentiler kısmından AMP eklentisini etkinleştirin.
  2. Otomatik Kurulum: Sitenizin yönetim paneline (/wp-admin) yönetici olarak giriş yapın. Sol menüde bulunan eklentiler kısmına tıklayın. Karşınıza sitenizde kurulu olan eklentiler çıkacaktır. Üst kısımdaki yeni ekle butonuna tıklayın ve sağ tarafta kalan arama çubuğuna AMP yazarak aratın. Karşınıza çıkan sonuçlardan ilk sıradakine yani adı sadece “AMP” olan eklentinin içindeki Kur düğmesine tıklayın ve ardından çıkan Etkinleştir düğmesine de tıklayın.

Eklenti kurulduğunda diğer eklentilerden farklı olarak yönetim paneline herhangi bir sayfa yada menü eklenmeyecek ve buda ayarlar kısmının olmadığını gösterir. Çünkü yapacağımız bir ayar veya değişiklik yoktur ev bu yüzden yönetim panelinde herhangi bir ek sayfa oluşturmasına gerek kalmayacaktır. AMP eklentisi sitemize Hızlandırılmış Mobil Sayfalar uygulamasını tamamen otomatik bir şekilde kuracak ve hazır hale getirecektir. Ama siz yinede çalışıp çalışmadığını kontrol etmek istiyorsanız herhangi bir içeriğin URL’sinin sonuna /amp ekleyerek AMP sayfasına göz atabilirsiniz. Örnek vermek gerekirse:

  • Normal İçerik: https://www.example.com/seo-amp-rehberi.html
  • AMP Uygulanan İçerik: https://www.example.com/seo-amp-rehberi.html/amp

amp-console2

İyileştirmeler:

Öncelikle AMP sayfamızda hata olup olmadığını anlamak için AMP Sayfamızı Oluşturalım kısmında bahsettiğimiz gibi Google Chrome tarayıcısını açıyoruz ve içeriğimizin AMP sürümüne giriyoruz ve sonuna #development=1 kalıbını ekliyoruz. (http://example.com/icerik.html/amp#development=1) Sonrasında CTRL + SHIFT + I veya F12 tuşuna basarak geliştirici konsolunu açıyoruz ve Console sekmesine geçiş yapıyoruz. Eğer sayfamızda hata mevcut ise burada bize gösterilecektir. Eğer yoksa hata olmadığını belirtecektir.

AMP eklentisinde bazı eksiklikler bulunduğunu söylemiştik. Bunlardan ilki logoyu ikincisi de resim objelerini tam olarak algılayamamasıdır. Bunların çözümünü basit bir şekilde anlatmaya çalışacağız. Ayrıca normal içerik sayfalarımızdan AMP sayfasına otomatik olarak link eklenmesi içinde bir ekleme yapmamız gerekiyor.

Logo sorunu için temanızın functions.php dosyasını açın ve en alta şu kodu ekleyin:

/* AMP logo */
add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );
function xyz_amp_additional_css_styles( $amp_template ) {
// only CSS here please...
?>
nav.amp-wp-title-bar {
padding: 12px 0;
background: #000;
}
nav.amp-wp-title-bar a {
background-image: url( 'http://www.siteniz.com/logo.png' );
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 28px;
width: 94px;
margin: 0 auto;
text-indent: -9999px;
}
<?php
}

Burada bulunan http://www.siteniz.com/logo.png URL adresini kendi logonuz gelecek şekilde düzenleyin.

googleamp

Resim Objeleri sorunu için temanızın functions.php dosyasını açın ve en alta şu kodu ekleyin:

/* AMP Structured Data:Image */
add_filter( 'amp_post_template_metadata', 'bbm_amp_modify_json_metadata', 10, 2 );
function bbm_amp_modify_json_metadata( $metadata, $post ) {
if (!array_key_exists('image', $metadata)) {
$metadata['image'] = array(
'@type' => 'ImageObject',
'url' => get_template_directory_uri() . '/images/amp.jpg',
'height' => 512,
'width' => 1024,
);
}
return $metadata;
}
/* AMP Structured Data:logo */
add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );
function xyz_amp_modify_json_metadata( $metadata, $post ) {
$metadata['@type'] = 'BlogPosting';
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => get_template_directory_uri() . '/images/amp-logo.png',
'height' => 60,
'width' => 600,
);
return $metadata;
}

Burada herhangi bir düzenleme yapmanız gerekmiyor, direk ekleyebilirsiniz.

AMP sayfamızı arama motorlarına belirtmek için temanızın header.php dosyasını açın ve </head> tagından önce şu kodu ekleyin:

<link rel='amphtml' href='<?php the_permalink(); ?>/amp' />

Bu kod üzerinde de bir değişiklik yapmayacağız fakat header.php içinde zaten <link rel=’amphtml’ ile başlayan bir kod bulunuyorsa eklemenize gerek kalmayacaktır.

analytics

Google Analytics Kodları Ekleme

Sitemiz için AMP sayfasını oluşturduk ve yayımladık. Fakat hepinizin aklında şu soruların olduğunu tahmin edebiliyorum: “AMP ile ne kadar hit çekeceğim?”, “AMP sayfalarının istatistiklerini nasıl görebilirim?”, “AMP sayfama Google Analytics kodu ekleyebilir miyim?”. Bunları tabi ki yapabilirsiniz ve bu kısımda AMP sayfamıza Google Analytics kodlarımızı eklemeyi öğreneceğiz. Bu durumda AMP eklentisinin şablonlarında bazı değişiklikler yapmalıyız. Eğer bu değişikleri yaparken kaza ile sayfalara zarar verirseniz eklentiyi silip tekrar kurarak eski haline getirebilirsiniz. Ama silip tekrar kurduğunuzda üst kısımda yaptığımız adımları tekrar uygulamanız gerektiğini unutmayın.

Öncelikle bir FTP programı aracılığı ile sitemizin ana dizinine bağlanıyoruz ve “/wp-content/plugins/amp/templates/” klasörüne giriş yapıyoruz. Bu klasörün içindeki single.php dosyasını bilgisayarınıza indirin ve düzenlemek için bir metin editörü yardımıyla açın.

Düzenlemek için açtığınız dosyada bulunan </body> etiketinin önüne gelecek şekilde aşağıdaki kodları ekleyin. (Örn: ekleyeceğiniz kodlar </body>)

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
<?php
echo json_encode( array(
'vars' => array(
'account' => 'UA-XXXXXXX-XX',
),
'triggers' => array(
'trackPageview' => array(
'on' => 'visible',
'request' => 'pageview',
)
),
) );
?>
</script>
</amp-analytics>

Yukarıdaki kodu ekledikten sonra yada eklemeden önce “UA-XXXXXXX-XX” yazan kısma kendi Google Analytics kimliğinizi ekleyin ve kaydederek tekrar FTP aracılığı ile sitenize yükleyin.

Sonrasında yapmamız gereken ise “/wp-c0ntent/themes/temanizin-adi/” klasöründe bulunan functions.php dosyasının sonuna şu kodu ekleyin: (?> tagından önce olacak şekilde ekleyin.)

/**
* Add the AMP analytics script to head of AMP pages
*/
function isa_amp_scripts( $data ) {
$data['amp_component_scripts']['amp-analytics'] = 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js';
return $data;
}
add_filter( 'amp_post_template_data', 'isa_amp_scripts' );

adsene-amp

Google Adsense Kodları Ekleme (Reklam)

AMP sayfanıza sadece Adsense değil başka reklam firmalarının reklamlarını da ekleyebilirsiniz fakat eğer Adsense hesabınız varsa Adsense Google’ın bir hizmeti olduğundan Adsense kullanmanızı tavsiye ederiz.

Analytics kodlarında yaptığımız düzenlemeye benzer olarak yine “/wp-content/plugins/amp/templates/” giriş yapıyoruz ve single.php dosyasını açıyoruz.

Reklamları yazı başında veya yazı sonunda ekleyebilirsiniz, bu sizin tercihiniz. Bu yüzden iki alana da eklemek için bilgi veriyoruz.

  • Yazı başlangıcına eklemek için: <div class=”amp-wp-content”> kodundan sonra aşağıdaki kodları ekleyin ve düzenleme yapın.
  • Yazı sonuna eklemek için: amphtml content; no kses ?> kodundan sonra aşağıdaki kodları ekleyin ve düzenleme yapın.
<style>
.articlead { width: 300px; height: 250px; }
@media(min-width: 336px) { .articlead { width: 336px; height: 280px; } }
</style>
<amp-ad class="articlead"
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX">
</amp-ad>

Yukarıdaki kod için yapmanız gereken düzenlemeler:

  1. width: 300px olan kısımda 300 yerine reklam genişliğini yazın.
  2. height: 250px olan kısımda 250 yerine reklam yüksekliğini yazın.
  3. data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX” yazan kısma ca-pub-xx yerine yayıncı kimliğinizi yazın.
  4. data-ad-slot=”XXXXXXXXXX” yazan kısma xx yerine reklam isminizi yazın.

Ek olarak reklam eklerken boyutu büyük olan reklam türlerini eklemekten kaçının. AMP sayfanızı ziyaret eden tüm ziyaretçiler mobil cihazlar kullanacağından ekran boyutu küçük olacaktır ve büyük reklamlar görüntü bozukluklarına ve taşmalara sebep olacaktır.

NOT: Google Adsense ve Google Analytics için AMP eklentisinde yaptığımız değişiklikler eğer eklenti güncellenir ise silinebilmektedir. Bundan dolayı bu işlemleri eklentinizi güncellerseniz tekrar yapmanız gerekecektir. Hazırladığınız kodları bir dosya içine kaydederek eklentinizi güncellediğinizde hızlı bir şekilde eski haline getirebilirsiniz.

Google Search Console (Dizin Kontrolü)

Sitemizi tamamen AMP için uygun hale getirdik. Fakat kontrol etmemiz gereken Google’ın AMP sürümünü dizine ekleyip eklemediği olmalıdır. Eğer sayfalarımız dizine eklenirken bir hata ile karşılaşırsa bunları bize bildirecek ve çözüm için yönergeler sunacaktır. Öncelikle Google Search Console’a giriş yapıyoruz.

Türkçe konsola ulaşmak için: https://www.google.com/webmasters/tools/home?hl=tr

Eğer sitenizi daha önceden eklediyseniz devam edebilirsiniz fakat eklemediyseniz sitenizi Search Console’a ekleyin ve doğrulayın.

Search Console’a sitenizi nasıl ekleyeceğiniz bilmiyorsanız şurada anlatıyoruz: https://upgo.com.tr/search-console-kullanim/

consol1

Sol kısımda bulunan Arama Görünümü > Hızlandırılmış Mobil Sayfalar kısmına giriş yapıyoruz. Bu sayfada Google’ın sitemizde AMP ile ilgili karşılaştığı problemleri görebiliriz.

Sitemizin hangi AMP sayfalarının Google Dizinine eklendiğini görmek için ise yine menüden Arama Görünümü > Arama görünümünü filtrele > AMP alanına ulaşıyoruz. Buradan hangi sayfaların dizine eklendiğini analiz edebilirsiniz.

#AMPlify Topluluğu

AMP ile ilgili sosyal paylaşım platformları üzerinden yapılan duyuru ve paylaşımları #AMPlify etiketini kullanarak inceleyebilirsiniz. Google Plus ve Twitter üzerinden #AMPlify topluluğuna katılabilirsiniz.

AMP ile İlgili 6 İpucu

  1. Kolay Kurulum: WordPress tarzı hazır bir yazılım kullanıyorsanız eklentiler sayesinde kod bilgisi gerektirmeden kolay bir şekilde AMP uyumluluğu sağlayabilirsiniz.
  2. Her site için uygun değildir: AMP dinamik siteler için daha gerekli bir uygulamadır. Örnek vermek gerekirse bir haber veya yemek sitesinin birçok içeriği mevcuttur ve sürekli güncellenmektedir. Bu yüzden kullanıcılar için kolay kullanım önemlidir. Fakat AMP’yi bir oyun sitesinde kullanmak gereksiz olacaktır.
  3. Her sayfa için AMP kullanmanız gerekmiyor: AMP kullanıcı deneyimini ve hızı ön plana çıkaran bir uygulama olduğundan dolayı daha çok ziyaretçilerin bulunduğu sayfalara AMP kurmanız gereklidir. Örneğin bir haber sitesinin paylaştığı haber sayfaları AMP uyumlu olması gerekirken aynı sitenin üyelik panelinde AMP kullanmamak göze batmayacaktır. Eğer tabiki yeni bir site oluşturacaksanız her sayfada AMP kullanmaya özen gösterin.
  4. Ek Düzenlemeler: Sitenizin normal sayfalarından AMP sayfanıza yönlendirme yapmak için basit bir HTML kodu yeterli olacaktır. Arama motorları bu HTML kodu sayesinde AMP sayfanızı algılayacak ve mobil arama sonuçlarında direkt olarak AMP sayfanızı listeleyecektir.
  5. Sürekli Büyüyor: AMP kullanımı gün geçtikçe dünya genelinde sürekli artıyor ve mobil aramalar için AMP kullanan siteler ön plana çıkarılıyor.
  6. Sınırsız Kaynak: Hem Google hemde diğer birçok büyük firma sürekli olarak AMP ile ilgili yeni kaynaklar oluşturuyor ve size yön gösteriyor. (Bizde bunlardan biriyiz) Ayrıca sorularınızı sormanız ve yardım almanız için Web Yöneticileri Yardım Formu, GitHub ve Stack Overflow gibi siteleri kullanabilirsiniz.

amp-kaynak

AMP Kaynakları

Daha önce bahsettiğimiz gibi birçok AMP kaynağı bulunuyor ve eksik kaldığınız yerlerde bu kaynaklardan yardım alabilirsiniz. Google bizler için sadece İngilizce değil Türkçe yazılı ve videolu kaynaklar paylaşıyor. Buda Google’ın AMP sistemine verdiği önemi açıkça gösteriyor.

Google AMP Canlı Yayın Videoları:

Türkçe: https://www.youtube.com/watch?v=snBWaZ-Z_VQ
İngilizce: https://www.youtube.com/watch?v=LlJKNSM_W0U
Almanca: https://www.youtube.com/watch?v=LvzylfbUi7Q
İtalyanca: https://www.youtube.com/watch?v=T0IHDmRQPhc

Author:
SEO ve Dijital Pazarlama Ajansı
Comments

  • Aman yarabbi bu ne güzel ne açıklayıcı bir yazı teşekkürler yorumsuz kalması üzücü …

    Cevapla

  • Hocam çok teşekkürler. Ben WordPress siteme eklentiyi kurdum ve header şablonuna kodu ekledim. Ama google webmaster da amp bulunmadı yazıyor. Acaba index mi alması gerekiyor. Sitemi dün sıfırladım. En baştan kurdum. Ondan dolayı olabilir mi

    Cevapla

  • Hocam yardımcı olur musunuz. Ben wordpress için hemen hemen tüm ampleri kurdum. çoğundan memnun kalmadım en son en çok kullanılan (AMP for WP – Accelerated Mobile Pages for WordPress) eklentisini kurdum fakat anasayfada resimler olmasına rağmen, içeriklerde ne resim ne de öneçıkarılmış içerik görünmüyor. Ayarlarda açık halde ama içerikte resim yok. sadece bir eklentide görünüyordu resimler bunda ve diğerlerinde yok. aradım bişey bulamadım

    Cevapla

  • Bu bilgilerin hepsine ihtiyacim vardi degerli vaktini ayirip bu makaleyi yayinladiginiz icin tesekkur ederim.

    Cevapla

  • AMP ile ilgili gördüğüm en güzel yazı. Teşekkürler ancak ben aradığımı bulamadım maalesef . Üye girişi eklemek istiyorum AMP ye

    Cevapla

  • Merhaba html amp kurdum eksiksiz şimdi ögrenmek istedigim subdomainds çalıştırmak dosyaları subdomaine atarak veya atmayarak nasıl yaparım detaylı şekilde yazabilirmsiniz amp subdomain olayını yazabilirmisiz

    Cevapla

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Teklif Al

Bize projenizi anlatın. En kısa süre içerisinde tarafınıza dönüş yapacağız.
05435675850