Hızlandırılmış Mobil Sayfalar Nedir? Nasıl Entegre Edilir?

Hızlandırılmış Mobil Sayfalar Nedir? Nasıl Entegre Edilir?

Herkese merhaba,

Bugün Google'ın yakın zamanda aktif ettiği Google AMP' a vakit ayırmak istedim. Nedir bu Google Amp? Açılımı Accelerated Mobile Pages olan projenin Türkçe karşılığı Hızlandırılmış Mobil Sayfalar anlamına gelir.

Amacımız nedir?

Mobil cihaz kullanımın artması nedeniyle, mobil cihazlara uygun daha hızlı web sayfaları geliştirmek.

Google Amp'ın en önemli özelliği Normal Html yapısına farklı etiketler eklenerek geliştirilmiş bir web projesi olmasıdır. <img> yerine <amp-img></amp-img> kullanılması gibi ...

Bir web sayfasının Google Amp uyumlu olabilmesi için belirli özellikleri taşıması gerekir. Olmazsa olmaz kodlarımız var yani.

Tüm web sayfaları için gerekli, olmazsa olmaz Google Amp Etiketleri

  • <!doctype html> Html5 özelliği 
  • <html amp> veya <html >
  • <head>
  • <link rel="canonical" href="http://www.ozlemcimen.com" />
  • <meta charset="utf-8">
  • <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
  • Schema.org micro datalarını bulundurması
  • <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>
  • <body>

Bu notlarımıza istinaden basit bir Google Amp html sayfası aşağıdaki gibi olmalıdır.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Google Amp Projesine Hos Geldiniz</title>
    <link rel="canonical" href="http://www.ozlemcimen.com" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
    <h1>Hizlandirilmis Mobil Sayfalari</h1>
  </body>
</html>

Devamı gelecek...

Konu hakkında yorumlarınızı bekliyorum.

Sevgiler.

Bir önceki yazım olan CSS3 ile Hazırlanmış Modern Pre-Loader 6 Animasyon başlıklı makalemde html5 css3, modern web tasarımı ve preloader animasyon hakkında bilgiler verilmektedir.

Özlem'den Okuyucuya

Bir bloggerın en önemli motivasyon kaynağı, yazdığı yazılarının ilgi görmesidir. Okumuş olduğun içeriği beğendiysen sosyal medyada paylaşabilir, konu ile ilgili görüşlerini yorum kısmından yazabilir veya hemen aşağıdan mail listeme abone olarak bana destek olabilirsin.

Paylaş

google
linkedin

İlginizi Çekebilecek Yazılar