{"id":8070,"date":"2016-06-29T11:26:01","date_gmt":"2016-06-29T09:26:01","guid":{"rendered":"https:\/\/ihs.com.tr\/blog\/?p=8070"},"modified":"2016-06-29T11:26:01","modified_gmt":"2016-06-29T09:26:01","slug":"google-amp-nedir-nasil-kullanilmalidir","status":"publish","type":"post","link":"https:\/\/www.ihs.com.tr\/blog\/google-amp-nedir-nasil-kullanilmalidir\/","title":{"rendered":"Google AMP Nedir? Mobil AMP Nas\u0131l Kullan\u0131l\u0131r?"},"content":{"rendered":"

Size h\u0131zl\u0131 sayfa y\u00fcklemenin \u00f6nemini anlatmam\u0131z yersiz olacakt\u0131r. Uzun y\u00fckleme s\u00fcreleri sitenizin ziyaret oran\u0131n\u0131 etkiler ve bu etkilenmenin ba\u015fl\u0131ca sebeplerinden bir tanesi insanlar\u0131n ak\u0131ll\u0131 telefonlar\u0131 ba\u015f\u0131nda sinirlenmesi ve internet sa\u011flay\u0131c\u0131lar\u0131na hakaret etmesidir.<\/span><\/p>\n

Mobil cihazlar\u0131n y\u00fckleme s\u00fcrelerini optimize etmek i\u00e7in kullanabilece\u011finiz abart\u0131s\u0131z y\u00fczlerce eklenti ve ara\u00e7 var, fakat AMD Project<\/strong> bu y\u00fckleme sorununu \u00e7\u00f6zmeyi ama\u00e7layan ve baz\u0131 temel tasar\u0131m ilkelerine uygun, m\u00fcmk\u00fcn oldu\u011funca eri\u015filebilir sayfalar olu\u015fturmak i\u00e7in kurulan en umut verici ve en iddial\u0131 y\u00f6ntemlerden biridir.<\/span><\/p>\n

The AMP Project<\/strong>, bir Accelerated Mobile Pages destek\u00e7isidir ve bizler bug\u00fcn biraz AMP Project’in tarihinden, ana esaslar\u0131ndan ve WordPress kullanarak bir AMP sayfas\u0131n\u0131n nas\u0131l olu\u015fturulaca\u011f\u0131ndan bahsedece\u011fiz.<\/span><\/p>\n

AMP Project Nedir?<\/strong><\/span><\/p>\n

AMP Project mobil web sitelerinin genel performanslar\u0131n\u0131 art\u0131rmak i\u00e7in bir yol olarak 2015 y\u0131l\u0131n\u0131n Ekim ay\u0131nda Google taraf\u0131ndan ba\u015flat\u0131lan bir a\u00e7\u0131k kaynak giri\u015fimidir. Proje kendi framework’\u00fcne (AMP HTML) sahip oldu\u011fu i\u00e7in kendisiyle iftihar etmektedir ve ayr\u0131ca proje h\u0131zl\u0131 web sayfalar\u0131 olu\u015fturmak i\u00e7in tasarlanm\u0131\u015ft\u0131r, b\u00f6ylelikle y\u00fckleme s\u00fcreleri azalt\u0131lm\u0131\u015ft\u0131r.<\/span><\/p>\n

AMP Project, \u00f6zel olarak bu ama\u00e7 i\u00e7in geli\u015ftirilmi\u015f tek framework olmamas\u0131na ra\u011fmen Google’\u0131n deste\u011fi ile birlikte AMP Project<\/strong>‘in olduk\u00e7a g\u00fcvenli oldu\u011funu s\u00f6yleyebiliriz, bu y\u00fczden k\u0131skan\u0131las\u0131 bir konumdalar. \u00d6rne\u011fin, geli\u015fmi\u015f siteler AMP framework kullanarak, hi\u00e7bir \u00fccret \u00f6demeden geli\u015ftiricilerine Google taraf\u0131ndan do\u011frudan ula\u015f\u0131rlar.<\/span><\/p>\n

I\u015f\u0131k h\u0131z\u0131ndaki y\u00fckleme s\u00fcreleri ve \u00fccretsiz \u00f6nbelle\u011fe alma i\u015flemleri hala yeterli de\u011fil ise, AMP uyumlu sayfalar ayn\u0131 zamanda Google’\u0131n mobil sonu\u00e7lar\u0131ndaki bir destekten de yararlanabilir. Proje ayn\u0131 zamanda Twitter, Pinterest, Adobe Analytics, LinkedIn ve WordPress.com gibi b\u00fcy\u00fck \u015firketlerin deste\u011fine de kendili\u011finden sahip.
\n<\/span><\/p>\n

Sitenizi AMP dostu yapman\u0131z\u0131n dezavantaj\u0131 da, projenin bir dizi kat\u0131 kurallara ba\u011fl\u0131 olmas\u0131d\u0131r ve bu kurallar herkes i\u00e7in kabul edilebilir olmayabilir. \u015eayet web siteniz zaten mobil tarama i\u00e7in ve akl\u0131n\u0131zdaki en iyi uygulamalar i\u00e7in optimize edilmi\u015f ise, zaten olduk\u00e7a h\u0131zl\u0131 olmal\u0131. Bu y\u00fczden bu konuyla ilgili bu kadar b\u00fcy\u00fck faydalar g\u00f6remeyebilirsiniz.<\/span><\/p>\n

\u00d6te yandan; e\u011fer cesur bir ad\u0131m atmaya haz\u0131rsan\u0131z, AMP Project’in kurallar\u0131 olduk\u00e7a iyi belgelenmi\u015ftir ve bu y\u00fczden AMP Project’e ge\u00e7i\u015f yapmak o kadar da zor de\u011fildir.
\n<\/span><\/p>\n

AMP Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/strong><\/span><\/p>\n

Al\u0131\u015f\u0131lm\u0131\u015f\u0131n d\u0131\u015f\u0131nda bir ba\u015flang\u0131\u00e7 yapal\u0131m ve \u00f6ncelikle AMP sayfalar\u0131n\u0131n asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 inceleyelim.<\/span><\/p>\n

Daha \u00f6nce de belirtti\u011fimiz gibi, proje kendi framework\u00fcn\u00fc kullan\u0131yor. Framework<\/a> sadece vadedilen h\u0131z\u0131 yerine getirmeye, \u015fi\u015fkinli\u011fi azaltmaya ve teknik i\u015flevlere bir s\u0131n\u0131r koymaya izin veriyor.<\/span><\/p>\n

AMP sayfalar\u0131 proje kurallar\u0131yla uyumlu g\u00f6r\u00fcnmek ve Google taraf\u0131ndan sunulan avantajlardan yararlanmak i\u00e7in \u00f6zel tasar\u0131m dizilerini ve d\u00fczen kurallar\u0131n\u0131 takip etmeli. AMP sayfalar\u0131 tasar\u0131m s\u00fcreci boyunca yaln\u0131zca CSS’e g\u00fcvenir. B\u00f6ylece sat\u0131r i\u00e7i tasar\u0131m \u00f6zniteliklerini ve baz\u0131 t\u00fcrlerdeki ge\u00e7ersiz animasyonlar\u0131, olu\u015fabilecek performans sorunlar\u0131n\u0131 \u00f6nlemek amac\u0131yla kullanamazs\u0131n\u0131z.<\/span><\/p>\n

\u0130zin verilmeyen harici tasar\u0131m sayfalar\u0131 bir miktar g\u00fc\u00e7l\u00fckle birlikte nitelendirilebilir olsa da; projenin \u00f6zellikleri, sadece head<\/em> taginizin b\u00fcnyesindeki CSS’iniz ile kazan\u0131lan performans art\u0131\u015f\u0131n\u0131n olduk\u00e7a \u00f6nemli oldu\u011funu a\u00e7\u0131klar ve AMP ile birlikte her milisaniyeyi sayar.<\/span><\/p>\n

Bir sayfaya tasar\u0131mlar ilave etmek i\u00e7in a\u015fa\u011f\u0131daki \u00f6rnekte de g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere <style amp-custom><\/em> etiketini kullanman\u0131z gerekir.<\/span><\/p>\n

<html><\/em>
\n<head><\/em>
\n<meta charset=”utf-8″><\/em>
\n<link rel=”canonical” href=”merhaba-ihstelekom.html” ><\/em>
\n<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″><\/em>
\n<style amp-custom><\/em>
\n\/*Your CSS goes here *\/<\/em>
\nbody {<\/em>
\nbackground-color: white;<\/em>
\n}<\/em>
\n<\/style><\/em>
\n<script async src=”https:\/\/cdn.ampproject.org\/v0.js”><\/script><\/em>
\n<\/head><\/em>
\n<body>Merhaba IHS Telekom<\/body><\/em>
\n<\/html><\/em><\/p>\n

AMP Project’in GitHub sayfas\u0131nda \u00f6nceden haz\u0131rlanm\u0131\u015f CSS stillerini de bulabilece\u011finiz, AMP sayfalar\u0131 i\u00e7in bir \u00e7ok varsay\u0131lan bile\u015fen mevcut. Frameworkun kendi kendine bir \u015feyleri \u00f6\u011frenmesi \u00e7ok zor olmasa da baz\u0131 giri\u015fimci WordPress geli\u015ftiricileri eklentileri geli\u015ftirmek ve AMP onayl\u0131 formatlara d\u00f6n\u00fc\u015ft\u00fcr\u00fclebilmek i\u00e7in bu i\u015fi kendileri \u00fcstlenmi\u015f durumda. Haydi bu eklentilere bir g\u00f6z atal\u0131m:<\/span><\/p>\n

AMP WordPress ile Nas\u0131l Entegre Edilir?<\/strong><\/span><\/p>\n

Sayfan\u0131z\u0131 AMP standartlar\u0131na uyarlamak i\u00e7in \u015fu anda kullanabilece\u011finiz en iyi eklenti muhtemelen AMP eklentisidir. A\u015fa\u011f\u0131da listelenen alternatifler AMP eklentisi i\u00e7in tamamlay\u0131c\u0131 olarak \u00e7al\u0131\u015f\u0131rlar ve kendi ki\u015fisel b\u00f6l\u00fcmlerinde ek i\u015flevsellik sunarlar.<\/span><\/p>\n