모바일사이트 제작에서 가장 많이 일어나는 실수 – UA식별 미스로 구글에 인식이 안되는 사이트

mobile user agent

이글은 모바일 검색엔진최적화 관련 내용으로, 의외로 많은 모바일 사이트가 구글에 제대로 인식되지 않는 경우가 있어 이에 대한 원인을 설명하는 글입니다.

한국에서는 검색엔진최적화를 많이 의식하지 않기 때문에, 모바일 사이트가 디바이스에 표시되기만 하면 OK, 백그라운드의 셋팅이나 리다이렉트 등은 적절히 되어있지 않더라도 그다지 별로 신경 쓰지 않으며 또 그것을 구분해 낼 수 있는 웹마스터도 많지 않은 것이 현실입니다.

해외마케팅을 진행한다면 이야기는 달라집니다. 최소한 자신의 사이트가 제대로 구글에 인식되어 검색되기를 누구나가 바랄것이기에 모바일사이트의 구글 인식여부의 체크는 중요한 이슈가 됩니다. 

USER AGENT와 모바일 사이트

보통 우리가 브라우저로 사이트에 접속하게 되면 서버에서 자료를 요청하게 되는데, 서버는 우리가 사용하는 디바이스의 종류를 확인하고 사이트의 정보를 보내줍니다. 이때 유저를 식별하는 것이 USER AGENT 입니다.

PC중심의 웹시대때에는 PC의 소스만 보내주면 되었지만, 이제는 다양한 디바이스를 분석(PC or 모바일)하고 그에 맞는 소스를 내보내주어야 하기 때문에 좀더 복잡해 졌다고 할 수 있겠네요.

이전글에 구글모바일검색엔진최적화(http://www.aun-korea.com/?p=1639)에서도 모바일 사이트의 셋팅시 주의점을 잠깐 언급했었지만, 에이전트 (User Agent)의 식별이 적절하지 않을 경우, 모바일 친화적 사이트를 만들었지만 Google에 인식되지 않고 있다는 질문들이 많아 이에 관한 글을 적어보고자 합니다.

모바일 친화적(Mobile Friendly)라고 하더라도

Mobile Friendly 테스트에 합격하고 PageSpeed Insight의 모바일 사용자 환경에서 100 점을 취득하였음에도 불구하고, 웹 마스터 도구의 모바일 사용성 보고서에서 오류가 사라지지 않고, “모바일대응”레이블 이 검색 결과에 나타나지 않습니다.

이러한 상황은 다수의 사이트에서 발생하는 현상으로, 새로 제작된 사이트에서도  일어나고 있는 일이기 때문에,  테스트 도구 및 보고서, 검색 결과등이 원인이 아닐 것입니다. 그럼 무엇이 원인일까요?

원인은 UA의 배분 실수

문제의 원인은 USER AGENT를 제대로 배분하지 못하는 것에 있습니다. 
문제가 된 사이트들은 대부분 동적 전달로 구성되어 있었던 사이트입니다.
리스폰시브 웹사이트와 동적게재 사이트로 제작된 사이트는 모바일과 PC의URL이 같습니다. 리스폰시브웹은 URL과 소스가 모두 같기 때문에 문제가 발생하지 않습니다. 하지만 동적게재 사이트는 URL은 동일하지만, HTML소스와 CSS가 PC용과 모바일용으로 나누어져 있기 때문에 유저에이전트를 확인하고 그에 적합한 화면구성의 HTML과 CSS를 보내주지 못하면 문제가 생기게 됩니다.

리스폰시브웹의 소스예

동적게재 사이트의 예

상기 이미지 원본 : https://goo.gl/uu2Wer

구글봇은 PC와 모바일봇이 있는데, 이러한 구글봇도 결국 우리가 사용하는 웹브라우저의 형태로 접근해서 사이트의 정보를 받아오는데, 구글모바일봇에 PC의 내용정보를 보내버린다면 모바일사이트가 없다고 인식해 버리는 것은 당연한 일이 됩니다. 따라서 사용자 에이전트에 의한 분류를 적절하게 하는것이, Googlebot에 대한 오작동을 막을수 있습니다.

또한 더큰 문제는 자칫하면 구글이 스팸으로 정의하고 있는 사이트 은폐 즉, Googlebot 및 사용자에게 별도의 콘텐츠를 보여주는 행위로 오해를 살 수 있을것 같습니다. 

Vary HTTP 헤더 또는 미디어 쿼리 지원

하지만 원인을 해결하는 것은 그리 어렵지 않습니다. 단순히 사용자 에이전트의 인식을 제대로 셋팅하는 것으로 문제는 해결할 수 있습니다.
• Vary HTTP 헤더
• CSS 미디어 쿼리

Vary HTTP 헤더

캐시된 CSS (콘텐츠)의 올바른 전달을 통해 모바일 단말기 및 모바일 버전 Googlebot이 PC 용 콘텐츠를 검색하지 않도록 Vary HTTP 헤더를 반환합니다.
Vary HTTP 헤더의 기능 은 구글 모바일 검색엔진 최적화에서 설명되어 있습니다.

CSS 미디어 쿼리

같은 파일이든 다른 파일 어느쪽이라도 상관 없지만, CSS 미디어 쿼리를 이용하여 모바일 단말기(화면 크기)에 맞게 CSS를 적용합니다.
CSS미디어쿼리는 사용자 에이전트에 관계하지 않기 때문에 이번과 같은 문제가 발생하지 않습니다.
구글의 관계자 중에는 미디어 쿼리의 사용을 권장하고 있는 분들도 있습니다. 이것은 유저에이전트에 상관없이 사이트를 적절히 표시하기 위한 한 방법이라고 보시면 됩니다.

레스 폰 시브 웹 디자인의 장점

레스폰시브 웹 디자인이라면, 위에서 언급한 문제는 일어나지 않았을 것입니다.
사용자 에이전트에 의존하지 않으며 CSS (및 HTML)는 하나입니다.

• 사용자 에이전트에 따라 소스를 배분함
• 모바일 • PC 용 파일 관리
이러한것이  스마트 폰에 대한 대응 문제의 주된 원인으로, 레스폰시브 웹 디자인은 이러한 불씨를 가지고 있지 않습니다.
설정 및 유지 보수의 간편함을 가진 레스폰시브 웹 디자인을 Google이 권장하는 이유도 이런 부분 때문입니다.
레스폰시브 웹 디자인이라고 해서 모두에서 성능이 뛰어나는 것은 결코 아니지만 사이트를 만든다면 가장 유력한 검토대상이 될 것입니다.

정리

정리하면 모바일 사이트를 제작할 때, 동적 전달 및 별도의 URL의 구성을 채용 할 때 설정 실수, 기술적 실수가 생기지 않도록 재차 확인을 하는 것이 중요할 것 같습니다.

의외로 사이트 제작 업체도 이러한 부분에는 무지한 경우가 상당히 많기 때문입니다.

그러한 이유는 사이트 제작은 사이트가 브라우저에 구동되는 부분이고, 현재 다루는 내용은 검색에 자신의 사이트가 잘 검색 될 것인지 아닌지에 대한 최적화영역에 해당하기 때문입니다. 

Summary
Reviewer
Ryu
Review Date
Reviewed Item
모바일사이트 제작시 모바일최적화 요소중 UA에 대한 셋팅이 잘못될 경우, 구글색인에 문제가 생길 수 있다는 사실은 알게 되었습니다.
Author Rating
5
Please follow and like us:

Social media & sharing icons powered by UltimatelySocial
RSS
Facebook
Facebook
Google+
Google+
http://www.aun-korea.com/%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91%EC%97%90%EC%84%9C-%EA%B0%80%EC%9E%A5-%EB%A7%8E%EC%9D%B4-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%8B%A4%EC%88%98-ua%EC%8B%9D/">
SHARE
YouTube
YouTube
NaverPost
NaverBlog