[워드프레스 Tips] 워드프레스에서 구글 AMP(Accelerated Mobile Pages) 적용 시 소소한 에러 유형 공유

Updated on 2017-09-15 by

모바일 사용이 점차 대세화되면서 모바일 관련 컨텐츠 제공업체에서는 모바일 컨텐츠를 빠르게 구동할 수 있는 방안을 제시하고 있습니다.

2015년 초에는 페이스북(Facebook)엣 페이스북에 최적화된 컨텐츠를 제공하는 인스턴트 아티클(Instant Articles)을 제안했으며, 애플에서도 애플 뉴스를 제안했고 이에 질세라 구글에서도 2015년 하반기에 AMP(Accelerated Mobile Pages)를 제안했습니다.

1. AMP를 적용해 보다.

구글에서는 AMP를 적용한 포스트에는 가산점을 주어 장려하고 있어서 저도 제 사이트에 AMP를 적용해 봤습니다.
제가 적용한 방식은 AMP라는 워드프레스 플러그인을 설치하고 페이스북 인스턴트 아티클(Instant Articles)과 구글 AMP(Accelerated Mobile Pages)에서도 대응할 수 있도록 Facebook Instant Articles & Google AMP Pages by PageFrog라는 플러그인을 추가로 설치했습니다. 두번째 설치한 플로그인은 독자적으로 작동하지는 않고 AMP 플로그인하에서 작동합니다.

2. AMP 적용 여부 확인 및 테스트 해보기

AMP 플러그인을 설치했으면 제대로 AMP가 작동하는지 확인해 봐야 합니다.

2.1. 구글 웹마스터 Search Console에서 상황 점검하기

이는 구글 웹마스터 Search Console에 들어가 검색노출 아래에 있는 액셀러레이티드 모바일 페이지(AMP)를 확인하면 됩니다.

저의 경우 액셀러레이티드 모바일 페이지(AMP)에서 확인해본 내용입니다.

AMP를 적용하고나서 갑자기 문제가 있다는 페이지가 급증했습니다.

  • 금지되거나 잘못된 HTML 태그 사용(중요 문제)
  • 상응하는 AMP 항목이 있는 금지된 HTML 태그(중요 문제) 등등

구글 Search Console에서 액셀러레이티드 모바일 페이지(AMP) 모습

이럴 경우 구체적으로 들어가 테스트를 해볼 수 있습니다.
항목으로 들어가면 문제가 발생한 AMP URL List가 나타납니다.

그러면 이 URL을 눌러서 하나하나 점검해 볼 수 있습니다.

구글 Search Console에서 액셀러레이티드 모바일 페이지(AMP) 모습

2.2. AMP 페이지 테스트

문제가 있다는 URL을 누르면 아래와 같은 화면이 나오는데요.
여기에서 AMP와 표준 시 각각 어떻게 나오는지 비교할 수 있으며, 어디가 문제인지를 페이지 테스트 버튼을 눌러서 테스트할 수 있습니다.

구글에서 AMP URL List 및 검증해 보기

아래 이미지는 페이지 테스트 결과 유효하지 않은 AMP 페이지라고 판정이 난 화면입니다.
여기에서 상세 내용을 체크해 어디에서 문제가 발생하는지를 확인할 수 있습니다.

페이지 테스트 결과 - 유효하지 않은 AMP 페이지

아래 이미지는 페이지 테스트결과 유효한 AMP 페이지라고 판정이 난 경우입니다.

이 해피한 경우엔 구글에 제출해 AMP 검색에 반영해 달라고 할 수 있습니다.

페이지 테스트결과 유효한 AMP 페이지라고 판정이 난 경우

2. 하루패드+워드프레스 사용 시 AMP 적용 에러나는 유형 공유

그런데 AMP를 적용하고나서 구글 Search Console에서 살펴보면 많은 에러들이 발생하더군요.

그래서 삼일절 휴일을 이 에러를 잡는데 많는 시간을 보냈습니다.
여기서 발생하는 에러들이 아주 간단한 것들이라서 AMP를 고려하는 분들이 조금은 도움이 되고자 간단하게 공유하고자 합니다.

참고로 저는 하루패드에 내용을 작성하고 이를 워드프레스에 copy & paste해서 포스팅을 하고 있습니다. 그래서 일반화하기하기는 어려운데요. 다만 이 쌍 따움표의 문제는 하루패드로 작성하지 않은 포스팅에서도 공통적으로 나타났습니다.

참고로 보시기 바랍니다.

2.1. 제목 또는 소제목에 쌍따움표가 있는 경우

조금 어이없는데요.
제목 또는 소제목에 쌍따움표(""_를 한 경우 어김없이 에러를 뿜습니다. 적확한 이유는 모르지만

▽ AMP 문제 발생 사례 – 제목에 쌍따움표를 친 경우

AMP 문제 발생 사례 - 제목에 쌍따움표를 친 경우

▽ AMP 문제 발생 사례 – 소제목에 쌍따움표를 친 경우

하루패드에서 AMP 오류 예 -소제목에 쌍따움표를 친 경우

2.2. 엑셀이나 워드에서 표를 그려서 이를 그대로 복사한 경우

저는 워드와 엑섹에서 표를 그린 다음, 이를 카피해 HTML로 붙여 포스팅을 하고는 했는데요. 이 경우도 에러를 내는 것 같습니다. 마이크로소프트 워드나 엑셀로 만들면 HTML이 복잡해져서 그런지 아니면 여기서는 HTML5를 사용하지 않아서이닞 모르겠습니다.

결국 이 대부분의 표를 이미지로 변경해 올렸습니다. 업청난 삽질을 한 셈이죠.

예를들면 아래와 같이 각 메이커별 사양을 비교한 테이블을 워드에서 만들어 그대로 복사해 왔는데요..
AMP는 이렇게 복잡한 것을 거부하네요.

올림푸스 펜 Olympse PEN 사양 비교

3. 테마와 AMP 적용

구글에서 제가 올린 포스팅을 AMP로 인정해 주었지만 제가 적용하고 있는 Newspaper7 테마에서는 모바일에서 접근해도 표준으로 페이지를 불러오는 것 같더군요.

Visual Composer를 적용하고 있기 때문인지는 모르지만 적절하게 불러오는 것 같지가 않습니다. 이 부분은 시간을 두고 확인해 봐야할 것 같습니다.

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

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
4 Comments
Oldest
Newest
Inline Feedbacks
View all comments