[TIL] 22.11.22 SEO 기본 가이드(4)

SEO 기본 가이드

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko#mobile

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google Developers

 

사이트를 모바일 친화적으로 만들기

오늘날의 세상은 모바일 중심으로 돌아가기 때문에 모바일 기능을 지원하는 사이트가 있어야 온라인 인지도를 유지할 수 있다. 2016년 말부터 구글에서는 사이트 콘텐츠의 모바일 버전을 주로 사용해 순위를 지정하고 구조화된 데이터를 파싱하며 스니펫을 생성하는 실험을 시작했다.

 

기기 간 차이점 이해하기

• 스마트폰 - Android를 실행하는 기기, iPhone, Windows Phone 등. 모바일 브라우저는 관범위한 HTML5 사양을 렌더링할 수 있다는 점에서 데스크톱 브라우저와 유사하지만 화면 크기가 더 작고 대부분 기본 방향이 세로.
• 태블릿 - 구글에서는 태블릿을 별도의 기기 유형으로 간주. 휴대기기에 관해 이야기할 때는 대개 태블릿이 포함되지 않음. 태블릿의 화면은 보통 더 크므로 태블릿에 최적화된 콘텐츠를 제공하지 않는 한 사용자는 태블릿에서도 사이트가 스마트폰 브라우저가 아닌 데스크톱 브라우저에서 표시되는 것처럼 표시될 것이라고 기대함.
• 멀티미디어 휴대전화 - XHTML 표준에 맞게 코딩된 페이지를 렌더링하고 HTML5 마크업, JS(ECMAscript)를 지원할 수 있지만 HTML5 표준의 일부 확장 API를 지원하지 못할 수 있는 브라우저가 포함된 휴대전화. 일반적으로 스마트폰이 아닌 대부분의 3G 지원 휴대전화의 브라우저를 말함.
• 피처폰 - 표준 HTML을 사용해 코딩된 일반 데스크톱 웹페이지를 렌더링하는 기능 없음. 여기에는 cHTML(iMode), WML, XHTML-MP 등만 렌더링하는 브라우저 포함.

 

모바일 전략 선택하기

• 반응형 웹 디자인(권장)
• 동적 게재
• 별도 URL

 

반응형 웹 디자인

https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ko 

반응형 웹 디자인  |  검색 센터  |  Google Developers

 

반응형 웹 디자인은 서버가 항상 모든 기기에 동일한 HTML 코드를 보내고 CSS를 사용해 기기의 페이지 렌더링을 조정하는 설정이다.

반응형 디자인은 모든 기기에 동일한 코드를 게재하고 화면 크기에 맞게 조정한다.

요약

• meta name="viewport" 태그를 사용해 브라우저에 콘텐츠 조정 방법을 알린다.
• 자세한 내용은 웹 기초 확인

 

meta name="viewport" 사용

페이지의 모든 기기에 맞춰 조정된다는 것을 브라우저에 알리려면 문서의 헤드에 메타태그를 추가해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

meta viewport 태그는 페이지의 크기와 배율을 기기 너비에 맞춰 조정하는 방법을 브라우저에 알린다. meta viewport 요소가 없으면 모바일 브라우저가 기본적으로 페이지를 데스크톱 화면 너비로 렌더링한다(대개 980px, 기기에 따라 다름). 그런 다음 모바일 브라우저는 글꼴 크기를 늘리고 화면에 맞춰 콘텐츠를 조정하거나 화면 크기에 맞춰 콘텐츠의 일부만 표시해 보기 좋게 조정한다.

이로 인해 글꼴 크기의 일관성이 없어지게 되면 사용자가 두번 탭하거나 확대해야 할 수 있는데, 이런 경우 구글에서는 이러한 페이지를 모바일에 최적화된 것으로 판단하지 않을 수 있다.

왼쪽: meta viewport가 지정되지 않은 페이지. 오른쪽: 지정된 페이지

 

반응형 디자인의 장점

• 사용자가 단일 URL로 손쉽게 콘텐츠를 공유, 연결 가능
• 데스크톱/모바일 페이지의 존재를 알리지 않고도 구글의 알고리즘이 페이지에 정확하게 색인 생성 속성을 지정하는 데 도움
• 같은 콘텐츠에 여러 페이지를 유지하기 위한 엔지니어링 시간 절약
• 모바일 사이트에 영향을 미치는 흔히 발생하는 실수의 가능성 감소
• 기기에 최적화되어 있어 사용자에게 표시하기 위한 리디렉션이 필요하지 않아 로드 시간 감소
• 구글봇이 사이트를 크롤링할 때 리소스 절감. 콘텐츠의 모든 버전을 가져오기 위해 다른 구글봇 사용자 에이전트로 여러 번 크롤링하는 것이 아니라 단일 구글봇 사용자 에이전트가 페이지를 한 번만 크롤링하면 됨. -> 효율성 향상, 사이트 콘텐츠의 색인을 더 많이 생성하고 최신 상태로 유지하는 데 간접적인 도움

 

robots.txt나 그 외의 방법으로 구글봇의 페이지 에셋(css, js, 이미지) 크롤링을 차단하는 일이 없도록 한다. 이런 외부 파일에 전체 액세스를 허용하면 구글 알고리즘이 사이트의 반응형 웹 디자인 설정을 감지하고 적절하게 처리하는 데 도움이 된다.