인터넷의 발달은 우리에게서 참을성을 앗아가고 있다. 웹 콘텐츠를 보기 위해 수 초를 기다려야 할 때, 많은 사람은 기다리기보다 차라리 웹 콘텐츠 소비를 포기한다. 웹페이지 로딩 시간이 10초가 될 경우 이탈률은 무려 58%에 이른다는 연구 결과도 있다. 구글이 주창한 ‘AMP’(Accelerated Mobile Pages) 프로젝트는 이 문제를 해결하고자 출범했다. 웹 구동 시간을 최대 4배 정도 단축해 더 나은 콘텐츠 소비 경험을 제공하고자 한다.
구글 모바일 AMP 페이지 오류 해결방법
얼마전 구글에서 메일 한통을 받았습니다. 그 내용은 'AMP 페이지 오류 수정'이라는 내용으로 링크 타고 들어가면 '구글 Search Console > 검색노출 > 액셀러레이티드 모바일 페이지(AMP) > 금지되거나 잘못된 HTML 태그 사용'으로 들어 가더군요. 이 부분에서 몇 개의 페이지가 잘못된 태그를 사용했다고 하니 ... 새롭게 바꿔서 궁금하였는데 이번에 모바일 로딩시간 단축을 위해서 이렇게 보낸 것이더군요.
위에 보이는 화면 처럼 2개의 오류가 있다고 하는군요.금지된 HTML태그라네요. 지금까지 괜찮다가 지금에 와서야 이러니... 물론 좀더 좋게 만들려고 하니까 이렇겠지만 귀찮은 것은 맞네요.
대충 보니 12번과 8번 포스트에 잘목된 태그를 사용했나 보네요.
친절하게 검사 페이지까지 있는것을 보니 대대적으로 홍보를 할려는 것과 저같이 모르는 사람들도 할수 잇게 만들었네요. 검사기 실행으로 들어가 보겠습니다.
저 같은 경우에는 <img>태그 2개가 있네요. 다른 여러가지 있겠지만 <img>태그가 금지되었다고 하니 이부분을 수정하겠습니다.
우선 구글에서 보여지는 부분에서 도움말을 들어가 보면 설명이 있는데 영어의 압박이 밀려와서 ... ㅋㅋ
그냥 대충 보면 <img>태그 대신에 <amp-img>를 사용하고 태그를 닫아라 라는 말로 보여집니다. 물론 선언을 해야 겠지요 ^^
우선 선언부분입니다. 조금 길게 보여지는 군요. 복사해서 스킨편집 부분에 넣어 주시면 됩니다.
티스토리의 HTML/CSS 편집 부분입니다. 스킨 편집에서 필요한 부분을 COPY해서 붙여넣기를 합니다.
링크에 들어가셔서 하셔도 됩니다. 저 같은 경우는 <meta>부분을 다른곳에 적어 두어서 밑의 <style>,<script>.만 가져 왔습니다. 없으신 분은 <meta>부분도 같이 넣어 주시기 바랍니다. 밑에는 참고 사항입니다.
필수 마크업
- Doctype
<!doctype html>로 시작해야 합니다. - 최상위
<html ⚡>태그를 포함해야 합니다(<html amp>도 허용됨). <head>및<body>태그를 포함해야 합니다(HTML에서는 선택 항목).- AMP HTML 문서의 일반 HTML 버전을 가리키는
<link rel="canonical" href="$SOME_URL" />태그를 헤드 내에 포함해야 합니다. 이러한 HTML 버전이 없는 경우 스스로를 가리키는 태그를 포함해야 합니다. - 헤드 태그의 첫 번째 하위 요소로서
<meta charset="utf-8">태그를 포함해야 합니다. - 헤드 태그 내에
<meta name="viewport" content="width=device-width,minimum-scale=1">태그를 포함해야 합니다. 또한 initial-scale=1을 포함시키는 것이 좋습니다. - 헤드의 마지막 요소로서
<script async src="https://cdn.ampproject.org/v0.js"></script>태그를 포함해야 합니다(이 요소는 AMP JS 라이브러리를 포함하고 로드합니다). <head>태그에 다음을 포함해야 합니다.<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
그후 포스팅 부분을 수정 해야 하는데요. 그전에 <amp-img>태그 부분을 참고 하시면 됩니다.
기본이구요 위의 부분에서 width부분과 height부분을 빼시면 보여지는 것이 이상하게 나옵니다. 그리고 화면의 사이즈에 따라 자동으로 변화가 되고 그 부분이 layout="responsive" 부분인것 같습니다. 테스트 해본 결과 화면의 사이즈만 반영이 되더군요. div의 사이즈가 아닌... 삽질 했습니다.
다른 응용 부분이 있는데 각각의 화면당 다른 이미지를 보여지는 부분같은데 저는 필요가 없는 부분같아서 생략합니다. 사이즈 참고는 https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints 으로...
기존의 <img>태그를 <amp-img></amp-img>로 변경해서 발행을 하면 됩니다.
마지막으로 검사를 다시한번 해 보시면 'PASS'가 되고 끈나게 됩니다.
이제 시작일 뿐입니다.
