유효성 검사는 AMP 페이지에 문제가 있을 때 알려주며, 페이지의 어느 부분에서 문제가 발생했는지 알 수 있기 때문에 매우 유용합니다. AMP 페이지의 유효성을 검사하지 않으면 AMP 캐시에 포함되지 않습니다. 즉, 클릭함과 동시에 즉시 로드되는 페이지를 만들지 못합니다.
이제 유효성 검사를 해볼 차례입니다. AMP 페이지를 검증할 수 있는 몇 가지 방법이 있습니다.
- 개발자 도구 콘솔
- 온라인 유효성 검사
- 커맨드 라인 유효성 검사
개발자 도구 콘솔
개발자 도구 콘솔은 페이지 유효성 검사를 시작하는 가장 쉬운 방법입니다. 유효성
검사기는 AMP-JS 라이브러리에 포함되어 있으므로 모든 AMP 페이지를 유효성 검사할
수 있습니다. 브라우저에서 페이지를 열고 URL에
#development=1을 추가하면 URL은 다음과 같이 보일 것입니다.
https://googleblogamp.blogspot.com/?amp=1#development=1
또는 로컬에서 작업하는 경우 URL은 다음과 같습니다.
http://localhost/test.html#development=1
개발자 도구 콘솔 창을 연 상태에서 페이지를 새로 고침합니다. 콘솔에 다음과 같은 빨간색 오류 메시지가 출력됩니다.
이것은 각각 AMP 페이지의 문제점에 대해 알려줍니다. AMP의 모든 이점을 얻으려면 페이지를 수정하여 이러한 오류들을 해결해야 합니다. 유효성 검사로 발견된 오류를 수정하는 것은 AMP 페이지 구현 과정에서 중요한 부분입니다.
온라인 유효성 검사
validator.ampproject.org는 온라인 AMP 유효성 검사 도구입니다. 브라우저 개발자 도구의 유효성 검사기와 매우 비슷합니다. 페이지 유효성 검사를 진행하고 유효하지 않은 경우 오류를 알려줍니다. 온라인 유효성 검사의 장점은 다음 이미지와 같이 오류를 일으킨 코드 바로 아래에 오류를 표시한다는 것입니다.
커맨드 라인 유효성 검사
컴퓨터에 Node.js가 설치되어 있으면 커맨드 라인(command line) 유효성 검사 도구를 사용하여 로컬 파일과 원격 파일을 모두 검사할 수 있습니다. 이 도구의 장점은 페이지의 유효성을 자동으로 검사하고 예상하지 못한 유효성 검사 에러가 발생하면 바로 알 수 있다는 것입니다. 이는 실수로 잘못된 AMP 페이지를 게시하지 않도록 하는데 도움이 됩니다.
유효하지 않은 AMP 페이지를 구글에 제출하면 AMP 번개 배지를 받지 못한다거나, 검색 결과에서 AMP 캐러셀 콘텐츠가 나타나지 않을 수 있습니다.
다음을 사용하여 커맨드 라인 유효성 검사를 할 수 있습니다.
npm istall -g amphtml-validator
페이지를 확인하려면 다음과 같이 작성합니다.
amphtml-validator http://googleblogamp.blogspot.com/?amp=1
확인이 되면 다음과 같이 표시됩니다.
http://googleblogamp.blogspot.com/?amp=1 : PASS
만약 유효성 검사에 실패한 경우 다음과 같이 오류가 출력됩니다.
AMP 유효성 검사 오류 수정
대부분의 경우 간단하게 작업을 처리할 수 있는 개발자 도구 콘솔 유효성 검사기를 사용합니다. 아무것도 설치하지 않아도 되고 가장 쉽게 시작할 수 있기 때문입니다. 개발자 도구는 Windows에서는 Ctrl + Shift + i 또는 F12로, Mac에서는 Cmd + Opt + i로 열 수 있습니다.
AMP 유효성 검사기를 활성화하려면 브라우저 주소 표시줄 URL 끝에
#development=1을 추가하고, 개발자 도구 콘솔을 연 상태에서
페이지를 새로 고침합니다. URL은 다음과 같습니다.
https://googleblogamp.blogspot.com/?amp=1#development=1
이전의 이미지들과 비슷한 오류들이 표시되어야 합니다. 각각의 오류 밑에는 세 가지 중요한 정보가 포함됩니다.
- 오류가 발생한 파일 이름
- 오류의 줄 번호 및 글자 번호
- 오류에 대한 설명
이 정보를 참고하면 오류가 발생한 AMP-HTML 코드를 정확히 찾을 수 있습니다.
페이지의 유효성은 다음과 같이 확인 할 수 있습니다.
유효하지 않은 AMP 오류를 확인하기 위해
<link rel="canonial"...>으로 시작하는 줄을
제거해보겠습니다. 그리고 다시 페이지 URL 주소 뒤에
#development=1을 추가한 후 새로고침 합니다. 그렇다면 다음과 같이
필수 구성 요소인 canonical 태그가 누락되었음을 알려줍니다.
페이지의 유효성을 확인하기 위해 제거했던 코드를 다시 추가합니다. 그런데 AMP는 HTML 기반이기 때문에 유효성 검사에서 오류 메시지가 출력되더라도 대부분의 브라우저에서 정상적으로 렌더링 됩니다. 하지만 이렇게 되면 즉시 로드할 수 있는 AMP 캐시의 이점은 사라지게 됩니다.