[워드프레스 최적화] AMP 오류 – ‘amp-iframe’ 태그의 ‘src’ 속성의 URL이 누락

Updated on 2018-12-15 by

구글에서 제안하는 모바일에서 웹 페이지 속도를 강화하기 위한 AMP는 광장히 까다롭게 관리됩니다.

그 규정을 계속 변하기 때문에 지속적으로 모니터링하지 않으면 낭패를 볼 수 있습니다.

기능이 많은 AMP for WP 플러그인

저의 경우 AMP 플러그인으로 AMP for WP 플러그인을 사용하고 있습니다.

이 플러그인은 굉장히 많은 기능을 가지고 있기 때문에 AMP 자체의 한계를 뛰어넘어 다양한 기능을 부여하고 싶은 사람들에게는 나름 매력적인 플러그인입니다.

그러나 기능이 많기 때문에 구글의 정책에 따라서 제약을 받아 수정이 필요한 경우가 종종 생기는 것 같습니다.

‘amp-iframe’ 태그의 ‘src’ 속성의 URL이 누락

어느 날 갑자기 AMP 페이지 오류가 발생되었다며 경고가 오기 시작했습니다.

도대체 이번에는 또 어던 문제일까 구글 서치콘설(Google SearchVonsole)에 들어가 보니 아래 이미지처럼 엄청나가 많은 포스팅들이 AMP 문제를 일으키고 있다고 하네요.

[워드프레스 최적화] AMP 오류 - 'amp-iframe' 태그의 'src' 속성의 URL이 누락 1
워드프레스 AMP 오류 amp-iframe 태그의 ‘src’ 속성의 URL이 누락되었습니다. 화면

내용을 살펴보니 아래와 같은 메세지를 만날 수 있었습니다.

‘amp-iframe’ 태그의 ‘src’ 속성의 URL이 누락되었습니다.

워드프레스가 5.0으로 업데이트가 예정되고 있었고, 당시 구텐베르크 편집기가 계속 업그레이드 되고 있는 상황이라 이런 것과 AMP 가 충돌되는 것 같다는 막연한 생각을 했습니다.

따라서 워드프레스가 5.0으로 업데이트되고, 그 대도 똑같이 문제가 되면 짬을 내서 살펴보자고 2주정도 무시하고 있었습니다.

뭐 바쁘다는 핑게도 대면서 말이죠.

그런데 월드프레스 5.0으로 업데이트 되고, 시간이 어느정도 더 흘러도 해결이 되기는 커녕 문제가 있는 문서의 수는 계속 증가했습니다.

그래서 휴일 어느정도 짬을 내서 Google SearchConsole을 살펴보게 되었습니다.

문제가 되는 코드를 잘 살펴보니 본문에서 발생하는 것이 아니라 본문 다음에 오는 Disqus 댓글을 제대로 표현해주지 못하는 것 이었습니다.

아래는문제가 되는 코드를 그대로 복사해 온 것입니다.

<div class=cmts>
<section class=amp-disqus-comments>
<amp-iframe height=420 width=420 layout=responsive sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" frameborder=0 src="">
<div overflow tabindex=0 role=button aria-label="Read more">Disqus Comments Loading...</div>
</amp-iframe>
</section>
</div>Code language: PHP (php)

3. AMP 문제 해결 방법

이런 상황에서 AMP 문제 해결 방법은 무엇일까요? 대략 두가지가 있다고 보았습니다.

하나는 AMP for WP 플러그에서 Disqus 댓글이 제대로 나올 수 있도록 세팅등을 완벽하게 만드는 방법입니다.

문제 메세지에서 추론하면 세팅된대로 AMP에서 구현하려니 SRL 정보를 가져오지 못하다고 나오기 때문으로 보입니다.

따라서 SRL 정보를 제대로 가져오도록 세팅을 변경하면 가능할 것이라는 가정이 가능합니다.

두번째 방법은 AMP에서 댓글을 사용하지 않는 것입니다. AMP에서 기본적으로 댓글을 지원하지 않는 이유는 가장 가볍게, 효율적으로 웹 페이지를 구성하기 위해서입니다.

이러한 AMP의 당초 목적대로 억지로 Disqus 댓글을 표시해 무겁고 가끔은 문제를 일으키지 말고 정석대로 가는 것이죠.

3.1.AMP에서 Disqus 댓글을 포기하다.

이를 어찌 풀어야할까 고민하다, 계속 AMP에서는 댓글이 나오지 않으므로 AMP for WP 플러그에서 댓글 관련 설정을 전부 작동하지 않토록 변경하기로 했습니다.

아래는 변경하기 전의 AMP for WP 플러그에서 댓글 설정 화면입니다.

워드프레스 AMP 오류 amp-iframe 태그의 'src' 속성의 URL이 누락되었습니다. AMPforWP 플러그인 댓글 세팅 현황
 AMPforWP 플러그인 댓글 세팅 현황 – 문제 해결 前

아래는 AMP for WP 플러그에서 댓글 기능을 전부 사용하지 읺는 것으로 변경한 모습니다.

워드프레스 AMP 오류 amp-iframe 태그의 'src' 속성의 URL이 누락되었습니다. AMPforWP 플러그인 댓글 세팅을 전부 해제한 화면
 AMPforWP 플러그인 댓글 세팅을 전부 해제한 화면

3.2. 다시 정상으로 돌아오다.

위와 같이 AMP for WP 플러그에서 댓글 성정을 전부 사용하지 않는 것으로 변경하니 정상으로 돌아옵니다.

RRL 검사 부분으로 이동해 ‘실제 URL 테스트’해보니 정상으로 변경되는군요.

아래는 연결된 AMP 버젼이 잘못되었다고 나오는 테스트 이전 상황입니다.

워드프레스 AMP 오류 amp-iframe 태그의 'src' 속성의 URL이 누락되었습니다. 문제 해결 전 모습
워드프레스 AMP 오류 – amp-iframe 태그의 ‘src’ 속성의 URL이 누락되었습니다. 문제 해결 전 모습

아래는 ‘실제 URL 테스트’후 정상이라는 테스트 결과 화면입니다.

워드프레스 AMP 오류 amp-iframe 태그의 'src' 속성의 URL이 누락되었습니다. 문제 해결 후 테스트 모습
워드프레스 AMP 오류 amp-iframe 태그의 ‘src’ 속성의 URL이 누락되었습니다. 문제 해결 후 테스트 모습

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션입니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

우분투 20.04와 PHP 8 기반 워드프레스 설치 방법

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments