구글에서 제안하는 Accelerated Mobile Pages를 적용해서 사용하고 있는데요.
1. AMP(Accelerated Mobile Page)란 무엇이냐구요?
인터넷이 빠르게 모바일로 전환되고 모바일 광고도 매우 빠르게 증가하고 있습니다. 그런데 모바일의 속도는 모바일 인터넷의 증가 속도를 따라가지 못하고 모바일에서 속도 문제가 매우 중요해졌습니다.
1.1. 구글 AMP(Accelerated Mobile Page) 개요
일반적인 문서도 속도가 느린데 여기에 구글 광고까지 실으면 더욱 느려지기 대문에 구글로서는 빠른 모바일 환경으로 빨리 전활할 필요가 있었습니다. 이런 배경하에 나온 것이 구글 AMP(Accelerated Mobile Page)입니다.
구글 AMP(Accelerated Mobile Page)는 속도를 최대한으로 올리기 위해서 불필요한 코드를 모두 제거하고, 구글 입장에서 꼭 필요하다고 생각하는 항목만 반영하도록 Accelerated Mobile Page 문법을 상당히 엄격하게 적용하고 있습니다.
- JavaScript가 페이지 렌더링을 차단하는 것을 막기 위해 비동기 JavaScript만 허용한다.
- CSS는 모두 인라인으로 지정해야 하며 50KB를 넘을 수 없다.
- 스크립트는 처럼 AMP에서 제공하는 스크립트 외에는 외부 JavaScript를 허용하지 않는다.
- 기본 HTML 태그 대신 , , 같은 AMP 전용 태그를 사용한다.
- 모든 리소스는 크기를 지정해서 리소스를 다운로드 한 후에 브라우저가 레이아웃을 다시 그리지 않도록 한다.
1.2. 심심하게 나오는 AMP 페이지 구현 오류
구글에서는 속도 개선을 위해서 Accelerated Mobile Page 문법을 상당히 엄격하게 적용하고 있다보니 조금만 정한 규정에서 어긋나도 바로 “Accelerated Mobile Page에 문제가 있다.”는 경고를 띄우고 구글 검색 시 “페이지에 AMP 구현 오류가 있습니다.”를 표시해 줍니다.
문제는 “페이지에 AMP 구현 오류가 있습니다.”라는 문구가 뜨는 포스팅이 증가하고 있다는 것이죠.
처음에는 그러려니하다가도 이를 볼때마다 신경이 쓰이긴 합니다. 다만 한가지 다행인점은 이 메세지는 오직 사이트 owner에게만 보여진다는 점입니다.
1.3. AMP(Accelerated Mobile Page)의 문제점
이 AMP(Accelerated Mobile Page)가 모바일 인터넷의 속도를 증가시키지만 별도의 구글 캐시 서버를 통해서 내용을 보여주므로 구글 중심의 정책이라 비난을 많이 받고 있습니다. Outsider님, 나는 AMP를 좋아하지 않는다. 참조
또한 블로그나 웹사이트의 정체성을 굉장히 훼손하면서 속도를 증가를 추구하고 있어 블로그들의 이해와는 반하는 결과를 낳고 있습니다.
- 구글 애드센스 넣기가 보다 까롭습니다. 뭐 방법은 많이 있으니 전문가들에게는 큰 문제가 아닙니다.
- Social share button을 추가하기 매우 어렵습니다. AMP에 맞추어 별도 작업을 해주어야 합니다.
- 포스팅에서 글쓴이가 연결했던 Link 등의 정보가 구글 제공 link로 대체되는 경우가 많습니다.
- 사이트 디자인 등의 아이덴티티를 완전히 변화시킵니다.
그렇기때문에 AMP를 포기하고 다시 예전으로 돌아가는 경우도 증가하고 있으며, 인터넷에는 AMP 삭제 방법에 대한 문의도 늘고 있습니다.
2. 끊임없이 AMP와 사이트와 충돌이 발생하다.
이러한 구글의 정책에 맞추어 제대로 페이지를 구성하면 문제가 없습니다. 그러나 많은 자료들이 아주 예전부터 만들어쟜고 이 문서들은 AMP 정책과 맞지 않는 것들이 많습니다.
한때는 하루 몇십개씩 수정을 시도해 보았지만 날이갈수록 요구사항이 까다로워지고 새로운 프로그램 적용이나 플러그인을 설치하면 충돌이 발생하는 것 같더군요.
최근 워드프레스 최적화를 한다면서 그동안 형식적으로 적용해 작동하는지 하지않는지 제대로 않았던 서버의 각종 옵션들을 재점검했습니다. 그 결과 생각외로 작동하지 않은 옵션 명령들이 많았습니다.
제 옵션 명령들을 정상적으로 작동하도록 만들자 이제는 문제가 AMP 페이지에서 터져 나왔습니다. 대부분의 포스팅들이 모든 문제가 있어서 AMP 인덱스에서 빠졌다는 것입니다.
그 원인으로는 잘못된 CSS 스타일시트를 적용해다는 것인데요. 아무래도 구글 ngx_PageSpeed를 제대로 설정했더니 이와 충돌을 일으키는 것으로 보였습니다.
그동안 AMP 삭제에 대해서 고민을 많이 했는데 이 정도 수준이면 포기해야겠다는 생각이 들었고 본격적으로 삭제하기 시작했습니다.
3. 구글 AMP 삭제 방법
어떻게 AMP를 삭제할까요?
구글은 AMP 삭제 방법에 대해서 친절(?)하게 안내하고 있습니다.
Remove AMP Content from Google Search
그러나 이는 디테일하게 설명된 자료는 아니라서 전문가가 아니라면 어려울 수 있습니다. 좀 더 자세한 방법을 알아 봅니다.
3.1. 웹 페이지 헤드에서 rel=”amphtml” 삭제
구글은 웹 페이지의 헤드에 있는 rel=”amphtml” 마크업 링크를 통해서 AMP 페이지라는 것을 인지합니다.
그러므로 ==웹 페이지 헤드에서 rel=”amphtml” 삭제하는 것이 AMP를 삭제하는 지름길== 입니다.
어떻게 웹 페이지 헤드에서 rel=”amphtml”를 삭제할 수 있을까요?
쉽게 하는 방법중의 하나가 이런 문구를 찾아서 삭제해 주는 플러그인을 활용하는 것입니다. 바로 Real-Time Find and Replace라는 플러그인을 이용하는 것입니다.
- 우선 Real-Time Find and Replace 플러그인을 설치, 활성화합니다.
-
도구에서 Real-Time Find and Replace 플러그인을 선택한 다음 ① Add 버튼을 눌러 ② Find 필드에는 ““입력하고 Replace에는 비워 놓습니다. ③ 그 다음 Regex를 눌러서 선택되도록 체크 표시한 후 ④ Update Setting을 누릅니다.
3.2. AMP 페이지를 인덱스하지 않토록 코드 추가
이렇게 rel=”amphtml” 마크업을 삭제하면 구글에게 더 이상 이 사이트에는 AMP 페이지나 포스트가 없다는 것을 알려 주는 것입니다. 그러면 구글은 이 관련 페이지들을 다시 인덱스하게 됩니다.
그런데 여기에는 문제가 하나 있습니다. 이제 Google은 AMP 버전 페이지를 일반 버젼의 중복 된 URL로 간주 할 수 있습니다.
이를 방지하기 위해서 제거된 AMP 페이지가 더이상 인덱스 되지 않는 방법을 추가해야 합니다.
이를 위해서 AMP for WP 플러그인을 삭제하지말고 여기에서 옵션 코드를 추가해 줍니다.
즉 AMP for WP 플러그인을 열고 SEO 섹션으로 이동한 다음 ““ 코드를 추가해 줍니다.
이제 AMP 페이지를 인덱스하지 않토록(NOINDEX)하도록 설정을 마쳤습니다.
3.3. 구글 서치 콘솔에서 사이트맵 제공
이제는 구글에 최신 사이트맵을 제공해서 우리 사이트를 최신으로 업데이트하고 인덱스에 반영해 달라고 요청해야 합니다.
- 먼저 최신 사이트맵을 만듭니다. 사이트맵 플러그인이 설치되어 있다면 자동으로 제출 될 수 있겠지만 그렇지않다면 수동으로 사이트맵을 만듭니다.
- 수동으로 사이트맵을 들 수 있는 곳은 xml sitemap generator – free unlimited pages, Online XML Sitemap Generator등이 있습니다. Online XML Sitemap Generator이 빠르지만 만들 수 있는 갯수를 제한하고 있으며, xml sitemap generator – free unlimited pages는 어느정도 제한이 없습니다.
- SFTP로 사이트 루트에 사이트맵을 올립니다.
-
이제 구글 서치 콘솔로 이동합니다. 크롤링 – Sitemaps로 이동해 사이트맵을 등록하고 제출합니다.
그러면 진짜 이제부터는 구글 소관으로 넘어갑니다. 구글은 AMP페이지를 NOINDEX하고 오리지널 페이지를 전부 다시 인덱스해줍니다. 시간이 조금 걸리지 않을까 싶네요.. 시간을 측정해보지는 않았습니다.
3.4. AMP 플러그인 삭제
시간을 지나 AMP 페이지가 구글 서치에서 사라지는 것을 확인하면 AMP 플러그인을 삭제합니다.
3.5. 필요 시 리다이렉트
AMP 플러그인을 삭제하고 불안한 경우가 있습니다. 아마 위 프로세스를 밟았다면 이상은 없겠지만 만사 불여튼튼이므로 혹시 AMP 주소 링크가 걸려온다면 원문으로 리다이렉트할 수 있도록 합니다.
리다이렉트 플러그인 사용
이러한 리다이렉트를 가능하게 해주는 첫번째 방법은 리다이렉트 플러그인을 설치하는 것입니다.
첫번째로 Source URL 필드에 아래 코드를 입력
/(.*)\/ampCode language: PHP (php)그리고 Source URL 입력 후 바로 옆에 있는 정규표현식(Regax) 옵션에 체크해 줍니다.
다음 Target URL에는 운영하는 사이트 주소를 포함해 다음과 같은 형식의 코드를 입력합니다. 여기 사이트인 happist.com이라면 아래와 같겟죠.
https://happist.com/$1Code language: PHP (php)Group 부분을 눌러 드랍다운 메뉴 중 “Redirections”을 선택합니다.
마지막으로 Add Redirect 버튼을 눌러 저장 합니다.
서버에서 리다이렉트 명령 추가
플러그인을 사용하지않고 서버에서 리다이렉트 명력을 추가할 수 있습니다.
아파치라면 .htaccess 파일에, nginx라면 nginx 설정 파일에 리다이렉트 명령을 추가해 줍니다.
아래는 아파치 서버에서 사용하는 리다이렉트 명력어입니다.
# AMP 삭제 후 AMP 주소로 오는 요청을 오리지널 페이지 주소로 되돌림
RewriteRule ^(.*)\/amp$ $1 [R=301,L]
Code language: PHP (php)NGINX에서는 아래처럼 rewrite 명령을 사용했습니다. 이 명령은 서버 블락에 넣어 줍니다.
# AMP 삭제 후 AMP 주소로 오는 요청을 오리지널 페이지 주소로 되돌림
location ~ /amp/$ {
rewrite ^(.*/)amp/$ $1 permanent;
}
Code language: PHP (php)4. 참고 자료
구글 AMP 삭제 관련해 아래 자료들을 참고했습니다.
AMP 삭제 방법을 굉장히 자세하게 알려주는 포스팅으로 제가 주로 참고한 내용 How to Disable Google AMP & Remove AMP Content from Google Search
마찬가지로 AMP 삭제 방법 3가지에 대해서 설명하고 있는 포스팅 Google has explained how you can remove your AMP content from Google search
How to Fix 404 on AMP pages after deactivating the AMP plugin
AMP 삭제 후 404 에러를 방지하기 위해 리다이렉션이 필요한데 이를 위해 Redirection plugin을 설치해 사용해 볼 수 있습니다.
그러나 rewrite를 이런 플러그인을 사용하지 않고 위애서 제시한 RewriteRule과 write를 사용해서 처리할 수 있습니다.
