AMP 상용구(boilerplate)와 관련된 오류를 살펴보겠습니다. AMP 상용구와 관련된
오류는 일반적으로 문서의 끝에서 발생하며 일반적으로 다음과 같이
"The manadatory tag ..."라는 텍스트와 함께 표시됩니다:
test.html:2:0 The mandatory attribute '⚡' is missing in tag 'html'.
test.html:2:0
필수 속성 '⚡'이 'html' 태그에 없습니다.
이 오류 메시지는 html 태그와 관련이 있습니다. 2번째 줄, 0번째 글자에서 문제가
발생합니다. AMP 문서는 <html ⚡> 또는
<html amp>로 시작해야 합니다. 코드를 변경하고 새로고침하면
이 오류는 해결됩니다.
만약 여기 예시의 줄 번호와 정확히 일치하지 않더라도 걱정하지 마세요. 오류를 수정하고 HTML을 변경하면 라인 번호가 달라질 수 있습니다. 앞으로 나머지 예제에서는 라인 번호를 생략합니다.
그 다음 오류는 아래와 같습니다.
The mandatory tag 'link rel=canonical' is missing or incorrect.
필수
태그 'link rel=canonical'이 누락되었거나 잘못되었습니다.
이 문제를 해결하는 방법은 자기 자신 또는 해당 데스크톱 페이지을 가리키는 표준 태그를 추가하면 됩니다.
<link rel="canonical" href="https://googleblogamp.blogspot.com"/>
로컬 웹 서버를 사용하는 경우 표준 태그는 다음과 같습니다.
<link rel="canonical" href="https://localhost/test.html"/>
그 다음 오류는 아래와 같습니다.
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
필수
태그 'meta charset=utf-8'이 누락되었거나 올바르지 않습니다.
이 문제도 해결할 수 있습니다. <html> 태그 바로 뒤에
<meta charset = "utf-8">을 추가하면
됩니다.
<meta charset = "utf-8">
그 다음 오류는 아래와 같습니다.
The mandatory tag 'meta name=viewport' is missing or incorrect.
필수
태그 'meta name=viewport'가 누락되었거나 올바르지 않습니다.
이를 위해 AMP 페이지에 다음을 추가해야 합니다.
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
그런 다음 나머지 세 가지 오류가 더 있습니다.
The mandatory tag 'noscript enclosure for boilerplate' is missing or
incorrect.
필수 태그 '보일러 플레이트 용 noscript 엔클로저'가
누락되었거나 올바르지 않습니다.
The mandatory tag 'head > style[amp-boilerplate]' is missing or
incorrect.
필수 태그 'head > style [amp-boilerplate]'가 누락되었거나
잘못되었습니다.
The mandatory tag 'noscript > style[amp-boilerplate]' is missing or
incorrect.
필수 태그 'noscript > style [amp-boilerplate]'가
누락되었거나 잘못되었습니다.
이 세 가지 오류는 모두 동일한 문제(필수 태그인
<style amp-boilerplate> 누락)로 인해 발생합니다.
amp boilerplate를 추가하면 세 가지 오류를 함께 해결할 수 있습니다.
각 오류를 수정할 때마다 새로 고침을 누르고 개발자 도구 콘솔을 확인합니다. 점점 오류 목록이 없어질 것입니다. 지금까지 필수 마크업인 AMP boilerplate 코드와 관련된 오류를 처리해 보았습니다.