ASP.NET MVC ile Google AMP Sayfaları Oluşturma

  • ASP.NET MVC ile Google AMP Sayfaları Oluşturma

Cuma, 18.10.2019 22:06  |   Web Site Örnekleri  |   barisgelebek  |   4


ASP.NET MVC ile Google AMP Sayfaları Oluşturma

AMP Nedir?

Google AMP (Accelerated Mobile Pages), web sitesi sahiplerinin içeriğinin etrafındaki performansı etkileyen "efekt ve görsel unsurları" çıkarmayı sağlayarak, kullanıcılar için daha hızlı bir web oluşturma girişimidir.

ASP.NET MVC ile Google AMP Sayfaları Oluşturma

Google AMP'ın yakın zamanda duyurusuyla sitenizin yeniden tasarımı konusunda endişelenmenize gerek yok. Bugün size ASP.NET MVC ile AMP sayfaları yapmak için hızlı ve kolay bir yol öğreneceğiz.

Google, Mobilegeddon’u ilk kez duyurduğunda, web site yöneticileri, Google’ın sıralamasıyla ilgili endişeliydi çünkü sitelerinin mobil sayfaları desteklenmiyordu.

 

Artık Google, AMP sayfalarını duyurdu. Bu olabildiğince hızlı bir şekilde içerik sunmak anlamına gelen mobil sayfalar demek oluyor.

Peki, AMP sayfalar birer kopya içerik yığını mı olacak ya da her şeyin yeniden yazılması mı? Cevabı basit kullanıcının kullandığı teknolojiye göre hareket edecek bir yapı.

AMP Nedir?

Google AMP (Accelerated Mobile Pages), web sitesi sahiplerinin içeriğinin etrafındaki performansı etkileyen "efekt ve görsel unsurları" çıkarmayı sağlayarak, kullanıcılar için daha hızlı bir web oluşturma girişimidir.

Ön hazırlık üç 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

Bir web yöneticisinin kaç sitede yönetildiğine bağlı olarak, bu güncelleme, AMP gereksinimlerine uyacak binlerce sayfayı değiştiren sayısız saat anlamına gelebilir.

 

Neyse ki, ASP.NET MVC ile oluşturulmuş bir siteniz varsa, AMP sayfalarını kolayca kurabilirsiniz.

 

 

Sırası ile nasıl uygulanacağına başlayalım;

Global.asax 'ta, Application_Start ‘a aşağıkaki DisplayModeProvider ‘larımızı ekliyoruz.

// (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());
 

Bir sonraki adım ise GoogleAmpDisplayMode adında bir class oluşturmak

 

DisplayModes\GoogleAmpDisplayMode.cs

public class GoogleAmpDisplayMode : DefaultDisplayMode
{
    public GoogleAmpDisplayMode() : base("amp") // for filename.amp.cshtml files.
    {
        ContextCondition = context => context.Request.RawUrl.Contains("?amp");
    }
}
 

Daha sonra Yeni bir AmpController adında yeni bir controller oluşturdum. AmpController içerinde bir Index view ‘ı ekleyip add view diyip yeni bir view ekliyeyip içeriğini ise aaşağıdaki gibi yaptım.

 

Burda dikkat edilmesi gerek unsurlar;

<html amp> etiketi

<link rel="canonical" href="/SitenizinMakaleLinki"> etiketi ise Amp olarak belirleyeceğiniz linkin adresi

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> sayfalarınızın mobil yönlendirmeleri

 

İçerikte bulunan Style etiketlerini değiştirmek yerine <style custom-amp-boirlerplate> etiketi ile kendi style’lerinizi yazabilirsiniz.

 

<script async src="https://cdn.ampproject.org/v0.js"></script> olmazsa olmaz unsurlardan biri de amp JavaScript dosyasıdır

 

 

@using Beren.Web.Models
@model IEnumerable<PostVM>
@{
    Layout = null;
}
<!doctype html>
<html amp>
<head>
    <meta charset="utf-8">
    <link rel="canonical" href="/SitenizinMakaleLinki">
    <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.Description)
                </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>
 
https://search.google.com/test/amp adresinden sitenizin AMP sayfalarını test edebilirsiniz

yada ücretsiz ve kullanımı kolay bir tools olan https://www.websiteplanet.com/webtools/amp-validator adresinden de faydalabilirsiniz...

 

AYRICA FAYDALI BULDUYSANIZ AŞAĞIDAKİ LİNK ARACILIĞI İLE BANA BİR KAHVE ISMARLAYABİLİRSİNİZ.

https://www.patreon.com/barisgelebek


Yorumlar
Barış Gelebek 06.08.2018
@yunus merhaba. bu aralar oldukça yoğunum ama en kısa zamanda örnek kodları paylaşacağım. Takıldığın yer var ise yardımcı olmak isterim

yunus 01.08.2018
Merhabalar çalışmanızı rica etsem paylaşabilirmisiniz.

Barış Gelebek 07.05.2018
Tabi ki yardımcı olurum. Rica ederim ne demek.

Mustafa L. 07.05.2018
Bu konuyu bir süredir araştırıyorum ancak Türkçe kaynak bulmak neredeyse imkansız. Yarın itibari ile uyguluyor olacağım. Takıldığım konularda yardımınızı ihtiyacım olacak :) Emeğiniz için teşekkür ederim hocam :)


Yorum Yazınız:
Arama