Article
ASP.NET MVC ile Google AMP Sayfaları Oluşturma
Owner:
Barış Gelebek
"Google, Mobilegeddon'u ilk duyurduğunda, web master'lar, siteleri mobil sayfaları desteklemediği için Google sıralamasının düşmesinden endişelendi..."
AMP nedir?
Basit
bir ifadeyle, içeriğinizin daha hızlı yayınlanabilmesi için zayıflatılmış bir UI sürümüdür.
Google
AMP (Hızlandırılmış Mobil Sayfalar), web sitesi sahiplerinin içerikleri
etrafında "hızlı açılışı engelleyecek neredeyse tüm fazlalıkların
azaltmasını" sağlayarak kullanıcılar için daha hızlı bir web oluşturma
girişimidir. Ekteki Video (25 dakika) AMP sayfalarını web sitenize nasıl
entegre edeceğinizi anlatıyor.
Teknik
olarak üç bileşen gerektirir:
- AMP
HTML - Kısıtlı ve yapılandırılmış HTML
- AMP
JS - AMP sayfalarının hızlı oluşturulmasını sağlar
- AMP
CDN - AMP sayfalarını sunar
Neyse
ki, ASP.NET MVC'de yerleşik bir siteniz varsa, AMP sayfalarını kolayca
ayarlayabilirsiniz.
ASP.NET MVC
sitemize AMP'yi nasıl uygularız?
Bir
süre önce, DisplayMode'un neden ASP.NET MVC'ye tanıtıldığını merak ettim. Bunun
için ne gibi bir kullanımım olabilir? DisplayMode'u kullanmak için asla bir
nedene ihtiyacım olmadı sanırım ...
...şimdiye
kadar.
DisplayMode'un
çalışma şekli, belirli bir koşul karşılandığında, seçtiğiniz bir görünüme
yönlendirilmesidir. ViewModel'i farklı bir Görünüme göndermeniz dışında her şey
eskisi gibi işlenir.
DisplayMode
dört şey gerektirir:
DisplayMode'unuzu
kaydetme
Görünümleriniz
için ortak bir sınıf (sayfalar). Bir GoogleAmpDisplayMode sınıfı oluşturdum.
Yeni
DisplayMode'a yeniden yönlendirme için bir ContextCondition
Gerçek
Görünüm
İlk
olarak DisplayMode'umuzu oluşturmak ile başlayalım
DisplayMode
oluşturma
Global.asax'ınızda,
aşağıdaki kodları Application_Start 'ın altına yerleştirelim
// Google AMP için kullanılır.(https://www.ampproject.org/docs/get_started/about-amp.html)
DisplayModeProvider.Instance.Modes.Clear();
DisplayModeProvider.Instance.Modes.Add(new GoogleAmpDisplayMode());
DisplayModeProvider.Instance.Modes.Add(new DefaultDisplayMode());
GoogleAmpDisplayMode
sınıfı aşağıda tanımlıyorum ve daha sonra DefaultDisplayMode sınıfından miras
alıyorum. Düzen önemlidir. ContextCondition yerine getirilmezse, bir sonraki
DisplayMode'a geçecektir.
Web
sitem için DisplayModes adlı bir dizin oluşturdum ve bir
GoogleAmpDisplayMode.cs oluşturdum. Basit bir sınıf.
DisplayModes\GoogleAmpDisplayMode.cs
public class GoogleAmpDisplayMode : DefaultDisplayMode
{public GoogleAmpDisplayMode() : base("amp") // for filename.amp.cshtml files.
{ContextCondition = context => context.Request.RawUrl.Contains("?amp");
}}
Yeni
bir içerik oluşturduğumuzda, basitleştirilmiş normal bir web sayfası görevi
görür.
Ancak,
URL'nin sonuna sorgu dizesi olarak bir "? Amp" eklediğimizde AMP
sayfamızı alırız.
Şimdi
yapmanız gereken tek şey AMP dosyalarınızı Google için sayfalarınızı
"AMP" yapmak istediğiniz yere eklemek.
Görünüm için Kurallar
Google'a
göre, zorunlu AMP HTML etiketleri aşağıdaki gibidir:
Bunların
eksik olması, google amp sayfaları üretmeyebilir. Üretse bile Google
içeriğinizi AMP olarak tanımlamayacaktır.
doctype
etiketi ile başlayalım
<!doctype html>
Html
etiketi
böyle;
<html ?>
yada
böyle olmalıdır
<html amp>
Ben <html amp> şeklinde
yazmanızı tavsiye ederim.
Bir
sonraki adım <head> ve <body> etiketlerini
içerir. Bildiğiniz üzere (HTML'de isteğe bağlıdır).
<head> etketinin
içinde, AMP HTML belgesinin normal HTML sürümüne veya böyle bir HTML sürümü
yoksa kendisine işaret eden bir
<link rel="canonical" href="$SOME_URL" />
etiketi
içerir.
<head> etiketlerinin
ilk alt öğesi olarak bir meta olarak
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
etiketi
içerir.
Başlarındaki
son öğe olarak bir
<script async src="https://cdn.ampproject.org/v0.js"></script>
etiketi
içerir (bu, AMP JS kütüphanesini içerir ve yükler).
<head>
<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>
</head>
Örnek
bir detay sayfası görünümü şöyle olmalıdır.
Views\Blog\Detail.amp.cshtml
@model BGLBK.ViewModel.BlogPageViewModel
@{
Layout = null;
}
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="@(Model.Url != null ? Model.Url.GetLeftPart(UriPartial.Path): String.Empty)">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<article>
<h2>@Html.Raw(Model.Post.Title)</h2>
<div class="date-info">
<div class="row">
<div class="col-md-8">
@Html.Raw(Model.Post.PublishedOn.Value.ToFormattedDateTime(false))
</div>
<div class="col-md-4 text-right">
</div>
</div>
</div>
<h3 class="abstract">@Html.Raw(Model.Post.Abstract)</h3>
@Html.Raw(Model.Post.Description)
</article>
</body>
</html>
Google'ın
kullanıcılara hızlı bir şekilde içerik sunmak için beklediği şey tam olarak
budur.
Daha
sonra araştırdıkça uygulanabilir Custom CSS ve Custom JS kodlarının olduğunu da
fark ettim. Yani aslında Custom bir yapı kurup görünümü daha güzel hale
getirebilirsiniz.
etiketler
şu şekilde başlamalı;
CSS
için: <style amp-custom>
JS
için: <script async custom-element></script>
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}amp-img {
background-color: gray;
border: 1px solid black;
}</style>
//yada
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
Neyse
ki bizim için ASP.NET MVC kullanıcıları, DisplayModes kullanarak hızlı ve kolay
bir şekilde oluşturmanın basit bir yoluna sahibiz.
Bir
sonraki yazıda görüşmek üzere. Lütfen yorum yazmayı unutmayın!
Bol
kodlu günler....
Tags:
Creating Google AMP Pages ASP.NET MVC What is AMP? AMP HTML Google AMP with ASP.NET MVC Google AMP sayfaları oluşturma Google AMPinfo:
Created on: 20.05.2020 00:32:09
Last View Date: 20.05.2020 00:32:09
Stats:
369 likes