이번에는 기본적인 워드프레스 꾸미기일 수 있지만, 이 역시 구글 검색엔진최적화 즉, SEO순위를 높이는데에 도움이 된다고 알려져 있어서 해볼 수 있는 ‘워드프레스 본문 너비 조정하는 레이아웃 폭 조절방법’에 대해서 알아볼텐데요. 그동안 본문 폭이 좁아서 답답해보였거나 전체 너비를 조절하고 싶으셨던 분들도 참고하시고 변화를 주시면 좋을 것 같습니다.
워드프레스 본문 너비 조절에 대해
컨테이너란?
일단 워드프레스 너비에 대해서 살펴보려면 ‘컨테이너’ 개념에 대해서 알 필요가 있는데, 이것은 주로 웹페이지의 레이아웃을 담당하는 구성 요소를 의미 합니다. 그리고 이것을 구현하기 위해서는 HTML과 CSS가 사용되기도 합니다.
그리고 워드프레스 테마는 기본적으로 여러 부분으로 나뉘어진 레이아웃을 가지는데, 이 중 주요 컨테이너는 헤더(header), 푸터(footer), 사이드바(sidebar), 컨텐츠(content) 영역을 포함합니다. 이것들은 웹페이지 디자인과 레이아웃을 결정하며, 사용자가 사이트를 방문했을때 표시되는 모습을 결정하기도 합니다.
또한, 워드프레스 너비 역시 테마에 따라서 다르게 설정될 수 있는데, 이는 사용자 정의 설정으로 조정할 수 있습니다. 스타일 시트 CSS를 통해서도 조정할 수 있지만, 간단하게 조절할 수 있는 방법도 있어서 아래에서 설명을 도와가겠습니다.
그 전에 SEO와의 문제, 연관성에 대해 살펴보겠습니다.
워드프레스 본문 너비 길이&SEO에 미치는 영향
일단 SEO 면에서 몇가지 고려되어야할 사항이 있는데, 가령 너비가 너무 넓으면 웹페이지 가독성이 저하되고 사용자 경험이 나빠질 수 있다는 것에 주의가 필요합니다.
- 사용자 경험(User Experience) : 사용자가 모바일 또는 작은 화면에서 사이트를 열었을때 너비가 너무 넓으면 스크롤링이 번거로워질 수 있습니다. 그런데 구글은 이러한 사용자 경험을 바탕으로 웹페이지 평가를 하기 때문에 SEO에도 영향을 미칠 수 있는 것입니다.
- 모바일 최적화 : 구글은 모바일 퍼스트 인텍싱을 채택하고 있고, 모바일 버전의 웹페이지가 상당히 중요한데, 너무 넓은 디자인은 모바일 환경에서 적절한 표시가 되지 않을 수 있는 것입니다.
- 로딩 속도 : 여러 컨텐츠가 한 번에 로딩되다보면 페이지 로딩 속도가 느려질 수 있고, 이 느린 페이지 로딩 속도는 결국 SEO에 부정적인 영향을 미치게 됩니다.
이러한 이유로, 워드프레스 너비는 적절하게 유지하는 것이 좋고 사용자 경험을 개선할 필요가 있겠죠.
워드프레스 본문 너비 조절 방법과 이상적인 폭 width 레이아웃
조절 방법은 쉽습니다. 사용자 정의하기 – 레이아웃 – 컨테이너 순으로 들어가서 위에서처럼 너비를 조정하면 되는데, 여기서 컨테이너는 본문 너비 + 사이드바 너비를 포함한 총 full width라 할 수 있습니다.
일반적으로 모바일 친화적이면서 검색 엔진에 더 유리한 경험을 제공하기 위해서는 본문의 최대 너비를 설정하는 것이 좋은데, 대부분은 600px, 800px를 권장합니다. 이 범위에 있으면 텍스트를 읽기 쉽게 만들면서도 모바일 환경에서도 적절한 사용자 경험을 제공할 수 있다고 합니다.
그렇다면, 워드프레스 본문 너비와 사이드바를 포함한 이상적인 컨테이너 width는? 여기에 있어서는 주로 전체 너비 full width로 1200px에서 1400px 사이가 적절하다고 합니다. 이 범위는 대부분의 데스크톱 화면 크기에 맞게 최적화되기 때문입니다.
사이드바만 놓고 본다면 주로 300px에서 400px 정도로 너비를 설정하면 된다고 합니다. 이 정도 너비면 추가적인 정보(주로 애드센스 광고나 검색창, 카테고리 목록, 최근글 목록 등)나 링크를 제공하는데 적당한 공간이기 때문이죠.
이러한 여러가지 최적화를 위한 제안을 토대로 여러분도 직접 이것저것 바꿔보면서 최종적으로는 사용자 경험을 고려한 디자인을 찾아가시면 좋을 것 같습니다.
추가적으로 백그라운드 컬러를 바꿔줄 수 있는데, 저는 살짝 연한 회색으로 설정을 해놓았더니, 사용자 경험적으로는 별로 좋지 않다는 점수가 있더라구요.
내 사이트의 사용자 경험 및 속도 테스트를 해보시려면 아래의 링크를 참고해주시고, 또다른 SEO에 도움이 되는 글을 더보시고 싶으시다면 이 글을 클릭☜해서 보시면 될 것 같습니다.