처음 홈페이지를 방문하였을 때, 방문자에게 가장 눈에 쉽게 뜨이는 부분은 헤더 요소입니다. 웹사이트의 헤더는 얼마나 잘 구성되어 있는지에 따라 해당 웹사이트에 대한 인식과 인상이 결정되기에 정말 중요한 요소라고 할 수 있습니다. 오늘 글에서는 GeneratePress 테마에서 엘리먼트 기능을 사용하여 헤더를 만드는 방법과 SEO에 최적화된 헤더 구성 방법을 단계별로 설명드리도록 하겠습니다.
GeneratePress 테마 엘리먼트 기능이란?
GeneratePress 테마는 가볍고 빠른 사이트 속도를 제공하는 테마로 잘 알려져 있으며, 특히 GeneratePress 프로 버전은 다양한 디자인과 커스터마이징 옵션을 빠른 최적화 상태로 설정할 수 있다는 강력한 장점을 가지고 있습니다. 특히 GeneratePress 테마 엘리먼트 기능은 웹사이트의 특정 영역을 사용자 정의할 수 있도록 도와주는 강력한 도구라고 볼 수 있기에 알아두는 것이 좋습니다.
이 엘리먼트(Element)를 사용하면 웹사이트를 구성하는 기본적인 요소인 헤더, 푸터, 사이드바 등 다양한 요소를 원하는 대로 디자인하고, 사용자 조건에 따라 표시할 수 있습니다. 또, 엘리먼트를 통해 헤더를 커스터마이징하게 되면 페이지 카테고리마다 다른 헤더를 표시하거나, 특정 카테고리의 포스트에 맞게 맞춤형 헤더를 만들 수 있다는 장점을 가지고 있습니다.
참고로, 이 엘리먼트 기능은 GeneratePress 테마 유료 버전에서 지원하고 있습니다. 물론 년 59달러의 요금제가 들지만, 저는 GeneratePress 테마 유료 버전을 추천드립니다. 그 이유로는 사이트 로딩을 가볍고 빠르게 유지하면서 커스터마이징을 할 수 있으며, 구글 SEO 최적화 및 모바일 친화적입니다. 수백 가지의 사용자화 컨트롤이 가능하고 최대 500개 웹사이트에서 프리미엄 테마를 사용가능합니다. 그리고 30일 내 환불이 가능하기에, 사용해보고 연장 또는 평생 이용권을 선택하거나 환불하시면 될 것 같습니다.
GeneratePress 테마 엘리먼트 기능을 활용한 헤더 커스터마이징의 장점
기본적으로 헤더는 웹사이트의 첫 인상을 결정짓는 중요한 요소라고 했습니다. 이 헤더를 사용자 정의하게 되면 웹사이트의 정체성과 개성을 더욱 강조할 수 있습니다. 그럼 자연스럽게 사용자 경험도 좋아지고, 검색 엔진 최적화에도 도움을 줄 수 있습니다. 몇 가지 장점을 아래에 정리해보겠습니다.
1.SEO최적화에 도움이 됨
SEO최적화를 고려한 헤더 디자인은 검색 엔진에서의 가시성을 높여줍니다. 특히 잘 구조화된 헤더는 검색 봇이 해당 웹사이트의 페이지를 더 쉽게 크롤링하고 색인할 수 있도록 도웁니다. 사이트의 검색 노출도도 그에 맞게 높아갈 수 있습니다.
2.페이지별 유연성 제공
위에서 GeneratePress 테마 엘리먼트 기능을 이용하면, 카테고리 페이지에 맞는 헤더를 구성할 수 있다고 언급드렸습니다. 이것은 웹사이트 운영을 더 유연하고 확장성 있게 할 수 있다는 말을 의미합니다. 이렇게 잘 구성된 웹사이트는 방문자로부터 신뢰도와 편안한 사용감을 제공하기에 높은 재방문율을 통한 사이트 활성화에도 도움이 됩니다.
3.높은 사이트 속도 유지 가능
웹사이트 운영에서 가장 중요시되는 점, 특히나 수익화 블로그라면 가장 중요한 것은 바로 사이트 로딩 속도입니다. 헤더를 만드는 방법으로 엘리멘터 프로 페이지 빌더라는 플러그인 유료 서비스를 이용할 수도 있습니다. 더 접근하기 쉽고 간편하다는 점이 있습니다.
그렇지만, GeneratePress 테마 엘리먼트를 활용하면 사이트 로딩 속도를 빠르게 유지시킬 수 있다는 무엇보다 강력한 장점을 지니게 된다는 점을 말씀드리고 싶네요. 그러면서 원하는 디자인으로 커스터마이징을 할 수 있습니다. 그러면 이제 GeneratePress 테마 엘리먼트로 헤더를 구성하는 방법에 대해 설명드리도록 하겠습니다.
GeneratePress 테마에서 엘리먼트 사용하여 헤더 만드는 방법
1.Elements 모듈 활성화
Header 엘리먼트를 사용하려면 먼저 Elements 모듈을 활성화해야 합니다. 먼저 워드프레스 관리자 페이지 > 모양 > GeneratePress 로 이동합니다. 그 다음 Modules의 Elements 항목을 찾아 Activate 버튼을 눌러줍니다. 해당 버튼을 누르면 Elements가 활성화됩니다.
그러면 GeneratePress 밑에 Elements 라는 메뉴가 활성화되는데, 클릭하여 들어가 Add New Element 버튼을 눌러서 요소 추가를 해줍니다.
Choose Element Type 팝업이 표시되면 Block, Hook, Layout, Header 4개 엘리먼트 중 Header를 선택하고 Create 버튼을 클릭합니다.
2.Site Header 탭 설정
Create 버튼을 누르면, 위와 같은 헤더가 생성이 됩니다. 제목에 헤더의 이름을 입력하시면 되겠습니다. Site Header 부분은 위 화면처럼 No Merge, Default로 설정해주세요.
3.Page Hero 탭 설정
Page Hero 탭에서의 설정을 설명드리겠습니다. Page Hero이 뭔가 하면 웹사이트에서 화면을 가득 채우는 큰 배너 이미지로, 일반적으로 앞이나 가운데에 배치되기 때문에 방문자의 이목을 집중시키는 역할을 합니다.
따라서, 페이지 히어로는 페이지나 포스트의 제목표시줄을 의미한다고 생각하시면 편합니다. 여기에 포스트의 특성 이미지가 표시되도록 할 수 있습니다. 위와 같이 특정 배경색에 광고가 표시되도록 설정할 수도 있으니 본인의 사이트 특성에 맞게 설정하시면 되겠습니다.
그리고 위 화면의 코드 입력 박스에 헤더에 표시될 콘텐츠를 입력할 수 있습니다. 이 박스에 입력되는 내용이 페이지 제목 표시바 혹은 페이지 히어로의 이미지로 표시가 됩니다. 위의 콘텐츠 입력 빌드에는 텍스트, HTML 코드, 템플릿 태그, 숏코드 등을 입력할 수 있습니다.
추가적으로 다음과 같은 템플릿 태그가 지원되니, 콘텐츠에 따라 적절히 적용해보시면 되겠습니다.
- {{post_title}} : 현재 게시글의 제목
- {{post_date}} : 현재 게시글의 발행/날짜
- {{post_author}} : 현재 게시글의 작성자(글쓴이)
- {{post_terms.taxonomy}} : 선택한 분류(카테고리, 포스트 태그, 상품 카테고리)에 연결된 용어
- {{custom_field.name}} : 커스텀 포스트 메타. name 부분을 커스텀 필드의 이름으로 바꿉니다
4.display rules 탭 선택
Display Rules 탭에서는 헤더 요소가 어느 콘텐츠에 표시될 것인가를 설정할 수 있습니다. 글에서 모든 글에서 해당 헤더가 적용되도록 할 수도 있고, 글 카테고리를 선택하여 특정 카테고리에서 헤더가 표시되도록 할 수도 있습니다. Exclued에서는 헤더 적용이 제외되는 섹션도 설정할 수 있습니다.
5.internal Notes
마지막으로 이제 여러 헤더를 구성할 때, 헤더 구성 이유와 차이를 구분하기 위한 메모를 작성할 수 있습니다.
마무리:검색 SEO를 위한 GeneratePress 테마 엘리먼트
추가적으로 SEO에 최적화된 헤더를 만들기 위한 팁을 몇 가지 드려보자면, 헤더에 삽입되는 텍스트에 중요한 키워드를 자연스럽게 포함시키는 것이 좋습니다. 그리고 과도한 H1 태그 사용은 SEO에 부정적인 영향을 주니 꼭 한 번만 사용합니다. 마지막으로 헤더에 스크립트나 이미지를 사용할 때 경량화된 것을 사용하는 것이 좋습니다.
GeneratePress 테마 엘리먼트 기능을 사용하면 사용자 정의 헤더를 쉽게 만들고, 이를 통해 웹사이트의 디자인과 SEO 최적화를 동시에 달성할 수 있으니 활용해보시기를 추천드립니다.
<추가로 볼만한 글>
