Article

Çarşamba, 20 May 2020 - 00:05

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



Google artık AMP sayfalarını yayınladı ve yayıncılardan mümkün olan en kısa sürede statik içerik sunmaya odaklandıklarını ve muhtemelen erken benimseyenleri rütbe kazanarak ödüllendirdiğini duyurdu.

Evet, web sitesi sahiplerinden web sayfalarını eski sürüme geçirmelerini istiyorlar. Değiştirmeyin, bunun yerine Asp.NET MVC ile ek sayfalar yapın.

Peki nedir bu Google AMP ve web sitenize nasıl uygulanır?

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-animationnone;
                -moz-animationnone;
                -ms-animationnone;
                animationnone
            }
        </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 {
                visibilityhidden
            } 
            to {
                visibilityvisible
            }
        } 
        @@-moz-keyframes -amp-start {
            from {
                visibilityhidden
            } 
            to {
                visibilityvisible
            }
        } 
        @@-ms-keyframes -amp-start {
            from {
                visibilityhidden
            } 
            to {
                visibilityvisible
            }
        } 
        @@-o-keyframes -amp-start {
            from {
                visibilityhidden
            } 
            to {
                visibilityvisible
            }
        } 
        @@keyframes -amp-start {
            from {
                visibilityhidden
            } 
            to {
                visibilityvisible
            }
        }
    </style>
    <noscript>
        <style amp-boilerplate> 
            body {
                -webkit-animationnone;
                -moz-animationnone;
                -ms-animationnone;
                animationnone;
            }
        </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-colorwhite;
    }
    amp-img {
        background-colorgray;
        border1px 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 AMP
info:
Category: Asp.NET MVC
Created on: 20.05.2020 00:32:09
Last View Date: 20.05.2020 00:32:09
Stats:
0 comments
452 views
94 likes

Comments: