Accelerated Mobile Pages Temelleri

1. Genel Bakış

Bu codelab'de, Accelerated Mobile Pages (kısaca AMP) oluşturmayı öğreneceksiniz. Bunu yapmak için, mobil haber sitelerinde en çok tercih edilen çeşitli tipik web özelliklerini dahil ederken AMP spesifikasyonlarına uygun basit bir haber makalesi web sayfası uygulayacaksınız.

Neler öğreneceksiniz?

• AMP, mobil web'de kullanıcı deneyimini nasıl iyileştirir?
• AMP sitesinin temelleri.
• AMP'nin sınırlamaları
• AMP'nin web bileşenleri, haber sitelerinde sık karşılaşılan sorunları nasıl çözer?
• AMP'nizi doğrulama
• Google Arama için AMP'nizi hazırlama

İhtiyacınız olanlar

• Örnek kod
• Python (tercihen 2.7) veya Chrome 200 OK Web Server uzantısı
• Chrome (veya JavaScript konsolunu inceleyebilen eşdeğer bir tarayıcı)
• Kod düzenleyici (ör. Atom, Sublime, Notepad++)

2. Örnek kodu alın

Tüm örnek kodu bilgisayarınıza indirebilirsiniz:

Zip dosyasını indir

...veya GitHub deposunu komut satırından kopyalayın:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

Çeşitli örnek kaynak dosyaları ve başlangıç article.html sayfasını içeren bir ZIP dosyası indirirsiniz.

Klasörün sıkıştırmasını açın ve bilgisayarınızdaki komut satırını kullanarak dizine gidin.

3. Örnek sayfayı çalıştırma

Örnek sayfamızı test etmek için dosyaları bir web sunucusundan erişmemiz gerekir. Test amacıyla geçici bir yerel web sunucusu oluşturmanın çeşitli yolları vardır. Bu kod laboratuvarında, kullanabileceğiniz 3 seçenekle ilgili talimatlar sunulacaktır:

• "Web Server for Chrome" adlı Google Chrome uygulaması: En basit ve platformlar arası en uygun çözüm olduğu için bu yaklaşım önerilir. Not: Bu yaklaşım için Google Chrome'un yüklü olması gerekir.
• Firebase Hosting: Yeni statik öğe barındırma platformumuz "Firebase Hosting"i keşfetmek istiyorsanız alternatif bir seçenektir. Varsayılan olarak SSL etkindir.
• Yerel HTTP Python sunucusu: Komut satırına erişim gerektirir.

Not: Üretim ortamlarında HTTPS kullanılması önemle tavsiye edilir. HTTPS, SEO dahil olmak üzere güvenlik dışında çeşitli avantajlar sunar. Bu konu hakkında daha fazla bilgiyi burada bulabilirsiniz.

1. seçenek: Web Server for Chrome

"Web Server for Chrome" uygulamasını Chrome Web Mağazası'nda bu bağlantıdan bulabilirsiniz.

Chrome uygulamasını yükledikten sonra "Klasör Seç" düğmesini kullanarak uygulamayı belirli bir klasöre yönlendirmeniz gerekir. Bu kod laboratuvarı için, kod laboratuvarı örnek dosyalarını çıkardığınız klasörü seçmeniz gerekir.

Ayrıca, "index.html dosyasını otomatik olarak göster" seçeneğini işaretlemeniz ve bağlantı noktasını "8000" olarak ayarlamanız gerekir. Bu değişikliklerin geçerli olması için web sunucusunu yeniden başlatmanız gerekir.

Bu URL'ye şu yollarla erişebilirsiniz:

http://localhost:8000/article.html

Yukarıdaki URL başarıyla yüklenirse bir sonraki adıma geçebilirsiniz.

2. seçenek: Firebase Hosting

Yeni Firebase statik web barındırma hizmetimizi keşfetmek istiyorsanız AMP sitenizi Firebase barındırma URL'sine dağıtmak için buradaki talimatları uygulayabilirsiniz.

Firebase Hosting, statik web sitelerini ve öğelerini (HTML, CSS ve JavaScript dosyaları dahil) hızlı bir şekilde dağıtıp barındırmak için kullanabileceğiniz bir statik barındırma sağlayıcısıdır. Statik içerik, dünyanın dört bir yanında varlık noktaları (PoP'ler) bulunan bir içerik yayınlama ağında (CDN) önbelleğe alındığı için kullanıcılar daha az gecikmeden yararlanır.

Son olarak, Firebase Hosting her zaman SSL üzerinden sunulduğu için AMP ve genel olarak web için mükemmeldir. Yalnızca AMP'ye odaklanmak istiyorsanız bu seçeneği yok sayabilirsiniz.

3. seçenek: HTTP Python sunucusu

Chrome kullanmıyorsanız veya Chrome uzantısını yüklemekte zorlanıyorsanız yerel bir web sunucusu başlatmak için komut satırından Python'u da kullanabilirsiniz.

Python'ın yerleşik HTTP sunucusunu komut satırından çalıştırmak için aşağıdaki komutu yürütün:

python -m SimpleHTTPServer

Ayrıca bu URL'ye erişin:

http://localhost:8000/article.html

4. Normal bir HTML sayfası oluşturma

İndirilen ZIP dosyasında article.html adlı bir dosya bulunur. Bu, AMP eşdeğeri sayfasını oluşturduğumuz makaledir.

article.html örneğindeki kodu kopyalayıp yeni bir dosyaya yapıştırın. Bu dosyayı article.amp.html. olarak kaydedin.

Not: AMP dosyalarınızı .amp.html olarak adlandırmanız gerekmez. Hatta AMP dosyaları istediğiniz uzantıya sahip olabilir. Yayıncıların, URL'de parametreler kullanarak AMP sayfalarını standart sürümlerinden ayırdığı görülür. Örnek: http://publisher.com/article.html?amp

article.amp.html dosyanız artık aşağıdaki gibi görünmelidir:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

Bu, CSS, JavaScript ve resim etiketi gibi yaygın statik haber makalesi öğelerini içeren, kasıtlı olarak basit tutulmuş bir sayfadır.

Makalenin AMP sürümü şu anda yalnızca orijinal makalenin bir kopyasıdır. AMP'ye dönüştürelim. Başlamak için AMP JavaScript kitaplığı dosyasını ekleyip AMP doğrulayıcı etkinleştirildiğinde hangi hataların göründüğünü inceleyeceğiz.

AMP kitaplığını eklemek için bu satırı <head> etiketinin en altına ekleyin:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Şimdi aşağıdaki bağlantı üzerinden tarayıcımızda yeni article.amp.html sayfasını yükleyelim ve Menu > More Tools > Developer Tools ile Chrome'da Geliştirici Konsolu'nu açalım:

Şimdi geliştirici konsolunda JavaScript çıkışını inceleyin. Konsol sekmesinin seçili olduğundan emin olun:

Aşağıdaki günlüğün göründüğünü görmelisiniz:

Powered by AMP ⚡ HTML

Şimdi AMP doğrulayıcısını etkinleştirmek için URL'nize şu parça tanımlayıcıyı ekleyin:

#development=1

Örneğin:

http://localhost:8000/article.amp.html#development=1

Tarayıcınızda sayfayı manuel olarak yenilemeniz gerekebilir. Tarayıcınızda bir sayfayı manuel olarak yenilemek için bu düğmeye basın:

Birkaç doğrulama hatası almanız gerekir:

AMP, Accelerated Mobile Pages'in kısaltması olsa da tüm ekran boyutlarında iyi oluşturulan duyarlı sayfalar oluşturmak için kullanılabilir. Daha fazla bilgi için Google Developers web sitesinin Duyarlı Web Tasarımı bölümüne bakın.

Chrome Geliştirici Araçları'nda mobil cihaz deneyimini simüle etmek için. Burada cep telefonu cihaz simgesini tıklayın:

Şimdi bu menüden bir mobil cihaz seçin (örneğin, "Pixel 2"):

Tarayıcınızda aşağıdakine benzer bir mobil simüle edilmiş çözünürlük görmeniz gerekir:

Artık işe koyulmaya hazırız. Doğrulama hatalarını tek tek inceleyelim ve AMP ile ilişkilerini ele alalım.

5. Doğrulama hatalarını düzeltme

Karakter kümesi gerekli

Aşağıdaki hatayı düzelterek başlayacağız:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

Metnin doğru şekilde gösterilmesi için AMP, sayfanın karakter kümesinin ayarlanmasını gerektirir. Ayrıca, head etiketinin ilk alt öğesi olmalıdır. Bunun nedeni, meta charset etiketinden önce eklenen içeriğin yeniden yorumlanmasını önlemektir.

Aşağıdaki kodu başlık etiketinin ilk satırı olarak ekleyin:

<meta charset="utf-8" />  

Dosyayı kaydedin, sayfayı yeniden yükleyin ve bu hatanın artık gösterilmediğini kontrol edin.

AMP dosyalarında <link rel=canonical> etiketi bulunmalıdır.​​​

Her AMP dokümanında standart sayfayı referans alan bir bağlantı bulunması gerekir. Bu nedenle, orijinal makalemizin bağlantısını ekleyelim.

Aşağıdaki kodu <meta charset="utf-8" /> etiketinin altına ekleyin:

<link rel="canonical" href="/article.html">

Önemli: Standart sayfası olmayan bağımsız bir AMP sayfası oluşturabilirsiniz. Bu senaryoda, standart bağlantı yine gereklidir ancak AMP makalesinin kendisine yönlendirmelidir:

<link rel="canonical" href="/article.amp.html">

Gerekirse web sunucunuzu yeniden başlatın ve sayfayı yeniden yükleyin. Düzeltilmesi gereken çok sayıda hata olmasına rağmen "AMP dosyalarında <link rel=canonical> etiketi bulunmalıdır" hatası artık yok.

AMP özelliği gerekli

AMP, bir sayfayı AMP dokümanı olarak bildirmek için sayfanın kök HTML öğesinde bir özellik gerektirir:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

Bu sorun, ⚡ özelliğini <html> etiketine ekleyerek kolayca çözülebilir:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

Şimdi sayfayı yeniden yükleyin ve her iki hatanın da kaybolduğunu kontrol edin.

Not: ⚡ kullanılması önerilse de ⚡ özelliği yerine amp özelliği de kullanılabilir. Bu nedenle, işaretleme şu şekilde olur:

<!doctype html>

<html amp lang="en">

<head>

...

Görüntü alanı gerekli

Ardından, aşağıdaki hatayı ele alacağız:

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP için görünüm alanı için width ve minimum-scale tanımlanması gerekir. Bu değerler sırasıyla device-width ve 1 olarak tanımlanmalıdır. Görüntü alanı, bir HTML sayfasının <head> bölümüne eklenen yaygın bir etikettir.

Bu sorun en iyi şekilde, <head> etiketine aşağıdaki HTML snippet'i eklenerek düzeltilir. Aşağıdaki meta etiketini ekleyin:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

Bunlar, AMP'de width ve minimum-scale için geçerli olan tek değerlerdir. initial-scale tanımlamak zorunlu olmasa da mobil web geliştirmede yaygın olarak dahil edilir ve önerilir. Görünüm alanı ve duyarlı tasarım hakkında daha fazla bilgiyi burada bulabilirsiniz.

Daha önce olduğu gibi sayfayı yeniden yükleyin ve hatanın kaybolup kaybolmadığını kontrol edin.

Harici stil sayfaları

Aşağıdaki hata, stil sayfalarını kullanmamızla ilgilidir:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

Bu hata özellikle <head> etiketimizdeki aşağıdaki stil sayfası bağlantı etiketiyle ilgilidir:

<link href="base.css" rel="stylesheet" />

Sorun, bunun harici bir stil sayfası referansı olmasıdır. AMP'de, dokümanların yüklenme sürelerini mümkün olduğunca kısa tutmak için geliştiricilerin harici stil sayfaları eklemesine izin verilmez. Bunun yerine, tüm stil sayfası kuralları AMP dokümanına satır içi olarak eklenmelidir.

Bu nedenle, <head> içindeki bağlantı etiketini kaldırın ve aşağıdaki gibi bir satır içi etiketle değiştirin:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

Stil etiketinin içeriği, proje dizininizdeki base.css dosyasından doğrudan kopyalanmalıdır. Stil etiketindeki amp-custom özelliği zorunludur.

Sayfayı tekrar yeniden yükleyin ve stil sayfaları hatasının kaybolup kaybolmadığını kontrol edin.

Not: Yalnızca satır içi stil gereklidir. Ayrıca, tüm stil bilgileri için 50 kilobaytlık bir dosya boyutu sınırı vardır. SASS gibi CSS ön işlemcilerini kullanmanız ve CSS'nizi sayfalarınıza satır içi olarak eklemeden önce küçültmeniz önerilir.

Önemli: AMP dokümanınızın tamamında yalnızca bir stil etiketi olabilir. Makalelerinizde referans verilen birkaç harici stil sayfası varsa bu stil sayfalarını tek bir kural kümesinde toplamanız gerekir. AMP dokümanlarında hangi CSS kurallarının geçerli olduğu hakkında daha fazla bilgi edinmek için bu doküman sayfasını okuyun.

Üçüncü taraf JavaScript'i

Stil sayfaları, satır içi yerleştirme yoluyla AMP ile nispeten kolay bir şekilde yeniden düzenlenebilir ancak JavaScript için aynı durum geçerli değildir.

The tag 'script' is disallowed except in specific forms.

AMP'de kullanıcı tarafından oluşturulan komut dosyalarına izin verilmez. AMP'deki komut dosyalarına yalnızca iki temel koşulu karşılamaları durumunda izin verilir:

• Tüm JavaScript eşzamansız olmalıdır. Yani komut dosyası etiketine async özelliği eklenmelidir.
• Yalnızca AMP kitaplığı ve AMP bileşenleri dahil edilebilir.

Bu, tüm üçüncü taraf JavaScript'lerinin kullanımını etkili bir şekilde engeller. Bir istisna vardır: Üçüncü taraf JavaScript'i iFrame'lerde kullanılabilir.

Harici base.js dosyasını açmayı deneyin. Ne görüyorsunuz? Dosya, JavaScript kodu içermemeli ve yalnızca aşağıdaki gibi bir bilgi yorumu içermelidir:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

Bu harici JavaScript dosyasının web sitemizin işlevsel bir bileşeni olmadığını göz önünde bulundurarak referansı tamamen güvenli bir şekilde kaldırabiliriz.

Dokümanınızdan aşağıdaki harici JavaScript referansını kaldırın:

<script type="text/javascript" src="base.js"></script>

Şimdi sayfayı yeniden yükleyin ve komut dosyası hatasının kaybolduğunu kontrol edin.

Önemli: JavaScript'i bir iframe aracılığıyla eklemek son çare olarak düşünülmelidir. Mümkün olan her yerde JavaScript işlevselliği, yerleşik AMP bileşenleri kullanılarak değiştirilmelidir. İlk AMP bileşenimizi bir sonraki bölümde inceleyeceğiz.

Not: Kullanıcı tarafından oluşturulan komut dosyalarıyla ilgili tek istisna, sayfaya meta veri eklemek ve AMP bileşenlerini yapılandırmak için kullanılan application/ld+json veya application/json türü özelliğidir. Gelecekte yürütülemeyen başka komut dosyaları da eklenebilir.

AMP CSS ortak metin kodu

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

Aşağıdaki hatalar, <head> etiketinde eksik olan iki etiketi ifade eder. Her AMP belgesinde şu etiketlerin bulunması gerekir:

<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>

Yukarıdaki kod snippet'ini dokümanınızın <head> etiketinin en altına ekleyin.

İlk etiket, AMP JavaScript kitaplığı sayfanın içeriği oluşturulmaya hazır olduğunda gövde etiketini tekrar görünür olacak şekilde güncelleyene kadar sayfanın içeriğini görünmez yapar. AMP, henüz stil uygulanmamış sayfa içeriğinin görünmesini engellemek için bunu yapar. Bu sayede, sayfanın içeriği tek seferde göründüğü ve ekranın üst kısmındaki her şey birlikte oluşturulduğu için kullanıcı deneyimi gerçekten anlık olur. İkinci etiket, tarayıcıda JavaScript devre dışı bırakılmışsa bu mantığı geri alır.

amp-img etiketi

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP'de, resim etiketinin yerini alması için özel olarak tasarlanmış bir web bileşeni bulunur: amp-img

<amp-img src="mountains.jpg"></amp-img>

Yukarıdaki amp-img etiketini eklemeyi deneyin ve doğrulayıcıyı tekrar çalıştırın. Birkaç yeni hata alırsınız:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

amp-img neden başka bir hataya neden oldu? Çünkü amp-img, geleneksel HTML img etiketinin doğrudan yerine geçmez. amp-img kullanılırken ek koşullar geçerlidir.

Düzen Sistemi

Bu hata, amp-img öğesinin "container" düzen türünü desteklemediğini belirtir. AMP'nin tasarımındaki en önemli kavramlardan biri, web sayfalarını oluşturmak için gereken DOM yeniden akış miktarını azaltmaya odaklanmasıdır.

AMP, DOM yeniden akışını azaltmak için sayfanın düzeninin, sayfanın indirilmesi ve oluşturulması yaşam döngüsünde mümkün olduğunca erken ve mümkün olduğunca katı olmasını sağlayan bir düzen sistemi içerir.

Düzen sistemi, bir sayfadaki öğelerin çeşitli şekillerde (sabit boyutlar, duyarlı tasarım, sabit yükseklik vb.) konumlandırılmasına ve ölçeklendirilmesine olanak tanır.

Bizim durumumuzda düzen sistemi, amp-img için düzen türümüzü container türü olarak tahmin etti. Ancak kapsayıcı türü, alt öğeler içeren öğeler içindir ve bu hatanın nedeni olan amp-img etiketiyle uyumlu değildir.

Kapsayıcı türü neden çıkarıldı? Çünkü amp-img etiketi için yükseklik özelliği belirtmedik. HTML'de yeniden akış, sayfadaki öğeler için her zaman sabit bir genişlik ve yükseklik belirtilerek azaltılabilir. AMP'de, amp-img öğelerinin genişlik ve yüksekliğinin tanımlanması önerilir. Bu sayede AMP, öğenin en boy oranını anlayabilir.

Genişliği ve yüksekliği aşağıdaki şekilde ayarlayın:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

Sayfayı yenileyin ve doğrulayıcıyı kontrol edin. Artık herhangi bir hata görmemeniz gerekir. Ancak resim, sayfada garip bir şekilde konumlandırıldığından pek iyi görünmüyor. Resmi, ekran boyutu ne olursa olsun sayfaya duyarlı bir şekilde uzatıp sığdıracak şekilde ölçeklendirebilsek çok iyi olurdu.

Genişlik ve yüksekliğin tanımlanması, öğenin tamamen sabit bir boyuta kısıtlanmasına neden olmaz. AMP düzen sistemi, en-boy oranını bilerek öğeyi çeşitli şekillerde konumlandırabilir ve ölçeklendirebilir. Düzen özelliği, öğenin nasıl konumlandırılmasını ve ölçeklendirilmesini istediğiniz konusunda AMP'yi bilgilendirir.

Düzen özelliğini responsive olarak ayarlayarak bunu sağlayabiliriz:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

İşte bu kadar! Resmimiz doğru en boy oranına sahip ve ekranın genişliğini duyarlı bir şekilde dolduruyor.

Başarılı aktarım

AMP belgeniz artık aşağıdaki gibi görünmelidir:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Sayfayı yenileyin ve konsol çıkışına bakın. Aşağıdaki mesajla karşılaşırsınız:

AMP validation successful.

Sık Sorulan Sorular

• DOM yeniden düzenleme nedir?
• Düzen özelliği tanımlanmamışsa ne olur?
• Genişlik ve yükseklik tanımlanmamışsa ne olur?

6. Standart URL'ler, meta veriler ve arama

Yeni AMP girişiminin bir parçası olarak, Google arama sonuçları arayüzünde geçerli AMP dokümanları yeni bir bant arayüzü kapsamında vurgulanır. Bu arayüz, web'de makale arayan kullanıcılara daha iyi bir deneyim sunar. Bu deneyimin en iyi şekilde sunulabilmesi için, dahil edilen sayfaların AMP doğrulayıcıdan geçmenin yanı sıra belirli ölçütleri karşılaması gerekir.

Bu adımda, tüm şartlara genel bir bakış sunulmaktadır.

Standart sayfaları ve AMP dokümanlarını bağlama

AMP, web'i daha hızlı hale getirmeyi amaçlar. Proje ilk günlerinde daha çok statik içeriğe odaklanmış olsa da amp-bind gibi bileşenlerin eklenmesiyle haber yayıncıları, e-ticaret siteleri, seyahat web siteleri ve bloglar gibi çok çeşitli siteler için uygun hale gelmiştir.

Ancak AMP'nin bir web sitesinin yapısında nasıl yer alması gerektiğini tam olarak anlamak önemlidir. AMP, web sitelerinin tamamını oluşturmak için kullanılabilse de birçok yayıncı, AMP dokümanlarının yayıncının web sitesinde barındıracağı normal HTML makalelerine eşlik edecek şekilde oluşturulduğu eşleştirilmiş yaklaşımı tercih ediyor.

Not: AMP'yi kullanarak tüm web sitesini (AMP standart siteleri olarak da bilinir) oluşturma hakkında daha fazla bilgi için "Güzel, etkileşimli ve standart AMP sayfaları" codelab'ini inceleyin.

Normal HTML sayfalarında standart bağlantı, birden fazla sayfa aynı içeriği içerdiğinde hangi sayfanın tercih edilen sayfa olarak kabul edilmesi gerektiğini belirtmek için kullanılan yaygın bir tekniktir. AMP dokümanları, bir web sitesinin geleneksel makale sayfalarıyla birlikte kullanılacak şekilde oluşturulabildiğinden geleneksel HTML sayfalarını "standart" sayfalar olarak ele almalıyız.

Standart sayfaya geri dönen bir bağlantı etiketi ekleyerek AMP dokümanımızda bu hedefe ulaşmak için ilk adımı attık:

<link rel="canonical" href="/article.html">

Sonraki adım, standart makaleyi AMP sayfasına bağlamaktır. Bu, standart makalenin <head> bölümüne bir <link rel="amphtml"> etiketi eklenerek sağlanır.

Aşağıdaki kodu article.html dosyasının <head> bölümüne ekleyin:

<link rel="amphtml" href="/article.amp.html">

Aşağıdaki şemada bağlantı etiketlerinin yönleri gösterilmektedir:

Google arama tarayıcısının normal HTML standart dokümanımız ile AMP dokümanımız arasındaki ilişkiyi anlaması için bu iki yönlü bağlantının ayarlanması gerekir. Bağlantı sağlanmadıysa tarayıcı, hangi makalelerin normal HTML belgelerinin "AMP sürümleri" olduğunu net bir şekilde anlayamayabilir. Bu bağlantıları açıkça sağlayarak herhangi bir belirsizlik olmamasını sağlıyoruz.

Schema.org Arama Motoru Meta Verileri

AMP belgelerinin yeni bant arayüzünde görünmesi için bir diğer şart da Schema.org'un arama motoru meta verileri spesifikasyonuna uyulmasıdır. Bu meta veriler, application/ld+json türünde bir komut dosyası etiketi aracılığıyla dokümanlarınızın <head> etiketine eklenir.

Aşağıdaki kodu AMP belgenizin <head> bölümünün en altına ekleyin:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

Tarayıcıda sayfayı yeniden yükleyin ve AMP doğrulama hatası eklenmediğinden emin olun.

Şimdi yeni bir tarayıcı penceresinde Yapılandırılmış Veri Doğrulama Aracı'nı açın ve "Biçimlendirmemi test et"i tıklayın. Ardından "Kod Snippeti" sekmesini seçin, AMP sayfanızdaki kaynak kodun tamamını kopyalayıp doğrulama aracının metin düzenleyici paneline yapıştırın ve "Testi Çalıştır"ı tıklayın:

Sayfada aşağıdakine benzer bir ifade görürsünüz:

Önemli: Yeşil renkli "Her şey yolunda" metninin gösterildiğinden emin olun. Yalnızca bu doğrulamayı geçen AMP sayfaları AMP bandında gösterilir.

Not: İçerik her zaman aynı olmalıdır. Haber makaleleri için "NewsArticle" türünü kullanın. Başlık, makalenizin başlığıyla eşleşmelidir. Resim, makalenin hero resmini ifade eder.

AMP destekli haber makaleleri için yeni Google Arama bandında görünmenin temel şartları şunlardır:

1. AMP belgenizin doğrulandığından emin olun.
2. Geleneksel HTML sayfanızdan <link> etiketi aracılığıyla AMP belgenize ve bunun tersi yönde referans verin.
3. Yukarıdaki arama motoru meta verileri etiketini ekleyin.

Sayfa keşfi hakkında daha fazla bilgi edinin.

7. Tebrikler!

Code Lab'i tamamladınız ve AMP dokümanlarının temel kavramlarının çoğunu başarıyla incelediniz.

Umarız bu kavramların ve özelliklerin bir AMP dokümanında nasıl uygulanabileceğini anlamışsınızdır. Ayrıca AMP'nin neden bu şekilde tasarlandığını da anlamış olmalısınız.

Aşağıda, becerilerinizi daha da geliştirmek için inceleyebileceğiniz bazı ek konular ve bağlantılar yer almaktadır.

• Sayfa Bulma hakkında her şey
• İzin verilmeyen HTML etiketleri
• Kısıtlanmış CSS Kuralları ve Animasyonlar
• iFrame'ler hakkında daha fazla bilgi
• AMP CDN'si
• Kullanılabilir AMP bileşenlerinin listesi