Word Cracker의 잡다한 정보 모음

워드프레스에서 구글 AMP를 적용하는 방법

6

구글 AMP를 적용하여 모바일 페이지 속도 향상시키기

오늘날 모바일 사용 빈도가 높아짐에 따라 모바일에서 사이트 로드 속도가 점점 중요해지고 있습니다.

AMP(Accelerated mobile page)를 적용하면 표준 모바일 페이지보다 속도가 15~80%까지 빨라진다고 합니다. 만약 모바일에서 속도가 느려서 고민되는 경우 AMP 적용을 고려해볼 수 있을 것 같습니다.

AMP 페이지에서는 광고나 자바스크립트, CSS 애니메이션 등과 같은 동적인 요소들을 제거하여 속도를 향상시킵니다. 워드프레스에서는 플러그인을 사용하여 광고와 구글 애널리틱스 코드를 추가할 수 있습니다.

이 블로그에는 Publisher라는 매거진 테마가 현재 사용되고 있는데, 테마에 자체 AMP 플러그인이 포함되어 있습니다. 저는 별도의 플러그인을 사용하지 않고 내장된 플러그인을 활성화하여 AMP를 구현했습니다. 일반적인 페이지와 AMP 페이지는 다음 두 글에서 확인해볼 수 있습니다.

워드프레스에서  AMP를 적용하려면 다음과 같은 순서를 따르면 됩니다.

  1. AMP 플러그인 설치
  2. 플러그인 설정
  3. AMP 테스트/유효성 검사
  4. 구글에 제출
  5. 구글 웹마스터도구에서 오류 확인 및 수정

AMP 페이지를 구글에 제출하면 스마트폰 등 모바일 기기에서 구글에서 검색하면 AMP 페이지 아이콘이 검색 결과에 표시됩니다.

플러그인 설치 페이지에서 AMP 플러그인 설치

AMP 플러그인으로는 Automattic에서 배포한 공식 AMP 플러그인이 있습니다. 하지만 평가가 별로 좋지 않네요.

공식 플러그인 외에 AMP for WP라는 플러그인이 더 좋은 평가를 받고 있습니다. 저는 다른 블로그에 이 플로그인을 설치하여 AMP를 적용했습니다.

플러그인 설정

AMP for WP를 설치하면 워드프레스 관리자 페이지에서 왼쪽 패널에 AMP 메뉴가 추가됩니다.

그림과 같이 비교적 많은 옵션을 설정할 수 있습니다. 하나씩 체크하면서 설정해주면 됩니다. 구글 애널리틱스를 이용하는 경우 Settings > General > Analytics에서 추적 코드를 추가하도록 합니다.

광고를 추가하려는 경우에는 Settings > General > Advertisement에서 설정이 가능합니다.

공식 플러그인을 설치한 경우 수동으로 추가하는 방법도 있습니다. 수동으로 추가하는 자세한 방법은 Happist님 블로그의 “구글 AMP(ACCELERATED MOBILE PAGES)에 애드센스 적용하기“를 참고해보시기 바랍니다.

구글 AMP 페이지 테스트/유효성 검사 및 구글에 제출하기

설정이 완료되었다면 테스트를 한 후에 구글에 제출해야 합니다.

AMP 테스트는 구글에서 제공하는 AMP 테스트 페이지를 방문하여 테스트할 URL을 입력하면 됩니다.

이 블로그와 다른 블로그에서 플러그인을 적용한 후에 AMP 사이트 주소를 입력하니 별 문제 없이 테스트에 통과하여 곧바로 구글에 제출할 수 있었습니다.

위의 그림과 같이 “유효한 AMP 페이지“라고 표시되면 GOOGLE에 제출을 클릭하여 구글에 제출할 수 있습니다.

만약 문제가 발견되면 다음과 같이 오류 메시지가 표시될 수 있습니다.

위의 그림에서는 5개 문제를 수정하도록 오류 메시지를 표시하고 있습니다. 각 링크를 클릭하여 오류에 대한 자세한 내용을 확인한 후에 오류를 수정하도록 합니다.

참고로 다국어 번역 플러그인인 WPML이 설치되어 있는 경우 몇 가지 오류가 발생하네요. 보통은 별 문제 없이 이 과정을 통과할 것 같습니다.

구글 웹마스터도구에서 오류 확인 및 수정

구글에 제출하면 2~3일 후부터 AMP 페이지가 검색되기 시작합니다. 색인 생성된 AMP 페이지와 오류를 검색 노출 > 액셀러레이티드 모바일 페이지(AMP)에서 확인할 수 있습니다.

색인은 한꺼번에 생성되지 않고 시간이 흐르면서 조금씩 증가하네요. 구글에 제출한 후 약 5일 정도 되었는데 1,219개 색인이 생성되었고 12개 페이지에 심각한 문제가 있다고 표시되고 있네요. 약 60% 정도 색인이 생성된 것 같습니다.

문제의 심각도가 “중요“한 것으로 표시된 AMP 페이지는 일일이 확인하여 오류를 수정한 후에 다시 구글에 제출할 수 있습니다. 예를 들어, “금지되거나 잘못된 HTML 태그 사용“을 클릭해보면 이 부류의 문제가 있는 페이지의 리스트가 표시됩니다.

각 페이지를 클릭하면 자세한 오류에 대한 설명이 표시됩니다.

위에서는 input 태그에 ‘type’ 속성이 잘못된 값 ‘password'(으)로 설정되었다고 알려주고 있습니다. “페이지 테스트“를 클릭해보면 보다 자세한 오류 정보를 확인할 수 있습니다.

다음 문제 수정” 아래의 “금지되거나 잘못된 HTML 태그 사용“에서 “인스턴스 1개” 부분을 클릭하면 자세한 정보가 표시되고 클릭해보면 문제가 되는 소스 코드를 확인해볼 수 있습니다.

문제를 수정한 후에 다시 “페이지 테스트“를 실시해보면 “유효한 AMP 페이지“로 표시될 것입니다.

위와 같은 화면이 표시되면 “GOOGLE에 제출“에 클릭하여 구글에 제출하도록 합니다.

문제를 수정해도 유효하지 않은 AMP 페이지 화면이 표시될 수도 있습니다. 캐시 때문인지 모르겠습니다.

마치며

워드프레스에서 구글 AMP 페이지를 적용하는 방법에 대해 살펴보았습니다.

HTML에 대한 이해 정도에 따라 오류를 수정하는 작업이 조금 어려울 수도 있을 것 같습니다. 이 블로그의 경우 이전에 Elegant Themes의 Divi를 사용했는데, Divi 테마에서 제공되는 이미지 슬라이더를 사용하여 이미지 슬라이더를 만든 것이 있습니다. 테마를 바꾼 후에 이미지 슬라이드가 제대로 표시되도록 ET Shortcodes라는 플러그인을 사용하고 있습니다. 이 ET Shortcodes를 사용하여 이미지 슬라이더를 만들 때 이미지 크기를 지정하지 않으면 AMP 페이지에서 심각한 오류가 발생했습니다. 일일이 이미지 폭과 높이를 지정해주니 문제가 해결되었습니다.

또 다른 문제 유형으로 링크를 잘못 지정할 때에도 심각한 오류가 발생했습니다. 가령 <a href=”http://www.example.com”>… 같은 형식이 되어야 하지만 간혹 복사하여 붙여넣기할 때 문제가 발생하여 <a href=”워드프레스”>처럼 href 속성 부분에 유효한 URL이 없을 때 문제가 되었습니다. 글 개수가 워낙 많다 보니 한번 작성한 후에 누가 오류를 지적해주지 않으면 이런 오류는 잡아내기가 쉽지 않은 데 AMP 페이지를 적용하면서 링크가 잘못된 오류를 수정할 수 있게 되었습니다.

이 블로그의 경우 대부분 데스크톱에서 접속하기 때문에 AMP를 적용할 필요성을 크게 못 느끼고 있지만, AMP를 적용할 경우 SEO에 도움이 되지 않을까 기대해봅니다.

참고:

Related Posts

6개 댓글
  1. Chris Mok 님의 말씀

    광고 영역이 아무래도 줄어서 수익에 영향이 조금은 있지 않을까요?

    1. Word 님의 말씀

      플러그인을 사용하면 아무래도 광고 위치를 세밀하게 지정하는 것이 힘들 수 있을 것 같습니다.

      그런 경우 수동으로 원하는 위치에 추가하면 될 것으로 보입니다. 가령 ‘5번째 Paragrph 다음에 광고 배치’ 식으로 콘텐츠 내에 원하는 위치에 추가할 수 있을 것입니다.

      저는 테마에 포함된 플러그인을 사용 중인데요, 광고를 원하는 곳에 배치가 가능합니다.

  2. Happist 님의 말씀

    AMP 관한 좋은 글 잘 봤습니다.
    저도 말씀하신 공식 플러그인을 사용하다가 3주전에 이 플로그인으로 바꾸었습니다.

    1. 확실히 google analytic에서 잡히는 오류가 공식 플러그인에 비해서 절반이하로 줄어든 것 같습니다.
    2. 이 플럭인은 다양한 기능을 넣었기에 AMP의 원래 취지였던 가벼움을 조금은 벗어나는 것 같습니다.
    그럼에도 불구하고 애드센스나 Social share button같은 기능은 버리기가 아깝긴 합니다.
    3. 유료로는 Newspaper 8 계열 디자인의 테마도 지원하네요.
    4. 적용 후 만족도는 괜찮습니다. AMP를 적용한다면 추천할 만합니다.

    1. Word 님의 말씀

      저는 테마에 포함된 AMP 플러그인을 사용하고 있는데, 나름 괜찮은 것 같습니다. 별다른 설정을 해 줄 필요 없이 사용이 가능하도록 만들어져 있습니다. 첫 페이지에 슬라이더가 표시되고, 구글 애드센스 광고까지 표시되어서 속도면에서는 많이 향상되지 않은 것은 조금 아쉽지만, 기능을 많이 넣다 보면 어쩔 수 없는 것 같기도 합니다.

  3. Adi Jang 님의 말씀

    잘봤습니다. 저도 publisher 테마를 사용중이기 때문에 ㅎㅎ
    publisher amp 플러그인을 사용중이긴 합니다.

    이상한게 하나 있는데 회사에서 이 사이트 접속 시 화면과
    집에서 접속 시 화면이 다릅니다.
    집에서는 9월 초 내용으로 나오네요.

    저만 그런건지, 캐시 설정에 오류가 있는건지 잘 모르겠습니다.

    1. Word 님의 말씀

      안녕하세요?

      캐시 플러그인 때문일 수 있습니다.
      저는 W3 Total Cache를 사용하다가 최근에 일부 사용자에게 페이지가 예전 페이지가 표시되는 문제가 있어서 다른 플러그인으로 대체했습니다. 그리고 혹시 몰라서 Publisher에서 제공하는 Booster 기능도 모두 해제했습니다.

댓글 남기기

이메일은 공개되지 않습니다.