품질·성능·보안 · 공식 문서
m. 사이트 캐노니컬 설정, 모바일 구성별 태그와 헤더
반응형은 viewport 메타 태그만 넣으면 나머지가 저절로 맞고, 동적 게재는 Vary: user-agent 응답 헤더가 핵심입니다. m. 사이트는 m. 페이지에 PC URL을 가리키는 canonical, PC 페이지에 m. URL을 가리키는 alternate 를 짝으로 넣고 HTTP 리디렉션으로 잇습니다.
모바일 화면을 만드는 방식은 셋이고, 방식마다 검색엔진에 알려야 할 것이 다릅니다. 같은 m. 사이트라도 태그 하나가 빠지면 PC와 모바일이 서로 다른 페이지로 읽힙니다.
어느 방식을 고를지는 「반응형 홈페이지와 m. 사이트 차이」 편에 적었습니다. 이 편은 이미 운영 중인 구성에 실제로 넣을 태그와 헤더를 다룹니다.
발견 01
구성별로 챙길 설정은 반응형 1가지, 동적 게재 2가지, m. 사이트 7가지입니다
| 설정 | 반응형 웹 디자인 | 동적 게재 | 별도 URL(m. 사이트) | 공식 문서 원문 |
|---|---|---|---|---|
| viewport 메타 태그 | <meta name="viewport" content="width=device-width"> | 문서 언급 없음 | 문서 언급 없음 | 네이버 「모바일 사용성」의 반응형 웹 예시 코드 |
| Vary: user-agent 응답 헤더 | 해당 없음(같은 HTML) | 필요 | 필요(기기별 리디렉션 응답) | Dynamic serving: Uses the same URL regardless of device. This configuration relies on user-agent sniffing and the Vary: user-agent HTTP response header to serve a different version of the HTML to different devices. Separate URLs: Serves different HTML to each device, and on separate URLs. Like dynamic serving, this configuration relies on the user-agent and Vary HTTP headers to redirect users to the device-appropriate version of the site.동적 게재는 기기와 관계없이 같은 URL을 쓰고, 사용자 에이전트 확인과 Vary: user-agent 응답 헤더로 기기마다 다른 HTML을 준다. 별도 URL은 기기마다 다른 HTML을 다른 URL로 주며, 동적 게재처럼 사용자 에이전트와 Vary 헤더로 사용자를 기기에 맞는 버전으로 리디렉션한다. |
| rel=canonical | 문서 언급 없음(URL 하나) | 문서 언급 없음(URL 하나) | m. 페이지와 PC 페이지 모두 PC URL. <link rel="canonical" href="https://example.com/"> | Use the correct rel=canonical and rel=alternate link elements between your mobile and desktop versions. The desktop URL is always the canonical, and the mobile version is the alternate of that URL.모바일과 데스크톱 버전 사이에 rel=canonical 과 rel=alternate 링크 요소를 바르게 넣는다. 데스크톱 URL이 늘 캐노니컬이고, 모바일 버전은 그 URL의 alternate 다. |
| rel=alternate(media) | 해당 없음 | 해당 없음 | PC 페이지에만, 짝 m. URL. <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/"> | Use the correct rel=canonical and rel=alternate link elements between your mobile and desktop versions.모바일과 데스크톱 버전 사이에 rel=canonical 과 rel=alternate 링크 요소를 바르게 넣는다. |
| hreflang(다국어 사이트) | 문서 언급 없음 | 문서 언급 없음 | m. 은 m. 끼리, PC 는 PC 끼리 | Your mobile URLs' hreflang must point to mobile URLs, and similarly desktop URL hreflang must point to desktop URLs.모바일 URL의 hreflang 은 모바일 URL을, 데스크톱 URL의 hreflang 은 데스크톱 URL을 가리켜야 한다. |
| 기기별 리디렉션 | 해당 없음 | 해당 없음(같은 URL) | HTTP 리디렉션, 양쪽 방향 | 사용자의 웹 브라우저 환경에 맞게 redirect 처리 시는 자바스크립트가 아닌 HTTP redirect를 사용해주시기 바랍니다. |
| robots 메타 태그·robots.txt 규칙 | 하나라서 저절로 같음 | 두 HTML에 같은 태그 | 두 사이트에 같은 태그·같은 규칙 | Use the same robots meta tags on the mobile and desktop site. In most cases, use the same robots.txt rules for both mobile and desktop versions of your site.모바일과 데스크톱 사이트에 같은 robots 메타 태그를 쓴다. 대부분의 경우 두 버전에 같은 robots.txt 규칙을 쓴다. |
| 모바일 URL의 # 조각 | 해당 없음 | 해당 없음 | m. URL에 # 조각을 쓰지 않음 | Make sure that your mobile version doesn't have URL fragments.모바일 버전 URL에 # 으로 시작하는 조각(fragment)이 없게 한다. |
반응형은 한 URL에 한 HTML이라 PC와 모바일이 어긋날 자리가 없습니다. 구글도 자기 문서의 권장사항이 동적 게재와 별도 URL에만 해당한다고 적었습니다.
네이버는 반응형 페이지의 head 에 넣을 코드로 <meta name="viewport" content="width=device-width"> 를 예로 들었습니다.
The contents of this guide only apply to dynamic serving and separate URL configurations. In case of responsive design, the content and the metadata are the same on the mobile and desktop version of the pages.
이 안내는 동적 게재와 별도 URL 구성에만 해당한다. 반응형 디자인은 모바일과 데스크톱 페이지의 콘텐츠·메타데이터가 같다.
발견 02
동적 게재는 같은 URL에 다른 HTML을 주므로 Vary: user-agent 헤더로 알립니다
Dynamic serving: Uses the same URL regardless of device. This configuration relies on user-agent sniffing and the Vary: user-agent HTTP response header to serve a different version of the HTML to different devices.
Vary 헤더는 「이 응답은 기기에 따라 달라진다」는 표시입니다. 구글은 별도 URL 구성도 같은 헤더로 기기에 맞는 버전으로 보낸다고 적었습니다.
동적 게재는 HTML이 두 벌이라 robots 메타 태그도 두 벌입니다. 한쪽 HTML에만 noindex 가 남지 않았는지 함께 봅니다.
발견 03
m. 사이트는 m. 쪽 canonical 과 PC 쪽 alternate 를 짝으로 넣습니다
| 넣는 자리 | 넣는 태그(구글 예시 그대로) | 가리키는 곳 |
|---|---|---|
| m. 페이지(예: m.example.com) | <link rel="canonical" href="https://example.com/"> | 짝 PC URL |
| PC 페이지(예: example.com) | <link rel="canonical" href="https://example.com/"> <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/"> | 자기 자신과 짝 m. URL |
The desktop URL is always the canonical, and the mobile version is the alternate of that URL.
데스크톱 URL이 늘 캐노니컬이고, 모바일 버전은 그 URL의 alternate 다.
네이버도 m. 페이지마다 짝 PC URL을 canonical 로 적으라고 권하고, 그 이유를 이렇게 적었습니다(원문: 이 작업은 네이버의 검색로봇이 여러분의 데스크톱 및 모바일 사이트에 방문할 때 콘텐츠가 중복으로 처리되지 않도록 알려주는 역할을 합니다.)
다국어 m. 사이트라면 hreflang 도 따로 짭니다. m. 페이지의 hreflang 은 다른 언어의 m. 페이지를, PC 페이지는 다른 언어의 PC 페이지를 가리킵니다.
발견 04
기기별 이동은 HTTP 리디렉션으로, 양쪽 방향 모두 짝 URL로 보냅니다
| 방향 | 할 일 | 네이버 원문 |
|---|---|---|
| 휴대전화로 PC URL 접속 | 짝 m. URL로 HTTP 리디렉션 | 모바일 기기에서 여러분의 데스크톱 사이트로 접근시 모바일 사이트로 redirect 처리해주세요. 마찬가지로 데스크톱에서 모바일 사이트로 접근시는 데스크톱 사이트로 redirect 처리하는 것도 고려해야 합니다. |
| PC로 m. URL 접속 | 짝 PC URL로 HTTP 리디렉션 | 모바일 기기에서 여러분의 데스크톱 사이트로 접근시 모바일 사이트로 redirect 처리해주세요. 마찬가지로 데스크톱에서 모바일 사이트로 접근시는 데스크톱 사이트로 redirect 처리하는 것도 고려해야 합니다. |
| HTTP 리디렉션이 어려울 때 | 자바스크립트 이동을 쓰고 HTML 본문은 비움 | 만약, 기술적인 문제로 HTTP redirect 사용이 어렵다면 자바스크립트 redirect를 사용하시되 HTML 본문은 비워두는 것을 권장합니다. |
구글은 여러 URL이 같은 URL로 가면 그 페이지들이 모두 색인에서 빠진다고 적었습니다(원문: If different URLs redirect to the same URL (for example, to the home page on mobile devices) after your domain is enabled for mobile-first indexing, all these pages will be missing from the index.) 리디렉션 결과는 「리다이렉트 확인 방법」 편의 순서로 봅니다.
발견 05
같은 설정도 B2B·B2C·B2G 는 먼저 확인할 자리가 다릅니다
예시 ① 해외 바이어용 다국어 m. 사이트를 둔 부품 제조사(B2B)
언어별 PC 페이지와 m. 페이지가 모두 있다면 hreflang 이 네 갈래로 엉키기 쉽습니다. m. 은 m. 끼리, PC 는 PC 끼리 묶였는지부터 봅니다.
예시 ② 같은 URL에서 모바일용 HTML을 따로 주는 쇼핑몰(B2C)
URL은 하나인데 휴대전화에서 상품 설명이 짧게 나온다면 동적 게재입니다. 응답 헤더의 Vary 와 모바일 HTML의 상품 설명 분량을 함께 확인합니다.
예시 ③ m. 누리집을 따로 둔 공공기관(B2G)
공지 상세 URL이 PC와 m. 에서 번호 체계가 다르면 1:1 짝이 끊깁니다. 유지보수 과업에 짝표 작성과 canonical·alternate 점검을 함께 적습니다.
그럼 우리 사이트는 어떤 순서로 점검하나요?
- 휴대전화로 홈과 상세 페이지를 열어 URL이 그대로인지(반응형·동적 게재), m. 으로 바뀌는지(별도 URL) 봅니다.
- 같은 URL인데 PC와 모바일 HTML이 다르면 동적 게재입니다. 응답 헤더에 Vary: user-agent 가 있는지 봅니다.
- m. 사이트라면 m. 페이지 소스의 canonical 이 짝 PC URL을, PC 페이지의 alternate 가 짝 m. URL을 가리키는지 봅니다.
- PC URL을 휴대전화로, m. URL을 PC로 열어 HTTP 리디렉션으로 짝 URL에 가는지 봅니다.
- 두 버전의 robots 메타 태그와 robots.txt 규칙을 나란히 놓고 같은지 봅니다.
- 서치 콘솔과 서치어드바이저에 두 버전을 모두 등록했는지 확인합니다.
조사 방법
- Google Search Central 「Mobile site and mobile-first indexing best practices」 (문서 수정일 2025-12-10) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
- 네이버 서치어드바이저 「모바일 사용성」 (문서 수정일 2020-08-03) · 최종 확인일 2026-10-25 · https://searchadvisor.naver.com/guide/markup-mobile
- 설정 8가지는 두 문서가 모바일 구성에 대해 적은 태그·헤더·리디렉션을 구성별로 나란히 볼 수 있게 묶은 것입니다. 묶는 방식과 구성별 칸의 짧은 설명은 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 구글 원문은 영어판(hl=en)이고, 구성·도구 이름은 같은 문서 한국어판(hl=ko) 표기를 따랐습니다. 네이버 원문은 한국어 그대로입니다.