AMP란?
AMP(Accelerated Mobile Pages)는 Google에서 개발한 오픈 소스 프레임워크로, 웹 페이지의 로딩 속도를 극대화하는 데 중점을 두고 있습니다. AMP를 통해 웹 페이지는 더 빠르게 로딩되며, 이는 사용자 경험을 크게 향상시킵니다. 빠른 로딩 속도는 특히 모바일 사용자들에게 중요하며, AMP를 통해 이러한 요구를 충족할 수 있습니다.
AMP의 필요성
1. 빠른 로딩 속도
AMP를 사용하면 웹 페이지가 즉시 로드됩니다. 이는 사용자들이 페이지를 더 빨리 접근할 수 있게 하여 이탈률을 줄이는 데 도움을 줍니다. 페이지 로딩 속도가 빨라지면 사용자 만족도가 높아지고, 더 많은 방문자가 웹사이트에 머물게 됩니다.
2. SEO 향상
Google은 AMP 페이지를 검색 결과에서 우선적으로 다루기 때문에, AMP를 적용한 페이지는 검색 순위가 높아질 가능성이 큽니다. 이는 더 많은 트래픽을 웹사이트로 유도하는 중요한 요소가 됩니다. Google의 검색 알고리즘은 사용자 경험을 중요하게 생각하며, AMP는 이를 충족시키는 좋은 방법입니다.
3. 캐시 사용
AMP는 Google AMP Cache를 사용하여 전 세계 어디서나 빠르게 콘텐츠를 제공할 수 있습니다. 이를 통해 글로벌 사용자들에게도 빠른 접근성을 제공할 수 있어 웹사이트의 접근성이 향상됩니다.
AMP 페이지 만들기
AMP 페이지를 만드는 것은 비교적 간단합니다.
기본적인 AMP 페이지 예제
이 예제는 AMP 페이지의 기본 구조를 보여줍니다.
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>AMP 예제</title>
<link rel="canonical" href="https://example.com/amp">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
font-family: Arial, sans-serif;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>안녕하세요, AMP 페이지입니다!</h1>
<p>이 페이지는 AMP 프레임워크를 사용하여 만들어졌습니다.</p>
</body>
</html>AMP 구성 요소 설명
<!doctype html>: 문서 타입을 지정합니다.<html amp>: AMP 문서임을 명시합니다.<meta charset="utf-8">: 문서의 문자 인코딩을 지정합니다.<link rel="canonical" href="https://example.com/amp">: 페이지의 정규 URL을 설정합니다.<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">: 페이지의 뷰포트 설정을 지정합니다.<style amp-custom>: AMP 스타일을 정의합니다.<script async src="https://cdn.ampproject.org/v0.js"></script>: AMP 라이브러리를 비동기적으로 로드합니다.
이 기본 구조를 통해 AMP 페이지를 시작할 수 있으며, 이를 기반으로 더 복잡한 페이지를 구축할 수 있습니다. AMP를 사용하면 사용자 경험을 크게 향상시킬 수 있으며, SEO 성과를 높이는 데 중요한 역할을 합니다.
AMP 참고 자료
AMP 프로젝트 : https://amp.dev/
Google Developers AMP Guide: https://developers.google.com/amp
AMP 깃허브 : https://github.com/ampproject/amphtml