AMP 맞춤 자바스크립트 오류는 AMP 오류 중 가장 흔한 오류입니다. 맞춤 자바스크립트 오류 발생 원인과 "맞춤 자바스크립트는 허용되지 않습니다." 문제를 해결하는 방법에 대해 알아봅니다.
맞춤 자바스크립트란?
AMP 페이지 내에서 허용되지 않는 모든 자바스크립트를 말합니다. 맞춤
자바스크립트는 사용자 정의 자바스크립트, 외부 자바스크립트 또는 타사
자바스크립트라고도 불립니다. <script> ... </script>의
형태이며, jquery.js가 대표적입니다.
<!-- custom javascript --> <script src="https://code.jquery.com/jquery-latest.min.js"></script>
AMP의 자바스크립트 제한
오늘날 자바스크립트는 애니메이션, DOM 변경 등의 형태로 사용자와 상호 작용을 하는 데 도움이 되므로 페이지에서 중요한 역할을 합니다. 하지만 페이지에 속도를 늦추고 다른 콘텐츠가 페이지에서 렌더링되는 것을 방해할 수 있기 때문에 자바스크립트는 AMP 페이지 내에서 엄격히 허용되지 않습니다.
AMP에는 많은 구성 요소가 추가되어 있으며 일부는 기존 html 태그를 대체합니다. 예를 들어 amp-img, amp-iframe, amp-video, amp-lightbox, amp-animations 등.
이 AMP 구성 요소 각각에 대해 로드 될 자바스크립트 파일이 따로 있습니다. AMP 구성 요소와 관련된 자바 스크립트 파일만 페이지에서 허용되며 다른 자바스크립트는 허용되지 않습니다.
자바스크립트가 특정 상황에서 AMP 성능을 방해하지 않도록 하려면 다음과 같이 할 수 있습니다.
- AMP 런타임을 로드합니다.
- AMP 구성 요소를 포함합니다.
- type="application/ld+json"으로 설정된 JSON 데이터를 로드합니다.
- 모든 스크립트 태그는 기본 렌더링을 차단하지 않도록 비동기로 선언되어야 합니다.
해결 방법
AMP 플러그인을 사용하면 기존 HTML을 AMP-HTML으로 자동으로 변환해줍니다. 그러나 사용자가 임의로 HTML에 자바스크립트를 추가하는 경우 이렇게 맞춤 자바스크립트 에러 메시지가 출력됩니다.
맞춤 자바스크립트를 제거하지 않으면 유효성 검사에서 오류가 계속 발생합니다. AMP 페이지에서는 AMP 용 자바스크립트만 사용해야 합니다.
따라서 이 오류를 수정하려면 AMP 문서에서 다음과 같은 줄을 모두 제거할 수 있습니다.
<script src="script.js"></script>
<script type="text/javascript" src="script.js"></script>
AMP 유효성 검사 도구(AMP Validator)를 사용하면 오류가 발생한 위치를 쉽게 찾을 수 있습니다. 맞춤 자바스크립트를 제거한 후 반드시 유효성 검사를 진행하여 페이지가 유효한 AMP 페이지인지 확인합니다.
AMP 페이지가 유효하지 않다면 구글 검색 결과에서 즉시 로드되는 AMP의 장점을 얻지 못하고 번개 표시 인증 마크도 없어집니다.
구글 서치 콘솔에서 이 "맞춤 자바스크립트는 허용되지 않습니다." 오류는 해결될 때까지 걸리는 시간이 빠르면 2~3일, 느리면 2주 넘게 소요되는 경우도 있습니다. 일단 색인이 생성되면 오류 수정이 쉽지 않아 스트레스를 받을 수 있습니다.
글을 작성할 때 초안을 꼼꼼히 검토하여 오류가 없는지 확인한 후 게시하고, 또한 AMP에서 제공하는 기본 구성 요소를 충분히 활용합시다.