Bu codelab'de Accelerated Mobile Pages (veya AMP) kısaltmasını nasıl yapacağınızı öğreneceksiniz. Bunun için AMP haberlerine uygun basit bir haber makalesi web sayfası uygulayıp mobil haber sitelerinde yaygın olarak kullanılan çeşitli tipik web özelliklerine yer vermelisiniz.
Neler öğreneceksiniz?
- AMP, mobil web'de kullanıcı deneyimini nasıl iyileştirir?
- AMP sitelerinin temelleri.
- AMP sınırlamaları.
- AMP'nin web bileşenleri, yaygın haber sitesi sorunlarını nasıl çözer?
- AMP'nizi doğrulama.
- AMP'nizi Google Arama için hazırlama.
Gerekenler
- Örnek kod
- Python (tercihen 2,7) veya Chrome 200 OK Web Server uzantısı
- Chrome (veya JavaScript konsolunu denetleyebilen eşdeğer bir tarayıcı)
- Kod Düzenleyici (örneğin Atom, Sublime, Notepad++)
Örnek kodun tamamını bilgisayarınıza indirebilirsiniz:
...veya GitHub veri deposunu komut satırından klonlayın:
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.gitÇeşitli örnek kaynak dosyalarını ve başlangıç makalesi.html sayfasını içeren bir ZIP dosyası indirirsiniz.
Klasörü açın ve bilgisayarınızdaki komut satırından dizine gidin.
Örnek sayfamızı test etmek için dosyalara bir web sunucusundan erişmemiz gerekiyor. Test amaçlı olarak geçici bir yerel web sunucusu oluşturmanın birkaç yolu vardır. Bu kod laboratuvarında 3 seçenek için talimatlar verilmiştir:
- Chrome için Web Sunucusu uygulaması - Bu, önerilen en basit ve platformlar arası çözüm olduğu için önerilen yaklaşımdır. Not: Bu yaklaşım için Google Chrome'un yüklenmesi gerekir.
- Firebase Hosting - Ayrıca, yeni statik öğe barındırma platformumuz olan "Firebase Hosting"i keşfetmek istiyorsanız alternatif bir seçenektir. Varsayılan olarak SSL etkindir.
- Yerel HTTP Python Server: Komut satırına erişim gerektirir.
1. Seçenek: Chrome için Web Sunucusu
Chrome Web Mağazası uygulamasını "Chrome Web Mağazası"nda bu bağlantıda 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ı açtığınız klasörü seçmelisiniz.
Ayrıca, "index.html"yi otomatik olarak göster seçeneğini işaretleyin ve bağlantı noktasını "8000" olarak ayarlayın. Bu değişikliklerin geçerli olması için web sunucusunu yeniden başlatmanız gerekir.
Bu URL'ye şu yolla erişin:
http://localhost:8000/article.html
Yukarıdaki URL başarıyla yüklenirse sonraki adıma geçebilirsiniz.
2. Seçenek: Firebase Hosting
Yeni Firebase statik web barındırma hizmetini keşfetmek istiyorsanız AMP sitenizi Firebase barındırma URL'sine dağıtmak için burada bulunan talimatları uygulayabilirsiniz.
Firebase Hosting, statik bir web sitesini ve öğelerini (HTML, CSS ve JavaScript dosyaları dahil) hızlı bir şekilde dağıtmak ve 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 bulunan varlık noktaları (PoP'ler) ile bir içerik yayınlama ağında (CDN) önbelleğe alındığından, kullanıcılar gecikmenin azaltılmasını sağlıyor.
Son olarak, Firebase Hosting her zaman SSL ile sunulur. Bu da AMP ve genel olarak web için idealdir. Yalnızca AMP'ye odaklanmak istiyorsanız bu seçeneği yoksaymanız yeterlidir.
3. Seçenek: HTTP Python Server
Chrome kullanmıyorsanız veya Chrome uzantısını yüklemekte sorun yaşıyorsanız yerel bir web sunucusunu tetiklemek için komut satırından Python'u da kullanabilirsiniz.
Python'da yerleşik HTTP sunucusunu komut satırından çalıştırmak için aşağıdaki komutu çalıştırmanız yeterlidir:
python -m SimpleHTTPServer
Bu URL'ye de erişebilirsiniz:
http://localhost:8000/article.html
İndirilen ZIP dosyasında article.html adlı bir dosya bulunmaktadır. Bu makale, AMP eşdeğer sayfası oluşturmakta olduğumuz makaledir.
article.html örneğindeki kodu kopyalayıp yeni bir dosyaya yapıştırın. Bu dosyayı article.amp.html. olarak kaydet
article.amp.html dosyanız şu anda 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, kasıtlı olarak, basit statik haber makalesi öğelerini içeren basit bir sayfadır: CSS, JavaScript ve bir resim etiketi.
Makalenin AMP sürümü şu an orijinal makalenin yalnızca bir kopyasıdır. Bunu AMP'ye dönüştürelim. Başlamak için AMP JavaScript kitaplık dosyasını ekler ve AMP doğrulayıcı etkinleştirildiğinde hangi hataların görüntülendiğini görüntüleriz.
AMP kitaplığını dahil etmek için <head> satırının en altına bu satırı ekleyin:
<script async src="https://cdn.ampproject.org/v0.js"></script>Şimdi tarayıcımızdaki aşağıdaki bağlantıyı kullanarak yeni article.amp.html sayfasını yükleyelim ve Menu > More Tools > Developer Tools üzerinden Chrome'da Geliştirici Konsolu açalım:
Artık geliştirici konsolunda JavaScript çıkışını inceleyin. Konsol sekmesini seçtiğinizden emin olun:
Şu günlük görüntülenir:
Powered by AMP ⚡ HTML
Şimdi AMP doğrulayıcıyı etkinleştirmek için bu parça tanımlayıcısını URL'nize ekleyin:
#development=1
Örneğin:
http://localhost:8000/article.amp.html#development=1
Tarayıcınızda sayfayı manuel olarak yenilemeniz gerekebilir. Aşağıdaki düğmeyi tıklayarak tarayıcınızdaki bir sayfayı manuel olarak yenileyebilirsiniz:
Birkaç doğrulama hatası alırsınız:
AMP, Accelerated Mobile Pages'ın (Accelerated Mobile Pages) kısaltması anlamına gelse de, tüm ekran boyutlarında iyi görüntülenen 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 göz atın.
Chrome Geliştirici Araçları'nda mobil cihaz deneyimini simüle etmek. Burada, cep telefonu cihaz simgesini tıklayın:
Şimdi bu menüden bir mobil cihaz (örneğin, "Pixel 2") seçin:
Tarayıcınızda şuna benzer bir mobil simüle edilmiş çözünürlük görmeniz gerekir:
Artık işe gitmeye hazırız. Şimdi doğrulama hatalarını tek tek ele alalım ve AMP ile nasıl ilgilendiklerini ele alalım.
Karakter kümesi gerekli
Aşağıdaki hatayı düzeltmekle başlayacağız:
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
AMP, metnin doğru görüntülenmesi için karakterin ayarlanmış olmasını gerektirir. Ayrıca başlık etiketinin ilk alt öğesi olmalıdır. Bunun nedeni, meta karakter etiketi etiketinden önce eklenen içeriğin yeniden yorumlanmamasını sağlamaktır.
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ğinden emin olun.
AMP dosyalarının <link rel=canonical> etiketi olması gerekir.
Her AMP dokümanı, standart sayfaya referans veren bir bağlantıya sahip olmalıdır. Öyleyse bağlantıyı orijinal makalemize ekleyelim.
Şimdi <meta charset="utf-8" /> etiketinin altına aşağıdaki kodu ekleyin:
<link rel="canonical" href="/article.html">
Şimdi, gerekirse web sunucunuzu yeniden başlatın ve sayfayı yeniden yükleyin. Düzeltilmesi gereken çok sayıda hata olsa da "AMP dosyalarının" <link rel=canonical> etiketinin olması gerekir. Bu hata artık yoktur.
AMP özelliği gerekiyor
AMP, sayfayı AMP dokümanı olarak tanımlamak için sayfanın kök HTML öğesinde bir özelliğin kullanılmasını 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 işlem, <html> etiketine şu şekilde ⚡ özelliğini ekleyerek çözülür:
<!doctype html>
<html ⚡ lang="en">
<head>
...Şimdi sayfayı yeniden yükleyin ve her iki hatanın da giderildiğini kontrol edin.
Görüntü alanı gerekiyor
Ardından, aşağıdaki hatayı ele alacağız:
The mandatory tag 'meta name=viewport' is missing or incorrect.
AMP, görüntü alanı için width ve minimum-scale tanımını gerektirir. Bu değerler sırasıyla device-width ve 1 olarak tanımlanmalıdır. Viewport, bir HTML sayfasının <head> öğesine eklenen, yaygın olarak kullanılan bir etikettir.
Bu durum, aşağıdaki HTML snippet'inin <head> etiketine eklenmesiyle düzeltilebilir. 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 tek değerlerdir. initial-scale tanımlamak zorunlu değildir, ancak mobil web geliştirme sürecine yaygın olarak dahil edilen bir öneridir. Görüntü alanı ve duyarlı tasarım hakkında daha fazla bilgiye buradan ulaşabilirsiniz.
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ın kullanımıyla ilgilidir:
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.
Bu, özellikle <head> etiketimizdeki aşağıdaki stil sayfası bağlantı etiketi hakkında şikayetçidir:
<link href="base.css" rel="stylesheet" />Sorun, bunun harici bir stil sayfası referansı olmasıdır. AMP'de, dokümanların yükleme sürelerini mümkün olduğunca hızlı tutmak için geliştiricilerin harici stil sayfaları eklemelerine 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, doğrudan proje dizininizdeki base.css dosyasından kopyalanmalıdır. Stil etiketindeki amp-custom özelliği zorunludur.
Yine, sayfayı yeniden yükleyin ve stil sayfaları hatasının kaybolup kaybolmadığını kontrol edin.
Üçüncü Taraf JavaScript
Stil sayfaları satır içi olarak AMP ile nispeten kolay bir şekilde yeniden çalışabilse de, bu aynı JavaScript için 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şula izin verilirse:
- Tüm JavaScript eşzamansız olmalıdır. Yani, komut dosyası etiketine
asyncözelliğini ekleyin. - Yalnızca AMP kitaplığı ve AMP bileşenleri dahil edilebilir.
Bu, tüm üçüncü taraf JavaScript'in kullanımını etkin bir şekilde ortadan kaldırır. Bir istisna vardır: iframe'lerde üçüncü taraf JavaScript kullanılabilir.
Harici base.js dosyasını açmayı deneyin. Ne görüyorsunuz? Dosya, herhangi bir JavaScript kodundan boş olmalı ve yalnızca aşağıdakilere benzer bilgilerin yer aldığı bir yorum 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ı düşünürsek, referansı güvenli bir şekilde tamamen kaldırabiliriz.
Aşağıdaki harici JavaScript referansını dokümanınızdan kaldırın:
<script type="text/javascript" src="base.js"></script>
Şimdi sayfayı yeniden yükleyin ve komut dosyası hatasının kaybolur.
AMP CSS ortak metin
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.
Sonraki hatalar, <head> etiketinde iki eksik etiket olduğunu gösterir. Her AMP dokümanı için şu etiketlerin eklenmesi 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 alt kısmına ekleyin.
Sayfanın etiketi oluşturulmaya hazır olduğunda AMP JavaScript kitaplığı, gövde etiketini tekrar görünür hale getirene kadar ilk etiket, sayfanın içeriğini görünmez hale getirir. AMP, sayfanın henüz stillendirilmemiş içerik görünmesini engellemek için bunu yapar. Bu, sayfanın içeriğinin aynı anda görünmesi ve ekranın üst kısmındaki her şeyin birlikte oluşturulması durumunda kullanıcı deneyiminin gerçekten anında olmasını sağlar. Tarayıcıda JavaScript devre dışıysa ikinci etiket, bu mantığı geri döndürür.
amp-img etiketi
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?AMP'nin, resim etiketini değiştirmek için özel olarak tasarlanmış, web adında amp-img adlı bir bileşeni vardır:
<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 alacaksı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 hatayı tetikledi? amp-img, geleneksel HTML img etiketinin doğrudan yerine geçmez. amp-img kullanırken ek şartlar söz konusudur.
Düzen Sistemi
Bu hata, amp-img öğesinin "container' düzen türünü desteklemediğini bize bildirir. AMP'nin tasarımındaki en önemli kavramlardan biri, web sayfalarını oluşturmak için gereken DOM yeniden akış miktarını azaltmaya odaklanmaktadır.
DOM yeniden akış AMP'sini azaltmak için AMP, sayfa düzeninin indirilip oluşturulmasının yaşam döngüsünde mümkün olduğunca erken uygulanmasını sağlayan bir düzen sistemi içerir.
Düzen sistemi, bir sayfadaki öğelerin çeşitli şekillerde yerleştirilmesine ve ölçeklendirilmesine olanak tanır: sabit boyutlar, duyarlı tasarım, sabit yükseklik ve daha fazlası.
Bizim örneğimizde düzen sistemi, amp-img için düzen türümüzü container türü olarak tahmin etti. Bununla birlikte, kapsayıcı türü alt öğeler içeren öğelerdir ve bu hatanın nedeni, amp-img etiketiyle uyumlu değildir.
Kapsayıcı türü neden tahmin edildi? amp-img etiketi için bir yükseklik özelliği belirtmediğimizden. HTML'de yeniden akış, bir sayfadaki öğeler için her zaman sabit bir genişlik ve yükseklik belirterek azaltılabilir. AMP'de amp-img öğelerinin genişlik ve yüksekliğinin tanımlanması önerilir. Bu, AMP'nin öğenin en boy oranını anlamasına olanak tanır.
Genişlik ve yüksekliği aşağıdaki gibi 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örmeyeceksiniz! Bununla birlikte, resim, sayfadaki tuhaf bir şekilde görünecek kadar iyi görünmüyor. Resmi, ekran boyutundan bağımsız olarak duyarlı bir şekilde genişletilip sayfaya sığdırmak harika olurdu.
Beklendiği üzere genişliği ve yüksekliği tanımlamak, öğeyi tamamen sabit bir boyutla kısıtlamaz. AMP düzen sistemi, en boy oranını bilerek öğeyi çeşitli şekillerde konumlandırabilir ve ölçeklendirebilir. Düzen özelliği, AMP'ye öğenin nasıl konumlandırılmasını ve ölçeklendirilmesini istediğinizi bildirir.
Düzen özelliğini responsive olarak ayarlayarak şunları yapabiliriz:
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>İşte bu kadar! Resimimiz doğru en boy oranında ve ekranın genişliğini duyarlı bir şekilde dolduruyor.
İşlem başarılı!
Artık AMP dokümanınız aşağıdaki şekilde 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. Karşılama mesajı aşağıdaki gibidir:
AMP validation successful.
Sık Sorulan Sorular
Yeni AMP girişiminin bir parçası, geçerli bir atlı karınca arayüzünün bir parçası olarak, Google arama sonuçları arayüzünde geçerli AMP dokümanlarının vurgulanmasıdır. Bu arayüz, web'de makale arayan kullanıcılara daha iyi bir kullanıcı deneyimi sağlar. Bu deneyimin en iyi şekilde olabilmesi için, dahil edilen sayfaların AMP doğrulayıcıyı geçmenin ötesinde belirli ölçütleri karşılaması gerekir.
Bu adım tüm şartlara genel bir bakış sağlar.
Standart Sayfalarla AMP Belgelerini Bağlama
AMP web'i daha hızlı hale getirmeyi amaçlamaktadır. Proje her ne kadar projenin ilk günlerinde statik içeriğe daha fazla odaklanmış olsa da amp-bind gibi bileşenlerin eklenmesi, bu içeriği haber yayıncıları, e-ticaret, seyahat web siteleri, bloglar gibi birçok farklı site için uygun hale getirmiştir.
Ancak AMP'nin bir web sitesi yapısının içinde nasıl olması gerektiğini tam olarak anlamak önemlidir. AMP, web sitelerinin tamamını oluşturmak için kullanılabilir, ancak çoğu yayıncı bunu, eşlenmiş bir yaklaşımla kullanmayı tercih eder. Burada AMP dokümanları, yayıncının web sitesinde barındıracağı normal HTML makalelerine ek olarak oluşturulur.
Normal HTML sayfalarındaki standart bağlantı, birden çok sayfa aynı içeriği içerdiğinde hangi sayfanın tercih edilen sayfa olarak kabul edilmesi gerektiğini tanımlamak için yaygın bir tekniktir. AMP dokümanları, bir web sitesinin geleneksel makale sayfalarıyla birlikte kullanılabilir hale getirildiğinden, geleneksel HTML sayfalarını "standart" sayfalar olarak ele almamız gerekir.
Standart sayfamıza <head> bağlantısını kullanarak AMP etiketimize bunu sağlamak için ilk adımı atmıştık:
<link rel="canonical" href="/article.html">Sonraki adım, standart makaleyi AMP sayfasına bağlamaktır. Bu işlem, standart makalenin <head> bölümüne bir <link rel="amphtml"> etiketi eklenerek yapılı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önü gösterilmektedir:
Google arama tarayıcısının normal HTML standart belgemizle AMP belgemiz arasındaki ilişkiyi anlayabilmesi için bu çift yönlü bağlantı kurulması gerekir. Bağlantı sağlanmamışsa, hangi makalelerin normal HTML dokümanlarının AMP sürümleri olduğu açıkça belli olmaz. Bu bağlantıları açık bir şekilde sağlayarak, belirsizlik olmasını sağlarız.
Schema.org Arama Motoru Meta Verileri
AMP dokümanlarının yeni bant arayüzünde görünmesi için gereken bir diğer koşul da Schema.org'un Arama Motoru Meta Veri spesifikasyonuna uymaktır. Bu meta veri, application/ld+json türü komut dosyası etiketi aracılığıyla dokümanlarınızın <head> etiketine eklenir.
Aşağıdaki kodu AMP dokümanınızın <head> bölümünün 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>Sayfayı tarayıcıda yeniden yükleyin ve AMP Doğrulama hatasının oluşmadığını tekrar kontrol edin.
Şimdi, yeni bir tarayıcı penceresinde Yapılandırılmış Veri Doğrulama Aracı'nı açın ve “İşaretlememi test et" düğmesini tıklayın. Ardından "Kod Snippet'i" sekmesini seçin, AMP sayfanızdaki tam kaynak kodunu kopyalayın ve doğrulama aracının metin düzenleyici paneline yapıştırın ve "Testi Çalıştır"ı tıklayın:
Sayfada şuna benzer bir sonuç göreceksiniz:
AMP destekli haber makaleleri için yeni Google Arama bandında görünmenin temel şartları şunlardır:
- AMP dokümanınıznın doğrulandığından emin olun.
- Geleneksel HTML sayfanızdan AMP dokümanınıza <link> etiketi ya da tersi şekilde bakın.
- Yukarıdaki Arama Motoru Meta Veri etiketini ekleyin.
Sayfa bulma hakkında daha fazla bilgi edinin.
Kod laboratuvarını tamamladınız ve AMP dokümanlarının temel kavramlarını başarıyla keşfettiniz.
Bu kavramların ve özelliklerin bir AMP dokümanına nasıl uygulanabileceğini anlamakla kalmadık, aynı zamanda AMP'nin neden bu şekilde tasarlandığını da anladığınızı umuyoruz.
Aşağıda, Becerilerinizi daha da zenginleştirmek için keşfedebileceğiniz ek konular ve bağlantılar yer almaktadır.