"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..."
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?
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:
Neyse ki, ASP.NET MVC'de yerleşik bir siteniz varsa, AMP sayfalarını kolayca ayarlayabilirsiniz.
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
Global.asax'ınızda, aşağıdaki kodları Application_Start 'ın altına yerleştirelim
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
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.
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
Html etiketi
böyle;
yada böyle olmalıdır
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
etiketi içerir.
<head> etiketlerinin ilk alt öğesi olarak bir meta olarak
etiketi içerir.
Başlarındaki son öğe olarak bir
etiketi içerir (bu, AMP JS kütüphanesini içerir ve yükler).
Örnek bir detay sayfası görünümü şöyle olmalıdır.
Views\Blog\Detail.amp.cshtml
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>
//yada
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....