대부분의 검색엔진은 페이지의 모바일 친화도를 기준으로 페이지 순위를 매깁니다. 표시 영역 메타 태그가 없으면 휴대기기는 일반적인 데스크톱 화면 너비로 페이지를 렌더링한 다음 페이지를 축소하여 읽기 어려워집니다.
표시 영역 메타 태그를 설정하면 표시 영역의 너비와 배율을 제어하여 모든 기기에서 크기가 올바르게 조정되도록 할 수 있습니다.
Lighthouse 표시 영역 메타 태그 감사 실패 이유
Lighthouse는 표시 영역 메타 태그가 없는 페이지를 신고합니다.
다음 조건을 모두 충족하지 않으면 페이지가 감사에 실패합니다.
- 문서의 <head>에 <meta name="viewport"> 태그가 포함되어 있습니다.
- 표시 영역 메타 태그에 content 속성이 포함되어 있습니다.
- content 속성의 값에 width= 텍스트가 포함되어 있습니다.
표시 영역 메타 태그를 추가하는 방법
적절한 키-값 쌍이 포함된 표시 영역 <meta> 태그를 페이지의 <head>에 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
각 키-값 쌍의 기능은 다음과 같습니다.
- width=device-width는 표시 영역의 너비를 기기의 너비로 설정합니다.
- initial-scale=1는 사용자가 페이지를 방문할 때 초기 확대/축소 수준을 설정합니다.