워드프레스 AMP 오류 해결, 이 방법이면 끝!

워드프레스를 활용해 블로그나 웹사이트를 운영하다 보면, 빠른 페이지 로딩을 위해 AMP(Accelerated Mobile Pages)를 도입하는 경우가 많습니다. AMP는 특히 모바일 환경에서 콘텐츠를 즉시 로드하게 만들어 사용자 경험을 크게 향상시킵니다. 그러나 AMP를 적용하면서 다양한 오류가 발생하는 경우가 많고, 이로 인해 검색 노출에 악영향을 미치거나 디자인이 깨지는 등의 문제가 발생할 수 있습니다. 이러한 문제를 무시하게 되면 오히려 SEO 점수가 하락하고, 사이트 품질 평가에서도 불이익을 받을 수 있습니다.

AMP 오류는 주로 HTML 구조의 제약, CSS 제한, JavaScript 사용 금지 등의 기술적인 제약에서 비롯됩니다. 뿐만 아니라, 워드프레스 자체 플러그인 간 충돌, 테마와의 호환성 부족, 설정 미스 등도 오류의 주요 원인 중 하나입니다. 따라서 AMP 오류 해결을 위해서는 단순히 AMP 플러그인을 설치하는 것을 넘어서, 구조적인 점검과 전략적인 수정이 필요합니다.

워드프레스 AMP 오류

이번 글에서는 워드프레스에서 발생하는 AMP 문제의 원인과 해결 방법을 매우 구체적으로, 단계별로 정리해 드리겠습니다. 특히 AMP 오류로 인해 검색콘솔에서 경고 메시지를 받거나, 콘텐츠 노출이 제한되는 문제를 겪고 있는 분들이라면 반드시 끝까지 정독하시길 바랍니다. 전체 글은 약 10000자 이상의 분량으로, AMP 오류에 대해 상세히 분석하고, 실질적인 해결책을 제시합니다.

AMP란 무엇인가, 그리고 왜 필요한가?

AMP(Accelerated Mobile Pages)는 구글이 중심이 되어 만든 오픈소스 프로젝트입니다. 목적은 하나, 모바일 환경에서의 속도 향상입니다. 점점 더 많은 사용자가 스마트폰을 통해 웹 콘텐츠에 접근하면서, 페이지 로딩 속도는 사용자 이탈률과 직결되는 핵심 요소가 되었습니다.

AMP는 HTML을 단순화하고, JavaScript를 제한하며, 캐시 서버를 이용하여 로딩 속도를 극대화합니다. 특히 구글 검색 결과에서 AMP 페이지는 번개 아이콘과 함께 상단에 노출되며, 뉴스 콘텐츠에서는 Top Stories 캐러셀에 포함될 수 있는 이점이 있습니다.

하지만 AMP는 표준 웹기술의 일부를 제한하거나 변경하기 때문에, 기존 워드프레스 구조와는 충돌이 발생할 수 있습니다. 워드프레스는 다양한 플러그인, 위젯, 커스텀 스크립트를 포함하고 있어 AMP와 충돌 가능성이 매우 높습니다.

AMP 관련 대표적인 오류 유형들

가장 자주 나타나는 AMP 오류들은 다음과 같습니다.

• 허용되지 않는 HTML 태그 사용
• 스타일(CSS) 크기 초과
• JavaScript 사용 불가 오류
• 필수 태그 누락 (예: <amp-img> 대신 <img> 사용 등)
• AMP 버전의 URL에서 404 오류
• 플러그인 충돌로 인한 렌더링 오류

이러한 오류는 구글 서치콘솔이나 AMP Validator에서 쉽게 확인할 수 있으며, 각 오류의 해결 방법도 조금씩 다릅니다. 특정 오류가 반복된다면, 테마나 플러그인 수준에서 수정이 필요할 수 있습니다.

AMP 플러그인 선택 시 주의할 점

워드프레스에서 AMP를 구현하려면 대부분 플러그인을 사용하게 됩니다. 대표적인 AMP 플러그인은 아래와 같습니다.

• AMP by Automattic: 공식 AMP 플러그인으로, 안정성은 높지만 기능은 제한적입니다.
• AMP for WP – Accelerated Mobile Pages: 커스터마이징 기능이 풍부하지만, 다양한 기능으로 인해 충돌 가능성이 높습니다.

플러그인 선택 시에는 다음 사항을 고려해야 합니다.

• 최근 업데이트 여부
• 워드프레스 버전과의 호환성
• 사용 중인 테마와의 호환성
• 리뷰와 사용자 피드백
• AMP 유효성 검증 기능 포함 여부

가능하다면 기본 AMP 플러그인을 설치하고, 다른 기능은 별도로 AMP 호환성을 고려한 커스텀 코딩을 추천합니다.

Google Search Console에서 AMP 오류 확인 방법

구글 서치콘솔은 AMP 오류를 확인하는 가장 확실한 도구입니다. 로그인 후 왼쪽 메뉴에서 "모바일 사용 편의성" 또는 "AMP" 섹션으로 이동하면 오류가 있는 페이지와 상세 오류 메시지를 확인할 수 있습니다.

오류 유형에 따라 "잘못된 태그", "허용되지 않는 속성", "필수 요소 누락" 등이 표시됩니다. 각각의 오류는 해당 페이지의 AMP 버전 HTML을 검토하고 수동으로 수정해야 할 수도 있습니다.

AMP Validator로 실시간 테스트하기

Google AMP Validator 또는 크롬 브라우저 확장 프로그램을 통해 실시간 AMP 검증이 가능합니다. 다음 방법을 추천드립니다.

• AMP 페이지 URL 뒤에 #development=1을 추가한 후, 브라우저 개발자 도구 콘솔에서 오류 확인
• https://search.google.com/test/amp 접속 후 URL 입력
• AMP Validator Chrome Extension 설치

이렇게 확인된 오류는 빠르게 수정하여 AMP의 유효성을 확보해야 합니다.

CSS 용량 초과 문제 해결법

AMP는 CSS 파일 용량을 75KB로 제한합니다. 이는 모든 스타일을 인라인으로 삽입하는 방식이기 때문에 발생하는 제한입니다. 해결 방법은 다음과 같습니다.

• 사용하지 않는 CSS 제거 (UnCSS, PurifyCSS 사용)
• 간결한 스타일링만 유지
• 외부 폰트, 애니메이션, 아이콘 폰트 제거
• 플러그인에서 삽입하는 스타일 최소화

functions.php에 조건문을 삽입하여 AMP 페이지에서는 일부 스타일이나 기능을 비활성화할 수도 있습니다.

JavaScript 사용 제한과 대체 방법

AMP는 JavaScript 사용을 거의 금지합니다. 따라서 기존 테마나 플러그인에서 사용하는 인터랙션 요소는 대부분 AMP에서 동작하지 않습니다. 대체 방법은 다음과 같습니다.

• <amp-carousel>, <amp-accordion>, <amp-form> 등의 AMP 전용 컴포넌트 사용
• 필요한 기능만 선택적으로 구현
• AMP 페이지에서는 JavaScript 기반 위젯이나 스크립트를 제거

구현 가능 여부에 따라 AMP 페이지와 일반 페이지를 분리 운영하는 것도 좋은 방법입니다.

테마와의 호환성 문제 해결

AMP 호환성은 테마의 구조에 크게 의존합니다. 특히 커스텀 템플릿, 자바스크립트 요소, 외부 위젯 등을 많이 사용하는 테마는 AMP와 충돌하기 쉽습니다. 해결 방법은 다음과 같습니다.

• 기본 테마(Twenty Twenty-One 등)를 사용하여 테스트
• is_amp_endpoint() 조건문으로 AMP 페이지에서 불필요한 요소 제거
• 자식 테마를 만들어 AMP 전용 템플릿 제작

가능하다면 AMP 지원을 염두에 두고 제작된 테마를 사용하는 것이 가장 효과적입니다.

플러그인 충돌 문제 분석 및 해결

다수의 플러그인이 AMP 호환을 고려하지 않고 제작되었습니다. 대표적인 충돌 플러그인은 다음과 같습니다.

• 팝업 플러그인 (Popup Maker, OptinMonster 등)
• 캐러셀, 슬라이더 플러그인
• 애널리틱스, 광고 삽입 플러그인

AMP 페이지에서는 이러한 플러그인을 비활성화하거나 대체 AMP 호환 플러그인을 사용하는 것이 좋습니다.

AMP 전용 템플릿 구성 전략

효율적인 AMP 운영을 위해서는 AMP 전용 템플릿을 구성하는 것이 매우 중요합니다. 방법은 다음과 같습니다.

• amp-single.php, amp-page.php 등의 템플릿 파일 생성
• functions.php에서 AMP 템플릿 적용 로직 추가
• AMP에서만 보이는 헤더, 푸터, 본문 구성

이렇게 별도의 AMP 구조를 구성하면, 디자인 깨짐 문제 없이 AMP 유효성 검사를 통과할 수 있습니다.

이미지 및 동영상 삽입 시 주의사항

AMP는 <img>, <video>, <iframe> 등의 요소 사용에 제한을 둡니다. 이를 대체하려면 다음 AMP 컴포넌트를 사용해야 합니다.

• <amp-img>: 이미지 삽입
• <amp-video>: HTML5 비디오
• <amp-youtube>: 유튜브 영상
• <amp-iframe>: 외부 콘텐츠

각 태그에 width, height, layout 속성을 필수로 지정해야 하며, 그렇지 않으면 오류가 발생합니다.

폰트 및 외부 리소스 최적화

웹폰트와 외부 리소스는 AMP의 속도와 유효성에 영향을 줍니다. 다음 방법으로 최적화하세요.

• Google Fonts 사용 시 <link>가 아닌 AMP 방식으로 로딩
• 불필요한 외부 CSS, JS 호출 제거
• 아이콘 폰트 대신 SVG 사용

폰트는 AMP 캐시에 의해 사전 로딩되며, 반드시 preconnect 링크를 사용해야 합니다.

AMP 광고 최적화 전략

AMP에서도 광고를 삽입할 수 있습니다. 대표적인 AMP 광고 태그는 <amp-ad>입니다. 광고 삽입 시 주의사항은 다음과 같습니다.

• Google AdSense AMP 코드 사용
• layout="responsive" 설정
• 광고 로딩에 문제가 발생할 경우, AMP Validator에서 검사 필수

AMP 페이지에서도 광고 수익을 유지하려면 AMP 친화적인 광고 솔루션을 사용해야 합니다.

AMP와 SEO의 관계

AMP는 SEO에 긍정적인 영향을 줄 수 있지만, 무조건 AMP를 사용한다고 해서 검색 순위가 올라가는 것은 아닙니다. AMP의 핵심은 속도이며, 이는 UX 개선으로 이어집니다. 특히 모바일 중심의 콘텐츠 소비가 많은 사이트일수록 AMP의 효율은 높습니다.

AMP 페이지가 유효성을 확보하면 구글은 해당 페이지를 검색결과에서 우선적으로 노출할 가능성이 높습니다.

AMP에서 댓글 기능 유지하는 방법

워드프레스의 기본 댓글 기능은 AMP에서도 비교적 잘 작동하지만, 일부 플러그인 댓글 시스템은 AMP에서 작동하지 않습니다. 해결 방법은 다음과 같습니다.

• 기본 워드프레스 댓글 기능 사용
• <amp-form>을 활용한 커스텀 댓글 시스템 구현
• Disqus AMP 호환 버전 사용

비 AMP 호환 댓글 시스템은 AMP 페이지에서 비활성화 처리하는 것도 방법입니다.

AMP 버전과 일반 페이지 병행 운영 전략

모든 페이지를 AMP로 전환할 필요는 없습니다. 다음 전략이 추천됩니다.

• 주요 콘텐츠, 블로그 글만 AMP 적용
• 제품 상세 페이지, 결제 페이지 등은 AMP 제외
• AMP 페이지와 일반 페이지의 URL 분리 (예: ?amp=1)

AMP를 적용할 페이지를 전략적으로 선택하면 운영 효율이 높아집니다.

AMP 캐시 문제 해결법

구글 AMP 캐시는 AMP 페이지를 빠르게 제공하기 위해 사용되지만, 업데이트가 반영되지 않는 문제가 있습니다. 해결 방법은 다음과 같습니다.

• update-cache API 사용
• 페이지 구조가 바뀔 경우 AMP 버전 URL 강제 갱신
• 검색콘솔에서 AMP URL 재검사 요청

캐시를 수동으로 갱신하여 최신 콘텐츠가 노출되도록 해야 합니다.

AMP UX 개선 팁

AMP의 디자인 제약이 있다고 해도 UX는 포기할 수 없습니다. 다음 팁을 활용하세요.

• <amp-sidebar>로 메뉴 구현
• <amp-accordion>으로 FAQ 구성
• <amp-carousel>로 이미지 갤러리 구현

AMP 전용 컴포넌트를 적극 활용하여 사용자 경험을 극대화하세요.

AMP 미지원 콘텐츠 처리 방법

일부 콘텐츠는 AMP에서 지원되지 않을 수 있습니다. 이럴 때는 조건문을 사용하여 AMP에서 해당 콘텐츠를 제외하세요.

 

if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) { // AMP에서 제외할 콘텐츠 }

 

 

또는 AMP와 비AMP 콘텐츠를 아예 분리해 운영하는 것도 좋은 전략입니다.

AMP를 포기해야 할 때는 언제인가?

AMP는 유용한 기술이지만, 모든 사이트에 맞는 것은 아닙니다. 다음의 경우 AMP 적용을 다시 고려해보세요.

• 디자인 자유도가 중요한 브랜드 사이트
• 자바스크립트 기반 기능이 핵심인 서비스
• 광고 수익에 의존하는 콘텐츠 사이트

이럴 경우 페이지 속도 개선을 다른 방식으로 추구하는 것이 더 효과적일 수 있습니다.

---

애드센스 수익 최적화를 위한 구글 블로그 무료 테마 BEST 20 - 설치 링크 포함

---

FAQ (자주 묻는 질문)

Q1. AMP 플러그인 하나만 설치하면 모든 문제가 해결되나요?
A. 아닙니다. 플러그인만으로는 모든 AMP 유효성 문제를 해결할 수 없습니다. 구조적인 HTML 수정이 필요한 경우가 많습니다.

Q2. AMP를 적용하면 사이트 속도가 얼마나 빨라지나요?
A. 페이지 구성과 이미지 등에 따라 다르지만, 일반적으로 AMP 적용 시 로딩 속도가 30~80% 개선됩니다.

Q3. AMP는 데스크탑에도 적용되나요?
A. 일반적으로 AMP는 모바일 페이지에만 적용됩니다. 데스크탑은 기존 페이지를 유지합니다.

Q4. AMP 오류가 검색순위에 영향을 주나요?
A. AMP 유효성 오류는 AMP 페이지의 검색 노출을 제한하며, 전반적인 페이지 신뢰도에도 영향을 줄 수 있습니다.

Q5. 모든 페이지에 AMP를 적용해야 하나요?
A. 아닙니다. 블로그 글처럼 자주 노출되는 콘텐츠에만 적용해도 충분한 효과를 볼 수 있습니다.

Q6. AMP에서도 애드센스 광고가 나오나요?
A. 가능합니다. 단, AMP 전용 광고 코드를 사용해야 하며, <amp-ad> 태그를 사용해야 합니다.

Q7. AMP 오류 수정 후 얼마나 지나야 반영되나요?
A. 일반적으로 서치콘솔에 다시 제출 후 수시간~수일 내에 반영됩니다.

Q8. AMP를 중지하면 사이트에 악영향이 있나요?
A. 중지 자체가 문제가 되진 않지만, AMP 페이지로 노출되던 URL은 리디렉션 처리 등 후속 조치가 필요합니다.

 

홍콩 전기 콘센트 변환 어댑터 종류 총정리! 여행 전 필수템