구글 모바일 AMP 페이지 오류 해결방법

구글 모바일 AMP 페이지 오류 해결방법

안녕하세요~ 얼마전 구글에서 메일 한통을 받았습니다. 그 내용은? AMP 페이지 오류를 수정하라는 내용이었고, 해당 메일의 오류보기를 눌렀더니 구글 웹마스터 도구가 켜지더니 Search Console - [ 검색 노출]- [엑셀러레이티드 모바일 페이지 AMP]라는 페이지가 열렸습니다. 이건 처음 보는건데? 얼마전에 새로 생긴건가 했는데

빠른 게재 모바일 페이지 = (AMP) 라고 합니다.

쉽게 말씀드리면? 

휴대기기에 빠르게 로드되도록 설계된 간소화된 페이지입니다. AMP 호환 페이지는 몇 개의 확장 프로그램이 있는 HTML의 하위집합을 사용한다고 합니다.

즉 휴대기기를 사용시 모바일로 웹 페이지에 접속할 때 접속 속도를 빠르게 해주는 겁니다.

오류의 종류로는?

1. font태그는 허용되지 않습니다.

2. style 속성이 span 태그에 표시되지 않을 수 있습니다.

3. ";" 속성이 'h3' 태그에 표시되지 않을 수 있습니다.

4. embed 태그는 허용되지 않습니다.

5. iframe 태그는 허용되지 않습니다.

6. script 태그는 특정 형식 이외에는 허용되지 않습니다.

등 그밖에 수많은 오류들이 있습니다.

오늘은 여러 오류들 중 (font , iframe, script) error가 나타날때 해결법에 대해 간단히 설명하겠습니다.

본 내용에 앞서서 저는 이쪽 분야의 전문가는 아니라고 말씀을 드리고 싶습니다.

설명에 있어서 지식의 부족한 점이 많기 때문에 초보자 입장에서 해결할 수 있는 법을 공유 하고자 합니다. 

"구글 모바일 AMP 페이지 오류 해결방법"

"구글 모바일 AMP 페이지 오류 해결방법"

[구글 웹마스터 도구]- [접속] -[검색 노출] - [엑셀러레이티드 모바일 페이지 AMP] - [접속]

오른쪽 사진처럼 파란색은 error가 없는 것이고 붉은색은 error가 발생한 페이지가 표시가 됩니다. 

10개가 되네요? error의 내역을 봤더니

우선순위는 1부터 3까지 있습니다.

1. 상응하는 AMP 항목이 있는 금지된 HTML 태그 

2. 페이지에서 사용자가 작성한 자바스크립트가 발견됨

3. 금지되거나 잘못된 HTML 태그 사용

옆에 8, 5, 1 숫자가 보이죠? 이것을 클릭하게 되면 하위메뉴로 이동을 하게됩니다.

좀더 디테일하게 자신이 운영하는 블로그 혹은 사이트 어떤 page에서 오류가 발생했는지 이제부터 분석을하고 수정을 할 수 있습니다.

/m 은 모바일 약자 뒤에 숫자 269 

자신의 블로그 주소 /269 라고 검색을 하셔서 해당 error가 있는 page를 띄워놓고 수정작업을 하시면 편하겠죠?

그전에 하위메뉴의 page를 클릭하면

오른쪽 사진처럼 화면이나옵니다. 

1번은 안내 설명내용이 나옵니다.

2번 수정사항 확인이 중요한데. 오류가 있는지 유효성을 '검사기 실행'으로 할 수 있습니다.

그 아래의 세부정보에는

어떤 Error가 발생했는지 표시가 되는데 여기선 Script 입니다.

AMP URL과 표준 URL이 있는데 전자는 모바일 접속시 환경을 그대로 보여줘 에러가 어떻게 발생하는지 파악이 가능하고, 아래는 피씨에서 보는것과 같이 화면이 출력됩니다.

아래의 내용부터는 모두 "검사기 실행"을 이용해서 수정작업을 하는 방법에 대해 설명할건데요~

"검사기 실행"을 하고 출력되는 화면인데요~

주로 script 오류로는 위 사진처럼 구글 애드센스 광고를 넣을때 

검정색 막대기로 표시해놓은 링크광고 (대형, 소형, 중형), 키워드 광고 등이 있습니다.

왼쪽 사진은 error가 발생한 부분을 line 610, column (열, 행)을 나타내는 것으로 해당 항목을 클릭하면 바로 발생지점으로 이동을 합니다. 맞춤 링크광고 대형이라고 error 문구 아래에 보입니다.

이것을 삭제해주면 문제를 해결 할 수 있습니다.

위 사진은 테스트를 위해서 만들어진 것으로 매칭이 되지 않습니다. 말로 설명을 하겠습니다.

error 발생 지점으로 이동을 해서 이전에 어떤글, 문구가 있는지 파악을 해두고

사이트 또는 블로그 page를 열어서 [수정]을 클릭 후 해당 링크광고가 있는 자리를 찾아

삭제를 해주고 저장해주세요

포스팅할까해요~ 뒤에 링크광고가 숨어있습니다. 그래서 Delete 박스에 공란이 저렇게 크게 있습니다.

마우스로 드래그 또는 키보드 키패드를 이용해 영역설정 후 삭제해줍니다.

해결되면 '검사기 실행 창'에 왼쪽 사진처럼 하단에 아무것도 출력이 되지 않습니다.   

위 사진을 보시면

이번엔 iframe 태그가 허용되지 않는다는 문구가 나오며 역시 에러가 출력되었습니다.

이때 해결방법으로는?

iframe error의 경우는 주로 

(구글 애드센스 광고, 클릭몬 광고, 다음 애드핏, 멀티미디어 삽입 시), 재생 또는 자동으로 출력되는 미디어와 관련이 있습니다.

블로그 또는 사이트에 들어가셔서 [수정] - [HTML로 전환]후 여러 스크립트 언어들이 보일 것이고 단축키 [control + F]를 이용해 iframe을 검색 해줍니다. 해당 동영상 혹은 멀티미디어, 광고 위치가 표시될 것인데 이것을 모두 삭제 후 저장하기를 눌러주시면 됩니다.

HTML 작업이 불편하다 하시면 그냥

오른쪽 사진처럼 유튜브 동영상을 소스코드 붙여넣기로 - [HTML] 적용해서 붙여넣은 것이라면 [수정 창]에서 영상을 delete 로 제거 한 후 save를 눌러주시면 됩니다.

지금까지는 정말 간단한 수정작업이었는데

위 사진에 있는

font 폰트 라는 것은 다른것들 보다 디버깅 하는 것이 훨씬 까다롭습니다.

이건 그냥 저와같은 초보자분들은 다음과 같이 하시는 것을 권해드립니다.

해결방법으로는?

두개의 page를 열것인데 하나는 [일반모드]로 열어 사진이 있다면 모두 다운로드를 받은 후 [포토샵]or 사진폅진 응용소프트 웨어를 이용해서 사진크기를 모두 동일하게 바꿔줍니다.

문제가 있는 (블로그, 사이트) page를 열어 [수정모드]로 전환 후 원본 page의 내용을 그대로 수정모드에서 내용을 모두 지우고 하나하나 차례대로 글을 작성해 주시면 됩니다. 단 이때 원본 글 내용을 복사하여 붙여넣기를 하시면 안됩니다. 이전 폰트가 복사가 되기 때문에. 새롭게 수정모드에서 글을 작성해주고 마지막에 폰트 크기와 속성을 동일하게 변경을 해주시면 됩니다.

그러면 font error 뿐만 아니라 모든 에러를 한꺼번에 고칠 수 있습니다.

시간은 좀 소요될 수 있지만 이 방법이 가장 깔끔합니다.

보통 프로그래머분들은 에러가 많이 보일때 에러가 있는 곳을 디버깅 해서 edit 하는 것보다는 차라리 프로그램을 새로 짜는 것이 낫다는 말을 합니다.

눈에 쉽게 보이는 에러는 치료하기가 쉽습니다. 하지만 계속해서 하나를 고치면 또 다른 에러가 발생한다면 정말 스트레스겠죠?

좀 시간이 걸리더라도 베이스로 깔끔하게 시작하는 것이 정신건강에 좋습니다.

지금까지 에러를 고치는 방법에 대해 소개를 드렸는데요~

구글 모바일 AMP 페이지 오류를 고쳤으니 이제 적용시키는 것을 해야하는데요~

그냥 가만히 냅두면 정기적으로 다시 크롤링 될 시기에 자동으로 업데이트가 됩니다.

수동으로 하는 방법은? 구글 웹마스터도구 에 접속 후 [크롤링]-[Fetch As Google]에서 오른쪽 사진처럼 고치기 작업한 page 숫자를 입력 후 [가져오기 및 렌더링]을 눌러주시면 됩니다.

일정 시간이 지나면 상태에 완료로 변경이 될것입니다.

긴 장문의 글을 끝까지 읽어주셔서 감사합니다. 

이 글을 읽은 뷰어분들 모두 에러를 없애는데 도움이 되셨으면 합니다.

항상 건강하시고 행복하세요 ^ㅡ^