SEO 규칙
엔진 사양
SEO 요소
웹사이트 콘텐츠
모바일 적응은 SEO에서 매우 중요하며, 검색 엔진 순위 향상, 사용자 경험 개선, 이탈률 감소, 접근성 향상 및 전환율 증가 등 여러 측면에서 나타납니다. 반응형 디자인, 페이지 로딩 속도 최적화, 콘텐츠 적응 보장, 터치 경험 최적화 및 정기적인 테스트 및 모니터링을 통해 웹사이트의 모바일 친화성을 크게 향상시켜 SEO 효과를 강화할 수 있습니다. 모바일 인터넷 시대에 모바일 적응을 중시하는 것은 성공을 위한 핵심입니다. 모바일 적응의 SEO 중요성은 주로 다음과 같은 측면에서 나타납니다:
1. 검색 엔진 순위 향상
모바일 우선 색인(Mobile-First Indexing): 구글은 이제 웹사이트의 모바일 버전을 기반으로 주로 색인화하고 순위를 매깁니다. 즉, 웹사이트가 모바일 장치에서 성능이 좋지 않으면 검색 결과에서 순위에 영향을 줄 수 있습니다.
알고리즘 업데이트: 구글 및 기타 검색 엔진의 알고리즘은 모바일 친화적인 웹사이트를 우선 고려합니다. 예를 들어, 구글의 모바일 친화적 업데이트는 모바일 친화성이 순위 신호임을 명확히 밝히고 있습니다.
2. 사용자 경험 개선
페이지 로딩 속도: 모바일 장치에서의 페이지 로딩 속도는 사용자 경험에 매우 중요합니다. 느린 로딩 속도는 이탈률을 증가시키고 사용자의 웹사이트 체류 시간에 영향을 주어 SEO에 간접적인 영향을 미칩니다.
화면 크기 적응: 모바일 적응은 콘텐츠가 다양한 화면 크기에 적응하도록 하여 일관된 사용자 경험을 제공합니다. 좋은 사용자 경험은 이탈률을 줄이고 사용자 상호작용을 증가시켜 SEO 효과를 향상시킵니다.
3. 이탈률 감소
반응형 디자인: 반응형 디자인을 통해 웹사이트는 다양한 장치의 화면 크기와 해상도에 맞춰 자동으로 레이아웃을 조정할 수 있습니다. 이는 콘텐츠 표시가 좋지 않아 사용자가 빠르게 웹사이트를 떠나는 것을 줄여 이탈률을 감소시킵니다.
터치 최적화: 버튼과 링크의 크기와 위치를 최적화하여 터치에 더 친화적이게 하면 사용자 상호작용률을 높이고 이탈률을 줄이는 데 도움이 됩니다.
4. 접근성 향상
쉬운 내비게이션: 모바일 적응은 모바일 장치에서 내비게이션 메뉴와 링크가 쉽게 사용되고 접근할 수 있도록 보장합니다. 이는 웹사이트에서 사용자 경험을 향상시키는 데 매우 중요합니다.
텍스트 가독성: 글꼴 크기와 간격을 조정하여 모바일 장치에서 텍스트를 쉽게 읽을 수 있도록 하여 읽기 어려움으로 인해 사용자가 웹사이트를 떠나는 가능성을 줄입니다.
5. 전환율 향상
편리한 조작: 양식, 장바구니 및 결제 프로세스를 모바일 장치에서 조작하기 쉽게 최적화하면 사용자가 조작을 포기할 가능성을 줄이고 전환율을 높입니다.
로컬 검색 최적화: 많은 사용자가 모바일 장치를 통해 로컬 검색을 하므로 모바일 적응을 보장하면 로컬 검색 가시성과 전환율을 향상시킬 수 있습니다.
모바일 적응 구현을 위한 모범 사례
1. 반응형 디자인 사용
자동 레이아웃 조정: 웹사이트가 다양한 장치 화면 크기에 따라 자동으로 레이아웃을 조정할 수 있도록 합니다.
미디어 쿼리 사용: CSS 미디어 쿼리를 통해 다양한 화면 크기에서 스타일을 정의합니다.
2. 페이지 로딩 속도 최적화
이미지 최적화: 이미지를 압축하고 WebP와 같은 적절한 파일 형식을 사용합니다.
CDN 사용: 콘텐츠 전송 속도를 향상시키기 위해 콘텐츠 전송 네트워크(CDN)를 사용합니다.
HTTP 요청 감소: CSS 및 JavaScript 파일을 병합하여 HTTP 요청 횟수를 줄입니다.
3. 콘텐츠 적응 보장
유연한 레이아웃: 유연한 레이아웃을 사용하여 화면 크기에 따라 페이지 요소가 자동으로 조정되도록 합니다.
가독성: 모든 장치에서 텍스트가 좋은 가독성을 갖도록 글꼴 크기, 줄 간격 및 대비를 포함합니다.
4. 터치 경험 최적화
버튼과 링크: 버튼과 링크가 적절한 크기로 되어 쉽게 터치할 수 있도록 합니다.
터치 대상 간격: 오작동을 방지하기 위해 터치 대상 간의 간격을 늘립니다.
5. 테스트 및 모니터링
다양한 장치 테스트: 시뮬레이터와 실제 장치를 사용하여 다양한 화면 크기와 운영 체제에서 웹사이트 성능을 테스트합니다.
모니터링 도구: Google Search Console의 모바일 친화성 보고서와 PageSpeed Insights 도구를 사용하여 모바일 성능을 정기적으로 모니터링하고 최적화합니다.
코드 적응과 자동 리다이렉션 적응은 두 가지 일반적인 모바일 적응 방식입니다
코드 적응(반응형 디자인): 미디어 쿼리, 유연한 레이아웃, 유연한 단위 등을 사용하여 웹사이트가 다양한 화면 크기와 해상도에 적응할 수 있도록 합니다. 이 방법은 동일한 URL에서 다양한 장치에 일관된 경험을 제공해야 하는 경우에 적합합니다.
자동 리다이렉션 적응: 사용자 에이전트 확인, 서버 측 파싱, 뷰포트 너비 확인 등의 방법을 통해 사용자를 해당 모바일 또는 데스크톱 페이지로 자동 리다이렉션합니다. 이 방법은 다양한 장치에 대해 다른 URL을 제공해야 하는 경우에 적합합니다.
다음은 그들의 상세한 구현 방식입니다:
1. 코드 적응(반응형 디자인)
반응형 디자인의 구현 방식은 주로 다음과 같습니다:
(1) 미디어 쿼리 사용
CSS 미디어 쿼리를 통해 다양한 화면 크기와 해상도에 따라 다른 스타일을 적용할 수 있습니다.
예시:
(2) 유연한 레이아웃 사용
유연한 레이아웃(Flexbox) 또는 그리드 레이아웃(Grid)을 사용하면 반응형 디자인을 쉽게 구현할 수 있습니다.
Flexbox 예시:
Grid 예시:
(3) 유연한 단위 사용
백분율, em, rem 등 상대 단위를 사용하여 레이아웃이 다양한 화면 크기에 적응할 수 있도록 합니다.
예시:
2. 자동 리다이렉션 적응
자동 리다이렉션 적응은 사용자 장치에 따라 사용자를 해당 모바일 또는 데스크톱 페이지로 자동 리다이렉션하는 것을 의미합니다.
(1) 사용자 에이전트 기반 리다이렉션
사용자 에이전트를 확인하여 사용자가 사용하는 장치를 판단하고 리다이렉션을 수행합니다.
예시(JavaScript 사용):
(2) 서버 측 리다이렉션
서버 측에서 HTTP 요청 헤더의 사용자 에이전트 정보를 파싱하여 리다이렉션을 수행합니다.
예시(PHP 사용):
(3) 뷰포트 너비 기반 리다이렉션
장치의 뷰포트 너비를 확인하여 리다이렉션을 수행합니다.
예시(JavaScript 사용):
상세 사양:
1. 적응형 디자인: 동일한 URL을 통해 동일한 HTML 코드를 제공하고 사용자가 사용하는 장치를 고려하지 않지만 화면 크기에 따라 다른 방식으로 콘텐츠를 표시하는 모바일 적응 방식을 사용하는 것을 권장합니다;
2. 코드 적응 방식: 사용자 에이전트 감지 및 Vary: user-agent HTTP 응답 헤더에 의존하여 다양한 장치에 대해 다른 버전의 HTML을 제공합니다;
3. 리다이렉션 적응: 별도의 URL을 사용하여 각 장치에 대해 다른 HTML을 제공하며, 사용자 에이전트 및 Vary HTTP 헤더에 의존하여 사용자를 리다이렉션합니다;
4. 코드 적응과 리다이렉션 적응을 사용할 때, 모바일 버전과 데스크톱 버전 웹사이트에서 동일한 robots 메타 태그, noindex 태그, 구조화된 코드를 사용합니다;
5. 리다이렉션 적응과 코드 적응은 사용자 상호작용에 의존하여 주요 콘텐츠 로딩을 지연시키지 않아야 하며, Google이 지연 로딩된 콘텐츠를 볼 수 있도록 해야 합니다;
6. Google이 모바일 버전과 데스크톱 버전 웹사이트의 콘텐츠를 크롤링할 수 있도록 허용하고, 다양한 사이트 차단 규칙으로 인해 콘텐츠가 크롤링되지 않는 것을 방지합니다;
예시:
모바일:
PC:
참조 웹사이트:
구글 공식 설명:
Google은 주로 스마트폰 에이전트를 통해 크롤링한 모바일 웹사이트 콘텐츠를 사용하여 색인화 및 순위를 매깁니다. 이를 모바일 우선 색인이라고 합니다.
Google 검색 결과에 콘텐츠를 포함시키기 위해 웹페이지의 모바일 버전이 반드시 필요하지는 않지만, 모바일 버전을 제공하는 것을 적극 권장합니다. 이러한 모범 사례는 일반 모바일 웹사이트에 적용되며 정의상 모바일 우선 색인에 적합합니다.
사용자가 최상의 경험을 할 수 있도록 하기 위해 본 가이드에 자세히 설명된 모범 사례를 따르십시오.
1. 모바일에 적합한 웹사이트 생성
아직 모바일에 적합한 웹사이트가 없다면 먼저 생성하십시오. 이를 통해 모바일을 통해 웹사이트에 접속하는 사용자가 뛰어난 경험을 할 수 있습니다. 모바일에 적합한 웹사이트를 생성하려면 세 가지 구성 옵션이 있습니다:
(1) 반응형 디자인: 사용자가 사용하는 장치(예: 데스크톱, 태블릿, 모바일, 비시각적 브라우저)에 관계없이 동일한 URL을 통해 동일한 HTML 코드를 제공하지만 화면 크기에 따라 콘텐츠를 다르게 표시할 수 있습니다. Google은 구현과 유지보수가 가장 쉬운 디자인 패턴이기 때문에 반응형 디자인 사용을 권장합니다.
(2) 동적 제공: 사용하는 장치에 관계없이 동일한 URL을 사용합니다. 이 구성은 사용자 에이전트 감지 및 Vary: user-agent HTTP 응답 헤더에 의존하여 다양한 장치에 대해 다른 버전의 HTML을 제공합니다.
(3) 별도의 URL: 각 장치에 대해 별도의 URL을 사용하여 다른 HTML을 제공합니다. 동적 제공과 마찬가지로 이 구성은 사용자 에이전트 및 Vary HTTP 헤더에 의존하여 사용자를 해당 장치에 적합한 웹사이트 버전으로 리다이렉션합니다.
본 가이드의 내용은 동적 제공 및 별도의 URL 구성에만 적용됩니다. 반응형 디자인을 사용하는 경우 모바일 및 데스크톱 웹페이지의 콘텐츠와 메타데이터는 동일합니다.
2. Google이 콘텐츠에 접근하고 렌더링할 수 있도록 보장
Google이 모바일 웹페이지 콘텐츠와 리소스에 접근하고 렌더링할 수 있도록 하십시오.
(1) 모바일 및 데스크톱 버전 웹사이트에서 동일한 robots 메타 태그를 사용합니다. 모바일 버전에서 다른 robots 메타 태그(특히 noindex 또는 nofollow 태그)를 사용하는 경우, 웹사이트가 모바일 우선 색인을 활성화한 후 Google이 웹페이지를 크롤링하고 색인화하지 못할 수 있습니다.
(2) 사용자 상호작용에 의존하여 주요 콘텐츠 로딩을 지연시키지 마십시오. Google은 사용자 상호작용(예: 스와이프, 클릭 또는 입력)이 필요하여 로딩되는 콘텐츠는 로딩하지 않습니다. Google이 지연 로딩된 콘텐츠를 볼 수 있도록 하십시오.
(3) Google이 리소스를 크롤링할 수 있도록 허용합니다. 일부 리소스는 모바일 버전에서의 URL이 데스크톱 버전과 다릅니다. Google이 URL을 크롤링하도록 하려면 disallow 규칙으로 해당 URL을 차단하지 않았는지 확인하십시오.
3. 데스크톱 및 모바일 버전이 동일한 콘텐츠를 갖도록 보장
일관된 콘텐츠라도 데스크톱 및 모바일 웹페이지의 DOM 또는 레이아웃 차이로 인해 Google이 해당 콘텐츠에 대해 다른 이해를 할 수 있습니다. 그러나 데스크톱 및 모바일 버전에 동일한 콘텐츠가 있으면 두 버전이 동일한 키워드에 대해 순위를 받을 수 있습니다.
(1) 모바일 버전이 데스크톱 버전과 동일한 콘텐츠를 포함하도록 하십시오. 모바일 버전의 콘텐츠가 데스크톱 버전보다 적은 경우, 모바일 버전의 주요 콘텐츠를 데스크톱 버전과 동등하게 업데이트하는 것을 고려하십시오. 사용자 경험을 극대화하기 위해 모바일 장치에 대해 다른 디자인을 사용할 수 있습니다(예: 콘텐츠를 아코디언 스타일 접기 인터페이스 또는 탭으로 이동); 단, 웹사이트의 거의 모든 색인은 모바일 버전에서 오므로 콘텐츠가 데스크톱 버전과 동일한지 확인하십시오.
모바일 버전의 콘텐츠가 데스크톱 버전보다 적도록 하려는 계획이었다면, 웹사이트가 모바일 우선 색인을 활성화한 후 Google이 웹페이지에서 이전만큼 많은 정보를 추출할 수 없기 때문에 일부 트래픽이 손실될 수 있습니다. 콘텐츠를 제거하는 대신 공간을 절약하기 위해 콘텐츠를 아코디언 스타일 접기 인터페이스 또는 탭으로 이동하는 것을 고려하십시오.
(2) 모바일 버전에서 데스크톱 버전과 동일한 명확하고 의미 있는 제목을 사용하십시오.
4. 구조화된 데이터 확인
웹사이트에 구조화된 데이터가 있는 경우, 웹사이트의 두 버전 모두에 이 데이터가 포함되어 있는지 확인하십시오. 확인해야 할 구체적인 사항은 다음과 같습니다:
(1) 모바일 및 데스크톱 버전이 동일한 구조화된 데이터를 포함하도록 하십시오. 모바일 버전에 우선적으로 추가할 구조화된 데이터 유형을 결정해야 하는 경우, Breadcrumb, Product 및 VideoObject 구조화된 데이터부터 시작하십시오.
(2) 구조화된 데이터에서 올바른 URL을 사용하십시오. 모바일 버전의 구조화된 데이터에서 URL을 모바일 URL로 업데이트했는지 확인하십시오.
(3) 데이터 마크업 도구를 사용하는 경우, 모바일 버전에서 훈련시키십시오. 데이터 마크업 도구를 사용하여 구조화된 데이터를 제공하는 경우, 데이터 마크업 도구 대시보드에서 추출 오류를 정기적으로 확인하십시오.
5. 웹사이트 두 버전에 동일한 메타데이터 추가
웹사이트 두 버전에서 동등한 title 요소와 메타 설명을 사용하는지 확인하십시오.
6. 광고 배치 확인
광고가 모바일 웹페이지 순위에 부정적인 영향을 미치지 않도록 하십시오. 모바일 장치에 광고를 표시할 때는 고품질 광고 표준을 따라야 합니다. 예를 들어, 웹페이지 상단의 광고는 모바일 장치에서 너무 많은 공간을 차지하여 나쁜 사용자 경험을 초래합니다.
7. 시각적 콘텐츠 확인
(1) 이미지 확인
모바일 버전의 이미지가 이미지 모범 사례를 따르도록 하십시오. 구체적으로는 다음과 같은 것을 권장합니다:
①고화질 이미지를 제공하십시오. 모바일 버전에서 너무 작거나 해상도가 낮은 이미지를 사용하지 마십시오.
②지원되는 이미지 형식을 사용하십시오. 지원되지 않는 형식이나 마크업을 사용하지 마십시오. 예를 들어, Google은 SVG 형식 이미지를 지원하지만, 내장 SVG의 <image> 태그에 있는 .jpg 이미지는 인덱싱할 수 없습니다.
③웹페이지가 로드될 때마다 변경되는 이미지 URL을 사용하지 마십시오. 리소스가 계속 변경되는 URL을 사용하는 경우, Google은 이러한 리소스를 처리하고 인덱싱할 수 없습니다.
④모바일 버전에서 사용하는 이미지의 대체 텍스트가 데스크톱 버전과 동일한지 확인하십시오. 모바일 버전의 이미지에 데스크톱 버전과 동일한 설명적 대체 텍스트를 사용하십시오.
⑤모바일 웹페이지의 콘텐츠 품질이 데스크톱 웹페이지와 동일한 수준인지 확인하십시오. 모바일 버전의 이미지에 데스크톱 버전과 동일한 제목, 캡션, 파일명 및 텍스트를 사용하십시오.
웹사이트의 데스크톱 및 모바일 버전이 다른 이미지 URL을 사용하는 경우, 웹사이트가 모바일 우선 색인으로 전환될 때 일시적인 이미지 트래픽 손실이 발생할 수 있습니다. 그 이유는: Google의 색인 시스템에 따르면 모바일 버전의 이미지는 새로운 콘텐츠이며, 새로운 이미지 URL은 순위를 향상시키기 위해 충분한 역사적 검색 결과를 축적할 시간이 필요하기 때문입니다. 일시적인 이미지 트래픽 손실을 방지하려면 웹사이트 두 버전에서 동일한 이미지 URL을 사용하십시오. 일시적인 이미지 트래픽 손실을 신경 쓰지 않는다면 조치가 필요하지 않습니다.
(2) 비디오 확인
모바일 버전의 비디오가 비디오 모범 사례를 따르도록 하십시오. 구체적으로는 다음과 같은 것을 권장합니다:
①웹페이지가 로드될 때마다 변경되는 비디오 URL을 사용하지 마십시오. 리소스가 계속 변경되는 URL을 사용하는 경우, Google은 이러한 리소스를 처리하고 인덱싱할 수 없습니다.
②지원되는 비디오 형식을 사용하고 지원되는 마크업에 비디오를 배치하십시오. 웹페이지의 비디오는 웹페이지에 특정 HTML 태그(예: <video>, <embed> 또는 <object>)가 존재하는지 여부에 따라 식별됩니다.
③모바일 및 데스크톱 버전에서 동일한 비디오 구조화된 데이터를 사용하십시오. 자세한 내용은 구조화된 데이터 확인을 참조하십시오.
④모바일 장치에서 웹페이지를 볼 때 쉽게 찾을 수 있는 위치에 비디오를 배치하십시오. 예를 들어, 사용자가 모바일 버전에서 여러 번 아래로 스크롤해야 비디오를 찾을 수 있다면 비디오 순위에 부정적인 영향을 미칠 수 있습니다.
8. 별도 URL에 대한 기타 모범 사례
웹사이트의 웹페이지에 대해 데스크톱 버전과 모바일 버전이 별도의 URL(이른바 m. URL)을 사용하는 경우, 다음과 같은 추가 모범 사례를 따를 것을 권장합니다:
(1) 웹사이트의 데스크톱 및 모바일 버전에서 오류 페이지 상태가 동일한지 확인하십시오. 데스크톱 버전의 웹페이지가 정상 콘텐츠를 제공하는 반면 해당 모바일 버전이 오류 페이지를 표시하는 경우, 해당 웹페이지는 색인화되지 않습니다.
(2) 모바일 버전에 프래그먼트 URL이 포함되지 않도록 하십시오. URL의 프래그먼트 부분은 URL 끝에 #으로 시작하는 부분입니다. 대부분의 경우, 프래그먼트 URL은 색인화할 수 없습니다; 도메인이 모바일 우선 색인을 활성화한 후 이러한 페이지는 색인화되지 않습니다.
(3) 다른 콘텐츠를 제공하는 각 데스크톱 버전에 해당하는 동등한 모바일 버전이 있는지 확인하십시오. 도메인이 모바일 우선 색인을 활성화한 후 여러 다른 URL이 동일한 URL로 리다이렉션되는 경우(예: 모바일 장치에서 홈 페이지로 리다이렉션), 이러한 웹페이지는 모두 색인화되지 않습니다.
(4) Search Console에서 웹사이트의 두 버전을 확인하여 두 버전의 데이터와 메시지에 접근할 수 있도록 하십시오. Google이 웹사이트를 모바일 우선 색인으로 전환할 때, 웹사이트는 데이터 변경을 경험할 수 있습니다.
(5) 별도 URL의 hreflang 링크를 확인하십시오. rel=hreflang 링크 요소를 사용하여 웹사이트를 국제화할 때, 모바일 및 데스크톱 URL에 별도로 링크하십시오. 모바일 버전의 hreflang은 모바일 URL을 가리켜야 하며, 마찬가지로 데스크톱 버전의 hreflang은 데스크톱 URL을 가리켜야 합니다.
다음은 모바일 및 데스크톱 버전에 대해 별도 URL을 사용하는 웹사이트의 홈페이지 hreflang 예시입니다.
(6) 모바일 버전이 더 빠른 크롤링 속도를 처리할 수 있을 정도로 충분한 용량을 갖추고 있는지 확인하십시오.
(7) robots.txt 규칙을 확인하여 웹사이트 두 버전에서 예상대로 작동하는지 확인하십시오. robots.txt 파일을 통해 웹사이트의 어떤 부분이 크롤링 가능하고 어떤 부분이 크롤링 불가능한지 지정할 수 있습니다. 대부분의 경우, 모바일 및 데스크톱 버전에 대해 동일한 robots.txt 규칙을 사용해야 합니다.
(8) 모바일 및 데스크톱 버전 간에 올바른 rel=canonical 및 rel=alternate 링크 요소를 사용하십시오. 데스크톱 URL은 항상 캐노니컬 URL이며, 모바일 URL은 해당 URL의 대체 URL입니다.
다음은 별도 URL을 사용하는 웹사이트의 rel=canonical 및 rel=alternate 예시입니다.
9. 문제 해결
다음은 웹사이트가 모바일 우선 색인을 활성화하지 못하게 하거나 모바일 우선 색인을 활성화한 후 순위 하락을 유발할 수 있는 다양한 일반적인 오류를 나열한 것입니다. 웹사이트가 아직 모바일 우선 색인을 활성화하지 않았거나, 모바일 우선 색인을 활성화한 후 순위 하락을 발견했거나, Search Console에서 관련 메시지를 받은 경우, 일반적인 오류 목록을 확인하고 잠재적인 오류를 해결하십시오:
