HTML의 head 태그를 활용하여 모바일 사용성을 최적화하는 방법에 대한 상세한 가이드입니다. 반응형 웹, 별도 모바일 URL 제공, 사용자의 브라우저 환경에 따른 자동 redirect 처리 등을 다루어, 다양한 디바이스에서 웹 콘텐츠를 쉽게 이용할 수 있도록 도움을 제공합니다.
1. 반응형 웹 (Responsive Web)
HTML 문서의 head 태그 내에 있는 meta 태그를 활용하여 반응형 웹을 구현합니다. 브라우저는 웹 문서의 가로폭을 기기의 스크린 크기에 맞게 조절하여 사용자가 페이지의 확대/축소 없이 모바일에서도 웹 콘텐츠를 편리하게 이용할 수 있도록 돕습니다.
```html
head
meta name="viewport" content="width=device-width"
/head
```
2. 별도 모바일 URL 제공
여러분의 웹사이트가 데스크톱 및 모바일 사이트에 대응하는 경우, 별도 모바일 사이트의 페이지에 데스크톱 사이트의 URL을 명시적으로 지정하여 중복 처리를 방지합니다. 모바일 사이트의 head 태그에는 canonical 태그를 활용하여 대응되는 데스크톱 사이트의 URL을 명시합니다.
```html
!-- 모바일 사이트의 메인 페이지 --
head
link rel="canonical" href="http://www.mysite.com/"
/head
!-- 모바일 사이트의 개별 웹 페이지 --
head
link rel="canonical" href="http://www.mysite.com/article/article1.html"
/head
```
3. 사용자의 브라우저 환경에 따른 자동 Redirect 처리
모바일 기기에서 데스크톱 사이트에 접근하거나 데스크톱에서 모바일 사이트에 접근할 때, 사용자의 브라우저 환경에 맞게 자동으로 Redirect 처리를 구현합니다. HTTP Redirect를 사용하여 간단하게 설정할 수 있으며, 검색로봇이 해당 처리를 인식할 수 있도록 합니다.
예시:
- 데스크톱에서 http://m.mysite.com/으로 접근 시, http://www.mysite.com/으로 Redirect 처리.
- 모바일 기기에서 http://www.mysite.com에 접근 시, http://m.mysite.com으로 Redirect 처리.
```html
!-- 모바일 사이트에서 데스크톱 사이트로 Redirect --
head
meta http-equiv="refresh" content="0;url=http://www.mysite.com/"
/head
!-- 데스크톱에서 모바일 사이트로 Redirect --
head
meta http-equiv="refresh" content="0;url=http://m.mysite.com/"
/head
```
단, HTTP Redirect를 사용할 때는 자바스크립트가 아닌 HTML의 meta 태그를 활용하는 것이 검색로봇에게 더 적합합니다.