2016년 9월 19일 월요일
사이트의 Accelerated Mobile Pages를 제작(#AMPlify)할 때 페이지의 유효성 검사 상태를 주기적으로 확인하는 것이 중요합니다. 유효한 AMP 페이지만 Google 검색에 표시되기 때문입니다.
AMP를 구현할 때 페이지에 오류가 포함되어 이로 인해 Google 검색에서 색인을 생성하지 못할 수 있습니다. 페이지에는 권장사항이 아닌 구성요소나 추후 오류가 될 수 있는 구성요소인 경고도 포함될 수 있습니다.
Google Search Console은 Google에서 어떤 AMP 페이지를 오류로 파악했는지를 확인할 수 있게 하는 무료 서비스입니다. 어떤 URL에 문제가 발생했는지 알게 되면 몇 가지 손쉬운 도구를 통해 쉽게 유효성 검사 오류 세부정보를 확인할 수 있습니다.
브라우저 개발자 도구
개발자 도구를 사용하여 유효성을 검증하려면 다음 단계를 따르세요.
- 브라우저에서 AMP 페이지를 엽니다.
-
URL에
#development=1을 추가합니다(예:https://localhost:8000/released.amp.html#development=1). - Chrome DevTools Console을 열고 유효성 검사 오류를 확인합니다.
개발용 콘솔 오류는 다음과 같이 표시됩니다.
AMP 브라우저 확장 프로그램
AMP 브라우저 확장 프로그램(Chrome 및 Opera에서 사용 가능)을 사용하여 유효하지 않은 AMP 페이지를 재빨리 파악하고 디버깅할 수 있습니다. 사이트를 탐색할 때 확장 프로그램이 방문한 모든 AMP 페이지를 평가하고 페이지의 유효성 여부를 표시합니다. 다음 표는 AMP 마크업의 유효성에 따라 확장 프로그램에 표시될 수 있는 여러 아이콘을 보여줍니다.
|
AMP 페이지 내에 오류가 있으면 확장 프로그램 아이콘이 빨간색으로 표시되며 발생한 오류의 수를 표시합니다. |
|
AMP 페이지 내에 오류가 없으면 확장 프로그램 아이콘이 녹색으로 표시되며 경고가 있다면 경고의 수를 표시합니다. |
|
AMP는 아니지만 AMP 버전을 사용할 수 있는 페이지인 경우 링크 아이콘과 함께 아이콘이 파란색으로 표시되며 확장 프로그램을 클릭하면 AMP 버전으로 브라우저가 리디렉션됩니다. |
확장 프로그램을 사용하면 확장 프로그램 아이콘을 클릭하여 페이지에 있는 오류나 경고를 확인할 수 있습니다. 모든 문제에 소스 줄, 소스 열, 문제가 무엇인지 나타내는 메시지가 표시됩니다. 문제에 관한 자세한 설명이 있는 경우 '자세히 알아보기' 링크를 사용해 ampproject.org의 관련 페이지로 이동합니다.
AMP 웹 유효성 검사 도구
validator.ampproject.org에서 이용할 수 있는 AMP 웹 유효성 검사 도구는 AMP 페이지의 유효성을 검사할 수 있는 간단한 웹 UI를 제공합니다.
도구를 사용하려면 AMP URL을 입력하거나 소스 코드를 복사/붙여넣기하세요. 그러면 웹 유효성 검사 도구가 줄 사이에 오류 메시지를 표시합니다. 웹 유효성 검사 도구에서 코드를 직접 수정할 수 있으며 유효성 재검사가 실행되어 내가 제안한 수정사항을 적용하면 문제를 해결할 수 있는지 알려줍니다.
어떤 AMP 페이지 상태 확인 방법을 선호하시나요? 아래에 댓글로 의견을 공유해 주세요. Google 웹마스터 Google+ 페이지에서도 의견을 알려주실 수 있습니다. 궁금한 점이 있거나 도움이 필요하면 웹마스터 도움말 포럼에 질문을 올려 주시기 바랍니다.