웹 사이트 사이드바 왼쪽과 오른쪽 중 더 나은 선택은?

PC 영역에서 웹 사이트 사이드바 왼쪽과 오른쪽 중에 어느 곳에 배치할 지 고민을 하게 됩니다. 대부분의 웹 사이트에서 사이드바Sidebar는 오른쪽에 있습니다. 페이지 내부에 위치한 정적인 페이지입니다. 사이드바의 용도에 대해 먼저 알아 보겠습니다.

1. 웹 사이트 사이드바 용도

사이드바는 PC 영역에서 주로 사용되며 모바일로 검색을 하는 시기에 많은 사람들이 데스크톱을 사용하지 않습니다. PC 전용 용도라고 할 수 있습니다.

초록색으로 강조한 영역이 사이드바입니다. 우측에 자리 잡고 있습니다.

사이드바의 목적은 정보 제공입니다.

웹 사이트 사이드바 왼쪽과 오른쪽 중 우측 사이드바 선택

사이드바에 위치한 구독 신청은 독자가 콘텐츠를 보는데 방해가 되지 않으며 크게 3가지 정보 제공 목적을 가지고 있습니다.

1.1 광고

사이드 바에 구글 애드센스 광고를 배치한 후 수익 창출을 할 수 있습니다.

1.1 이메일 구독

글을 읽는 독자가 콘텐츠 전반적인 내용이 마음에 들 경우 이메일 구독 신청 페이지를 넣을 수 있습니다.

1.1 카테고리 및 게시물

사이드바에 블로그 게시물 및 카테고리를 추가할 수 있습니다. 방문자를 웹 사이트에 더 오래 머물게 할 수 있습니다. 방문자의 이탈율을 줄일 수 있는 장점이 있습니다.

2. 웹 사이트 사이드바 왼쪽과 오른쪽 각각의 장단점은?

웹 페이지 접속 후 이탈률과 방문당 페이지 수, 전환(이메일 구독, 광고 클릭 및 파일 다운로드 등)의 차이는 어떨까요?

2.1 방문자의 이탈율과 페이지 수

기존 방문자와 신규 방문자 모두 오른쪽 사이드바 설정을 했을 때 이탈율과 방문당 페이지 수, 전환 등에서 조금 더 나은 결과를 얻는 것이 지배적인 의견입니다. 이유는 F자형 읽기 패턴과 관련이 있습니다.

웹 사이트 사이드바 왼쪽과 오른쪽 중 더 나은 선택은?
출처: https://www.researchgate.net/

방문자들이 F자형 패턴으로 웹 페이지를 보는 이유는 보통 처음 접속한 웹 사이트의 콘텐츠를 자세히 읽을 생각과 관심이 없습니다. 거의 모든 방문자는 페이지를 효율적으로 보며 더 나은 정보를 찾으려고 하는 경향을 가지고 있습니다.

2.2 CSS 오른쪽 사이드바가 SEO에 측면에서 더 유리…

CSS를 이용한 왼쪽과 오른쪽 사이드 바 중에 오른쪽 사이드바가 SEO에 더 유리합니다. 검색 엔진의 웹 크롤러(로봇)가 HTML 기반 웹 사이트를 크롤링 할 때 오른쪽 사이드바가 위치한 경우 웹 페이지의 콘텐츠를 먼저 크롤링합니다. 특히 블로그 게시물의 경우 게시물의 내용을 먼저 파악하며, 웹 사이트의 색인이 생성되는 과정이 더 수월해집니다.

3. 결론

사이드바는 보통 왼쪽보다 오른쪽에 두는 것이 더 유리하지만 각각의 사이트 특성에 맞게 다르게 설정할 수 있는 점을 참고하셔야 합니다.

커피와 노트북

Similar Posts

  • 구라제거기 다운로드 링크

    구라제거기(hoax eliminator)는 블루앤라이브(BLUEnLIVE)님께서 개발한 툴입니다. 키보드 보안 프로그램 및 인터넷 뱅킹 프로그램들은 우리가 사용하는 윈도우 PC의 성능을 느리게 만드는 프로그램이기도 하지요. nProte**, 안랩의 세이프 트랜잭션, 잉카인터넷 등 은행이나 증권사 홈페이지에서 강제로 다운 받게 설정된 프로그램들을 클릭 한번으로 삭제할 수 있는 소프트웨어다. nProte** 프로그램 등을 자주 쓰지 않는다면 느려진 컴퓨터를 제대로 쓰기 위해서라도 hoax…

  • [SEO] 웹사이트 관리를 위한 구글 SEO 도구 3가지

    웹사이트는 블로그 및 회사소개 홈페이지, 쇼핑몰 등 종류에 관계 없이 중요합니다. 구글 SEO 도구로 필수인 서치 콘솔, 애널리틱스, 크롬 개발자도구 3가지는 필수로 써야 하는 만큼 중요합니다. 구글을 포함한 검색 엔진 첫 페이지에 뜨는 것과 함께 어느 페이지에서 많이 방문자가 많았는지 통계 데이터를 볼 수 있다면 피드백을 통해 더 많은 방문자를 유입 시킬 수…

  • 클라우드플레어 CDN 설정(Pro 플랜)

    클라우드플레어 CDN을 예전에 사용했었는데 최근 다른 워드프레스 사이트에 재 연결을 하게 되었습니]다. 캐시 플러그인은 현재 사이트와 동일한 조건으로 세팅했는데 무료 플랜은 속도가 현재 사이트에 근접하지 못하고 오히려 느린 결과를 보였습니다.(현재 사이트는 클라우드플레어 CDN이 적용되지 않은 상태입니다) 원래 사이트처럼 동일하게 세팅해서 속도를 높일까 고민하다가 Pro플랜으로 업데이트 했습니다. 확실히 업데이트 후 현재 사이트보다 조금 느리지만…

  • [Google Analytics GA4] 구글 애널리틱스 GA4 설치하기

    구글 애널리틱스 GA4로 사이트의 기본적인 접속 통계 및 실시간 사용자를 확인 할 수 있습니다. GA4 신규 생성 방법에 대해 알아 보겠습니다. GA4 신규 세팅을 위해서는 운영중인 URL이 있는 웹사이트가 있어야 합니다. ※ 애널리틱스 카테고리는 [계정]과 그 하위 카테고리인 [속성]에서 거의 모든 설정을 한다고 본 후에 시작하는 것이 좋습니다. 1. 구글 애널리틱스 GA4 시작하기…

  • HSTS 보안&속도 2가지 장점

    HSTS(HTTP Strict Transport Security)를 이용하는 웹사이트에 적용했을 경우 보안과 속도의 이점을 볼 수 있습니다. 이 말은 HSTS preload(사전로드) 기능이 사전로드(or 미리로드) 방식을 통해 기존 HTTPS가 적용된 사이트의 느려진 속도를 어느 정도 보완할 수 있습니다. 프리로드 등록은 해당 페이지에 등록하면 설정이 완료 됩니다. HTTPS부터 시작해서 ‘HTTP Strict Transport Security’에 대해 순차적으로 알아보겠습니다. 1. HTTPS란…

  • [Chrome] 크롬 개발자도구 실행과 한국어 변경 방법

    구글에서 만든 크롬 브라우저는 개발을 도와주는 ‘크롬 개발자도구’가 있습니다. 개발자 도구(Developer tools)를 이용해서 HTML, CSS, JavaScript의 생산성을 높일 수 있습니다. 개발자를 위한 도구이지만 글자 크기, 색, 간격과 같은 값을 확인할 수도 있고 웹사이트의 속도를 PC뿐만 아닌 모바일 버전으로도 확인할 수 있는 장점이 있습니다. 1. 개발자모드 실행 방법 실행 방법은 2가지가 있습니다. 검수하려는 웹사이트에…