1. 개요
이 Codelab에서는 Accelerated Mobile Pages(AMP)를 빌드하는 방법을 알아봅니다. 이를 위해 모바일 뉴스 사이트에서 일반적으로 사용되는 여러 일반적인 웹 기능을 통합하면서 AMP 사양을 준수하는 간단한 뉴스 기사 웹페이지를 구현합니다.
학습할 내용
- AMP가 모바일 웹에서 사용자 환경을 개선하는 방식
- AMP 사이트의 기초
- AMP의 제한사항
- AMP의 웹 구성요소가 일반적인 뉴스 사이트 문제를 해결하는 방법
- AMP를 검증하는 방법
- Google 검색용으로 AMP를 준비하는 방법
필요한 항목
- 샘플 코드
- Python (2.7 권장) 또는 Chrome 200 OK 웹 서버 확장 프로그램
- Chrome (또는 JavaScript 콘솔을 검사할 수 있는 동등한 브라우저)
- 코드 편집기 (예: Atom, Sublime, Notepad++)
2. 샘플 코드 가져오기
컴퓨터에 모든 샘플 코드를 다운로드할 수 있습니다.
...또는 명령줄에서 GitHub 저장소를 클론합니다.
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git
여러 예시 리소스 파일과 시작 article.html 페이지가 포함된 ZIP 파일이 다운로드됩니다.
폴더의 압축을 풀고 컴퓨터의 명령줄을 통해 디렉터리로 이동합니다.
3. 샘플 페이지 실행
샘플 페이지를 테스트하려면 웹 서버에서 파일에 액세스해야 합니다. 테스트에 사용할 임시 로컬 웹 서버를 만드는 방법에는 여러 가지가 있습니다. 이 Codelab에서는 다음 3가지 옵션에 대한 안내를 제공합니다.
- Google Chrome 앱 'Chrome용 웹 서버' - 가장 간단하고 크로스 플랫폼 솔루션이므로 이 방법을 사용하는 것이 좋습니다. 참고: 이 방법을 사용하려면 Google Chrome이 설치되어 있어야 합니다.
- Firebase 호스팅 - 새로운 정적 애셋 호스팅 플랫폼인 'Firebase 호스팅'을 살펴보고 싶다면 이 옵션을 사용하세요. 기본적으로 SSL이 사용 설정되어 있습니다.
- 로컬 HTTP Python 서버 - 명령줄에 액세스해야 합니다.
옵션 1: Chrome용 웹 서버
Chrome 웹 스토어의 이 링크에서 'Web Server for Chrome' 앱을 찾을 수 있습니다.
Chrome 앱을 설치한 후 '폴더 선택' 버튼을 통해 앱이 특정 폴더를 가리키도록 해야 합니다. 이 Codelab에서는 Codelab 예제 파일의 압축을 해제한 폴더를 선택해야 합니다.
또한 'Automatically show index.html'(index.html 자동 표시) 옵션을 선택하고 포트를 '8000'으로 설정해야 합니다. 이러한 변경사항을 적용하려면 웹 서버를 다시 시작해야 합니다.
다음을 통해 이 URL에 액세스합니다.
http://localhost:8000/article.html
위 URL이 성공적으로 로드되면 다음 단계로 진행할 수 있습니다.
옵션 2: Firebase 호스팅
새로운 Firebase 정적 웹 호스팅을 살펴보고 싶다면 여기에서 확인할 수 있는 안내에 따라 AMP 사이트를 Firebase 호스팅 URL에 배포하세요.
Firebase 호스팅은 HTML, CSS, JavaScript 파일 등 정적 웹사이트와 애셋을 빠르게 배포하고 호스팅하는 데 사용할 수 있는 정적 호스팅 제공업체입니다. 정적 콘텐츠가 전 세계에 있는 접속 지점 (PoP)이 있는 콘텐츠 전송 네트워크 (CDN)에 캐시되므로 사용자는 지연 시간 감소의 이점을 누릴 수 있습니다.
마지막으로 Firebase 호스팅은 항상 SSL을 통해 제공되므로 AMP 및 일반 웹에 적합합니다. AMP에만 집중하고 싶다면 이 옵션을 무시하세요.
옵션 3: HTTP Python 서버
Chrome을 사용하지 않거나 Chrome 확장 프로그램을 설치하는 데 문제가 있는 경우 명령줄에서 Python을 사용하여 로컬 웹 서버를 실행할 수도 있습니다.
명령줄에서 Python의 내장 HTTP 서버를 실행하려면 다음을 실행하면 됩니다.
python -m SimpleHTTPServer
이 URL에 액세스합니다.
http://localhost:8000/article.html
4. 일반 HTML 페이지 빌드
다운로드한 ZIP 파일에 article.html라는 파일이 있습니다. AMP에 상응하는 페이지를 만들려는 도움말입니다.
article.html 샘플에서 코드를 복사하여 새 파일에 붙여넣습니다. 이 파일을 article.amp.html.로 저장합니다.
이제 article.amp.html 파일은 다음과 같이 표시됩니다.
<!doctype html>
<html lang="en">
<head>
<title>News Article</title>
<link href="base.css" rel="stylesheet" />
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
</article>
<img src="mountains.jpg">
</body>
</html>
이 페이지는 뉴스 기사의 일반적인 정적 요소(CSS, 자바스크립트, 이미지 태그)를 사용하여 의도적으로 단순하게 구성했습니다.
지금 단계의 AMP 버전의 기사는 원래 기사를 그대로 옮겨 온 것에 불과합니다. 이를 AMP로 변환해보겠습니다. 먼저 AMP JavaScript 라이브러리 파일을 추가하고 AMP 유효성 검사기를 사용 설정했을 때 표시되는 오류를 확인합니다.
AMP 라이브러리를 포함하려면 <head> 태그 하단에 다음 줄을 추가합니다.
<script async src="https://cdn.ampproject.org/v0.js"></script>
이제 다음 링크를 통해 브라우저에서 새 article.amp.html 페이지를 로드하고 Menu > More Tools > Developer Tools를 통해 Chrome에서 개발자 콘솔을 엽니다.
이제 개발자 콘솔에서 JavaScript 출력을 검사합니다. 콘솔 탭이 선택되어 있는지 확인합니다.
다음과 같은 로그가 표시됩니다.
Powered by AMP ⚡ HTML
이제 AMP 유효성 검사기를 사용 설정하려면 URL에 다음 프래그먼트 식별자를 추가하세요.
#development=1
예를 들면 다음과 같습니다.
http://localhost:8000/article.amp.html#development=1
브라우저에서 페이지를 직접 새로고침해야 할 수 있습니다. 이 버튼을 눌러 브라우저에서 페이지를 수동으로 새로고침할 수 있습니다.
다음과 같은 여러 유효성 검사 오류가 표시됩니다.
AMP는 Accelerated Mobile Pages의 약자이지만 모든 화면 크기에서 잘 렌더링되는 반응형 페이지를 빌드하는 데 사용할 수 있습니다. 자세한 내용은 Google Developers 웹사이트의 반응형 웹 디자인 섹션을 참고하세요.
Chrome 개발자 도구에서 모바일 기기 환경을 시뮬레이션합니다. 여기에서 휴대전화 기기 아이콘을 클릭합니다.
이제 이 메뉴에서 휴대기기('Pixel 2' 등)를 선택합니다.
브라우저에 다음과 같이 모바일로 시뮬레이션된 해상도가 표시됩니다.
이제 작업을 시작할 준비가 되었습니다. 유효성 오류를 하나씩 확인하고 AMP와 어떻게 관련되어 있는지 알아보도록 하겠습니다.
5. 유효성 검사 오류 해결
문자 집합이 필요함
우선 다음 오류를 해결해 보겠습니다.
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
텍스트를 올바르게 표시하려면 페이지의 문자 집합이 설정되어 있어야 합니다. 또한 head 태그의 첫 번째 하위 요소여야 합니다. 이는 메타 문자 집합 태그 전에 추가된 콘텐츠를 다시 해석하지 않기 위해서입니다.
다음 코드를 head 태그의 첫 번째 줄로 추가합니다.
<meta charset="utf-8" />
파일을 저장하고 페이지를 새로고침하여 이 오류가 더 이상 표시되지 않는지 확인합니다.
AMP 파일에는 <link rel=canonical> 태그가 있어야 합니다.
모든 AMP 문서에는 표준 페이지를 참조하는 링크가 있어야 합니다. 따라서 원본 기사 링크를 추가해 보겠습니다.
<meta charset="utf-8" /> 태그 아래에 다음 코드를 추가합니다.
<link rel="canonical" href="/article.html">
이제 필요한 경우 웹 서버를 다시 시작하고 페이지를 새로고침합니다. 여전히 수정해야 할 오류가 많지만 'AMP 파일에 <link rel=canonical> 태그가 있어야 합니다' 오류는 더 이상 표시되지 않습니다.
AMP 속성이 필요함
AMP에서는 페이지를 AMP 문서로 선언하기 위해 페이지의 루트 HTML 요소에 속성이 필요합니다.
The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html' The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.
이 문제는 <html> 태그에 ⚡ 속성을 추가하여 간단히 해결할 수 있습니다.
<!doctype html>
<html ⚡ lang="en">
<head>
...
이제 페이지를 새로고침하고 두 오류가 모두 사라졌는지 확인합니다.
표시 영역 필요
다음으로 다음 오류를 해결합니다.
The mandatory tag 'meta name=viewport' is missing or incorrect.
AMP에는 뷰포트의 width 및 minimum-scale 정의가 필요합니다. 이러한 값은 각각 device-width 및 1로 정의해야 합니다. 표시 영역은 HTML 페이지의 <head>에 포함된 일반적인 태그입니다.
이 문제는 <head> 태그에 다음 HTML 스니펫을 추가하여 해결하는 것이 가장 좋습니다. 다음 meta 태그를 추가합니다.
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<link rel="canonical" href="/article.html">
<!-- The following is the meta tag and viewport information we must add to the page: -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
...
AMP에서 width 및 minimum-scale에 유효한 값은 다음과 같습니다. initial-scale를 정의하는 것은 필수는 아니지만 모바일 웹 개발에 일반적으로 포함되며 권장됩니다. 뷰포트와 반응형 디자인에 관한 자세한 내용은 여기에서 확인할 수 있습니다.
이전과 마찬가지로 페이지를 새로고침하고 오류가 사라졌는지 확인합니다.
외부 스타일시트
다음의 오류는 스타일시트 사용과 관련되어 있습니다.
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.
특히 <head> 태그의 다음 스타일시트 링크 태그에 대해 불만을 제기합니다.
<link href="base.css" rel="stylesheet" />
문제는 이것이 외부 스타일시트 참조라는 것입니다. AMP에서는 문서의 로드 시간을 최대한 빠르게 유지하기 위해 개발자가 외부 스타일시트를 포함할 수 없습니다. 대신 모든 스타일시트 규칙은 AMP 문서에 인라인으로 포함되어야 합니다.
따라서 <head>에서 링크 태그를 삭제하고 다음과 같은 인라인 태그로 바꿉니다.
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
...
</style>
스타일 태그의 콘텐츠는 프로젝트 디렉터리의 base.css 파일에서 직접 복사해야 합니다. 스타일 태그의 amp-custom 속성은 필수입니다.
다시 한번 페이지를 새로고침하고 스타일시트 오류가 사라졌는지 확인합니다.
서드 파티 JavaScript
스타일시트는 인라인을 통해 AMP로 비교적 쉽게 수정할 수 있지만 JavaScript는 그렇지 않습니다.
The tag 'script' is disallowed except in specific forms.
AMP에서는 사용자 생성 스크립트가 허용되지 않습니다. AMP의 스크립트는 다음 두 가지 주요 요구사항을 준수하는 경우에만 허용됩니다.
- 모든 JavaScript는 비동기여야 합니다. 즉, 스크립트 태그에
async속성이 포함되어야 합니다. - AMP 라이브러리와 AMP 구성요소만 포함할 수 있습니다.
이렇게 하면 모든 서드 파티 JavaScript의 사용이 효과적으로 차단됩니다. 한 가지 예외가 있습니다. iframe에서 서드 파티 JavaScript를 사용할 수 있습니다.
외부 base.js 파일을 열어 봅니다. 어떻게 표시되나요? 이 파일에는 자바스크립트 코드가 없어야 하며 다음과 같은 정보의 주석만 포함되어 있어야 합니다.
/* This external JavaScript file is intentionally empty. Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files. */
이 외부 JavaScript 파일은 웹사이트의 기능적 구성요소가 아니므로 참조를 완전히 삭제해도 됩니다.
문서에서 다음 외부 JavaScript 참조를 삭제합니다.
<script type="text/javascript" src="base.js"></script>
이제 페이지를 새로고침하고 스크립트 오류가 사라졌는지 확인합니다.
AMP CSS 상용구
The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. The mandatory tag 'head > style : boilerplate' is missing or incorrect. The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.
다음 오류는 <head> 태그에 누락된 두 개의 태그를 나타냅니다. 모든 AMP 문서에는 다음 태그가 포함되어야 합니다.
<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>
위 코드 스니펫을 문서의 <head> 태그 하단에 추가합니다.
첫 번째 태그는 페이지의 콘텐츠가 렌더링될 준비가 되면 AMP JavaScript 라이브러리가 body 태그를 다시 표시되도록 업데이트할 때까지 페이지의 콘텐츠를 보이지 않게 만듭니다. AMP는 아직 스타일이 지정되지 않은 페이지의 콘텐츠가 표시되지 않도록 하기 위해 이 작업을 실행합니다. 이렇게 하면 페이지의 콘텐츠가 한 번에 표시되고 스크롤 없이 볼 수 있는 모든 항목이 함께 렌더링되므로 사용자 환경이 정말 즉각적으로 느껴집니다. 두 번째 태그는 자바스크립트가 브라우저에서 사용 중지된 경우 이 논리를 되돌립니다.
amp-img 태그
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
AMP에는 이미지 태그를 대체하도록 특별히 설계된 웹 구성요소(amp-img)가 있습니다.
<amp-img src="mountains.jpg"></amp-img>
위의 amp-img 태그를 포함하고 유효성 검사기를 다시 실행해 보세요. 다음과 같이 여러 가지 새로운 오류가 표시될 것입니다.
AMP-IMG# Layout not supported for: container The implied layout 'CONTAINER' is not supported by tag 'amp-img'.
amp-img에서 다른 오류가 발생한 이유는 무엇인가요? amp-img는 기존 HTML img 태그를 직접 대체하지 않기 때문입니다. amp-img를 사용하는 경우 추가 요구사항이 있습니다.
레이아웃 시스템
이 오류는 amp-img가 'container' 레이아웃 유형을 지원하지 않음을 나타냅니다. AMP 설계에서 가장 중요한 개념 중 하나는 웹페이지를 렌더링하는 데 필요한 DOM 리플로우 양을 줄이는 데 중점을 둔다는 것입니다.
DOM 리플로우를 줄이기 위해 AMP에는 페이지를 다운로드하고 렌더링하는 수명 주기에서 가능한 한 빨리 페이지 레이아웃이 최대한 엄격하도록 보장하는 레이아웃 시스템이 포함되어 있습니다.
레이아웃 시스템을 사용하면 페이지의 요소를 다양한 방식으로 배치하고 크기를 조정할 수 있습니다(고정 크기, 반응형 디자인, 고정 높이 등).
여기서는 레이아웃 시스템이 amp-img의 레이아웃 유형을 container 유형으로 추론했습니다. 하지만 컨테이너 유형은 하위 요소를 포함하는 요소용이며 이 오류의 원인인 amp-img 태그와 호환되지 않습니다.
컨테이너 유형이 추론된 이유는 무엇인가요? amp-img 태그의 높이 속성을 지정하지 않았기 때문입니다. HTML에서는 페이지에 있는 요소에 고정된 너비와 높이를 지정함으로써 리플로우를 줄일 수 있습니다. AMP에서는 amp-img 요소의 너비와 높이를 정의하는 것이 좋습니다. 이렇게 하면 AMP가 요소의 가로세로 비율을 이해할 수 있기 때문입니다.
너비와 높이를 다음과 같이 설정합니다.
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>
페이지를 새로고침하고 검사기를 확인하면 더 이상 오류가 표시되지 않습니다. 하지만 이미지가 페이지에 어색하게 배치되어 있어 보기 좋지 않습니다. 화면 크기에 관계없이 이미지를 반응형으로 늘려 페이지에 맞출 수 있으면 좋겠습니다.
놀랍게도 너비와 높이를 정의해도 요소가 완전히 고정된 크기로 제한되지는 않습니다. AMP 레이아웃 시스템은 종횡비를 파악하여 다양한 방식으로 요소를 배치하고 크기를 조정할 수 있습니다. 레이아웃 속성은 요소가 배치되고 크기가 조정되는 방식을 AMP에 알려줍니다.
레이아웃 속성을 responsive로 설정하면 다음을 달성할 수 있습니다.
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
완료되었습니다. 이미지의 가로 세로 비율이 알맞게 변경되었으며 화면 너비에 맞춰 화면을 채우고 있습니다.
완료되었습니다.
이제 AMP 문서가 다음과 같이 표시됩니다.
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/article.html">
<link rel="shortcut icon" href="amp_favicon.png">
<title>News Article</title>
<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>
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
header {
background: Tomato;
color: white;
font-size: 2em;
text-align: center;
}
h1 {
margin: 0;
padding: 0.5em;
background: white;
box-shadow: 0px 3px 5px grey;
}
p {
padding: 0.5em;
margin: 0.5em;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
</article>
</body>
</html>
페이지를 새로고침하고 콘솔 출력을 확인합니다. 다음 메시지가 표시되어야 합니다.
AMP validation successful.
자주 묻는 질문(FAQ)
6. 표준 URL, 메타데이터, 검색
새로운 AMP 이니셔티브의 일환으로 Google 검색 결과 인터페이스에서 유효한 AMP 문서가 새로운 캐러셀 인터페이스의 일부로 강조 표시됩니다. 이 인터페이스는 웹에서 기사를 검색하는 사용자에게 더 나은 사용자 환경을 제공합니다. 이 환경을 최대한 개선하려면 포함된 페이지가 AMP 유효성 검사기를 통과하는 것 외에도 특정 기준을 충족해야 합니다.
이 단계에서는 전체 요구사항을 간략하게 설명합니다.
표준 페이지와 AMP 문서 연결
AMP는 웹을 더 빠르게 만드는 것을 목표로 하며, 초기에는 정적 콘텐츠에 더 중점을 두었지만 amp-bind와 같은 구성요소가 추가되어 뉴스 게시자, 전자상거래, 여행 웹사이트, 블로그 등 다양한 사이트에 적합합니다.
하지만 AMP가 웹사이트 구조 내에서 어떻게 위치해야 하는지 전체 범위를 이해하는 것이 중요합니다. AMP를 사용하여 전체 웹사이트를 빌드할 수 있지만 많은 게시자는 AMP 문서를 게시자가 웹사이트에 호스팅하는 일반 HTML 문서의 보조로 생성하는 페어링된 접근 방식을 사용하는 것을 선호합니다.
일반 HTML 페이지에서 표준 연결이란 여러 페이지에 동일한 콘텐츠가 포함되어 있을 때 어떤 페이지를 선호하는 페이지로 간주할지 결정하는 일반적인 기술입니다. AMP 문서는 웹사이트의 기존 기사 페이지와 함께 사용할 수 있도록 생성될 수 있으므로 기존 HTML 페이지를 '표준' 페이지로 취급해야 합니다.
Google은 이미 AMP 문서에서 <head>에 표준 페이지로 연결되는 링크 태그를 포함하여 이를 달성하기 위한 첫 번째 단계를 취했습니다.
<link rel="canonical" href="/article.html">
다음 단계는 표준 기사를 AMP 페이지에 연결하는 것입니다. 표준 문서의 <head> 섹션에 <link rel="amphtml"> 태그를 포함하면 됩니다.
article.html 파일의 <head> 섹션에 다음 코드를 추가합니다.
<link rel="amphtml" href="/article.amp.html">
아래의 그림에는 링크 태그의 경로가 나와 있습니다.
Google 검색 크롤러가 일반 HTML 표준 문서와 AMP 문서 간의 관계를 이해하려면 이 양방향 연결을 설정해야 합니다. 링크가 제공되지 않으면 크롤러가 일반 HTML 문서의 'AMP 버전'이 어떤 기사인지 명확하게 알 수 없습니다. 이 링크를 명시적으로 제공해야 모호한 부분이 사라집니다.
Schema.org 검색엔진 메타데이터
AMP 문서가 새 캐러셀 인터페이스에 표시되려면 Schema.org의 검색엔진 메타데이터 사양을 준수해야 합니다. 이 메타데이터는 application/ld+json 유형 스크립트 태그를 통해 문서의 <head> 태그에 포함됩니다.
AMP 문서의 <head> 섹션 하단에 다음 코드를 추가합니다.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
"@type": "ImageObject",
"url": "https://example.com/article_thumbnail1.jpg",
"height": 800,
"width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "⚡ AMP Times",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/amptimes_logo.jpg",
"width": 600,
"height": 60
}
},
"description": "My first experience in an AMPlified world"
}
</script>
브라우저에서 페이지를 새로고침하고 AMP 유효성 검사 오류가 발생하지 않았는지 다시 확인합니다.
이제 새 브라우저 창에서 구조화된 데이터 유효성 검사 도구를 열고 '마크업 테스트'를 클릭합니다. 그런 다음 '코드 스니펫' 탭을 선택하고 AMP 페이지에서 전체 소스 코드를 복사하여 유효성 검사 도구의 텍스트 편집기 패널에 붙여넣고 '테스트 실행'을 클릭합니다.
페이지에 다음과 같이 표시됩니다.
AMP 기반 뉴스 기사의 새로운 Google 검색 캐러셀에 표시되기 위한 주요 요구사항은 다음과 같습니다.
- AMP 문서의 유효성을 검사합니다.
- <link> 태그를 통해 기존 HTML 페이지에서 AMP 문서를 참조하고 그 반대도 가능합니다.
- 위의 검색엔진 메타데이터 태그를 포함합니다.
페이지 검색에 대해 자세히 알아보세요.
7. 축하합니다.
코드 실습을 완료하고 AMP 문서의 여러 기본 개념을 살펴봤습니다.
이러한 개념과 기능을 AMP 문서에서 구현하는 방법을 이해했을 뿐만 아니라 AMP가 이러한 방식으로 설계된 이유도 이해하셨기를 바랍니다.
다음은 기술을 더욱 강화하는 데 도움이 되는 추가 주제와 링크입니다.