모바일 사용이 점차 대세화되면서 모바일 관련 컨텐츠 제공업체에서는 모바일 컨텐츠를 빠르게 구동할 수 있는 방안을 제시하고 있습니다.
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 태그(중요 문제) 등등
이럴 경우 구체적으로 들어가 테스트를 해볼 수 있습니다.
항목으로 들어가면 문제가 발생한 AMP URL List가 나타납니다.
그러면 이 URL을 눌러서 하나하나 점검해 볼 수 있습니다.
2.2. AMP 페이지 테스트
문제가 있다는 URL을 누르면 아래와 같은 화면이 나오는데요.
여기에서 AMP와 표준 시 각각 어떻게 나오는지 비교할 수 있으며, 어디가 문제인지를 페이지 테스트 버튼을 눌러서 테스트할 수 있습니다.
아래 이미지는 페이지 테스트 결과 유효하지 않은 AMP 페이지라고 판정이 난 화면입니다.
여기에서 상세 내용을 체크해 어디에서 문제가 발생하는지를 확인할 수 있습니다.
아래 이미지는 페이지 테스트결과 유효한 AMP 페이지라고 판정이 난 경우입니다.
이 해피한 경우엔 구글에 제출해 AMP 검색에 반영해 달라고 할 수 있습니다.
2. 하루패드+워드프레스 사용 시 AMP 적용 에러나는 유형 공유
그런데 AMP를 적용하고나서 구글 Search Console에서 살펴보면 많은 에러들이 발생하더군요.
그래서 삼일절 휴일을 이 에러를 잡는데 많는 시간을 보냈습니다.
여기서 발생하는 에러들이 아주 간단한 것들이라서 AMP를 고려하는 분들이 조금은 도움이 되고자 간단하게 공유하고자 합니다.
참고로 저는 하루패드에 내용을 작성하고 이를 워드프레스에 copy & paste해서 포스팅을 하고 있습니다. 그래서 일반화하기하기는 어려운데요. 다만 이 쌍 따움표의 문제는 하루패드로 작성하지 않은 포스팅에서도 공통적으로 나타났습니다.
참고로 보시기 바랍니다.
2.1. 제목 또는 소제목에 쌍따움표가 있는 경우
조금 어이없는데요.
제목 또는 소제목에 쌍따움표(""_를 한 경우 어김없이 에러를 뿜습니다. 적확한 이유는 모르지만
▽ AMP 문제 발생 사례 – 제목에 쌍따움표를 친 경우
▽ AMP 문제 발생 사례 – 소제목에 쌍따움표를 친 경우
2.2. 엑셀이나 워드에서 표를 그려서 이를 그대로 복사한 경우
저는 워드와 엑섹에서 표를 그린 다음, 이를 카피해 HTML로 붙여 포스팅을 하고는 했는데요. 이 경우도 에러를 내는 것 같습니다. 마이크로소프트 워드나 엑셀로 만들면 HTML이 복잡해져서 그런지 아니면 여기서는 HTML5를 사용하지 않아서이닞 모르겠습니다.
결국 이 대부분의 표를 이미지로 변경해 올렸습니다. 업청난 삽질을 한 셈이죠.
예를들면 아래와 같이 각 메이커별 사양을 비교한 테이블을 워드에서 만들어 그대로 복사해 왔는데요..
AMP는 이렇게 복잡한 것을 거부하네요.
3. 테마와 AMP 적용
구글에서 제가 올린 포스팅을 AMP로 인정해 주었지만 제가 적용하고 있는 Newspaper7 테마에서는 모바일에서 접근해도 표준으로 페이지를 불러오는 것 같더군요.
Visual Composer를 적용하고 있기 때문인지는 모르지만 적절하게 불러오는 것 같지가 않습니다. 이 부분은 시간을 두고 확인해 봐야할 것 같습니다.
