AMP란?
구글 AMP ( Accelerated Mobile Pages )는 우리말로 하면 모바일 가속화 페이지 입니다. 더 빠른 모바일 환경 제공을 위해서 2015년 10월 구글이 출시한 오픈 소스의 기술입니다. 모바일 브라우저에서 사용자의 콘텐츠 소비 경험을 개선하고 더 빠르게 로드되는 웹 페이지를 제공하는 것이 목표입니다.
AMP HTML은 기존의 웹 사이트 구조와 동일하지만 CSS와 자바스크립트를 제한하여 웹 페이지에 더 빠르게 액세스 할 수 있습니다.
Tractus 에서 발표 한 연구 결과에 따르면 로딩이 지연되면 페이지의 전환율이 3.5% 감소한다고 합니다. 1초가 조금 넘었지만 이로 인해 이탈률이 8.3% 로 증가했습니다.
Google AMP 작동 원리
기본적으로 구글 AMP의 작동 방식은 Facebook의 인스턴트 아티클과 크게 다르지 않습니다. 둘은 서로 다른 플랫폼 에서 사용됩니다. AMP는 구글 검색 엔진을 사용하고 인스턴트 아티클은 페이스북의 소셜 미디어에서 사용됩니다.
AMP를 통해 페이지에 액세스하려면 기존 원본 페이지 보다 상대적으로 더 빠른 로딩 시간이 필요하기 때문에 AMP 페이지를 구현할 때 일부 HTML 태그를 사용할 수 없습니다. CSS를 구조화하여 보다 효율적으로 사용해야 합니다. 또한 웹 사이트 에서 페이지 렌더링을 방해하고 로딩을 느리게하는 자바스크립트를 제거하는 것이 좋습니다.
AMP HTML는 웹 사이트에 캐시 형태로 저장됩니다. 나중에 이 캐시가 로드되어 방문자가 사용하는 모바일 브라우저가 파일을 반복 해서 다운로드 할 필요가 없이 즉시 로드됩니다.
검색 결과에 미치는 영향
우리는 웹 사이트의 로딩 속도, 페이지 조회 수 및 검색 결과 순위가 검색 엔진 최적화(SEO)에 영향을 미친다는 것을 알고 있습니다.
구글 AMP를 적용하면 필요한 로딩 시간이 매우 짧기 때문에 방문자는 웹 사이트에서 콘텐츠를보다 편안하게 즐길 수 있습니다. 또한 이로 인해 방문자 트래픽이 증가합니다.
방문자가 웹 사이트에 빠르게 액세스 할 수 있다면 이탈률이 낮아져 검색 결과에서 더 높은 순위를 차지하게 됩니다. 이를 관리하는 것이 웹 사이트는 검색 결과 상위 노출의 핵심입니다.
AMP HTML 페이지 구현하기
AMP HTML은 웹의 기본 구조를 변경하지 않고 AMP 자바스크립트 라이브러리를
추가하여 작동합니다. 기존 HTML 구조에서 AMP 자바스크립트 라이브러리를
추가합니다.
다음은 AMP HTML의 간단한 구성의 코드 예시입니다.
<-- 유효한 AMP HTML 입니다.-->
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8"/>
<title>새로운 시작</title>
<link rel="canonical" href="original-html-page.html"/>
<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="async" src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>h1{color:blue}</style>
</head>
<body>Hello, AMP world.</body>
</html>
AMP 자바스크립트 라이브러리 추가에는 다음이 포함됩니다.
- AMP 자바스크립트 라이브러리
- AMP 유효성 검사기
- AMP HTML 구성 요소
AMP 자바스크립트 라이브러리
AMP 자바스크립트 라이브러리에는 기본 제공 구성 요소 ( amp-ad , amp-video , amp-img , amp-pixel )가 포함되어 있으므로 다른 스크립트가 추가로 필요없습니다. 또한 렌더링을 방해하는 외부 리소스 로드(외부 자바스립트 사용)를 제외합니다.
AMP 유효성 검사기
AMP Validator를 사용하면 자신의 페이지 코드가 유효한 AMP HTML 인지 쉽게 확인할 수 있습니다.
웹 관리자가 AMP HTML 페이지의 URL에 '
#depelopment=1 ' 를 추가하면 AMP HTML의 구조화 오류를 쉽게 찾을
수 있습니다.
AMP HTML 구성 요소
AMP HTML 구성 요소는 몇 가지 추가적인 요소가 있습니다. 이들이 HTML5 구성 요소의 기능을 대체합니다.
- HTML5 요소인 img 와 video 는 허용되지 않습니다.amp-img 및 amp-video 로 대체해야 합니다.
- iframe은 amp-iframe으로 대체해야 합니다.
- amp-ad, amp-youtube, amp-twitter 로 광고, 유튜브, 트위터 같은 외부 콘텐츠를 삽입할 수 있습니다.
- amp-lightbox 및 amp-carousel 로 디자인 요소를 추가할 수 있습니다.
- amp-anim를 추가하면 브라우저 호환성에 따라 애니메이션 이미지 (GIF) 또는 비디오 파일 (WebM 또는 MP4)을 표시할 수 있습니다.
참조 :
masup.net/2015/10/fits-amp-html
dewaweb.com/blog/apa-itu-google-amp