구글 블로그 SEO 최적화, nav 태그와 aria-label 속성으로 검색 엔진 이해도 높이기

오늘은 구글 블로그에 nav 태그를 사용해야 할 부분에 <nav>를 추가하고, aria-label 속성으로 역할을 구분하도록 하겠다.

HTML 카테고리에 관련된 내용을 포스팅했다.

nav 태그와 aria-label 속성에 대한 설명은 아래의 링크를 통해 확인하자.

관련 포스트

HTML 시맨틱 태그: header와 nav 태그, 메뉴가 여러 개라면 aria-label은 필수!

HTML 시맨틱 태그 중 상단 영역을 정의하는 header 태그와 메뉴를 담당하는 nav 태그의 포함 관계를 알아봅니다. 특히 페이지 내에 nav 태그를 여러 개 사용할 때 SEO와 웹 접근성을 높여주는 aria-label 활용 꿀팁을 실제 사례와 함께 정리했습니다.

상단(header) 메인 메뉴

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 누르고 코드 내에서 <nav를 검색한다.

이 부분이 처음부터 구글 블로그에 있었던 header 태그 내에 있는 nav 태그다.

<nav class='header-menu' aria-label='블로그 카테고리 메뉴 (상단)'>

이런 식으로 aria-label 속성을 추가한다.

위에 링크한 포스트에서 설명했듯 aria-label 속성 안에 들어가는 내용은 스크린 리더가 읽어주는 부분이기 때문에 본인에게 맞게 수정해도 된다.

사이드바 메뉴

나는 이전에 스스로 다른 곳에 <nav>를 추가한 적이 있다.

방문자의 편의를 위해 사이드바에도 카테고리를 추가했는데, 여기에도 aria-label 속성을 추가할 거다.

<nav class="list-label" aria-label="블로그 카테고리 메뉴 (사이드바)">

브라우저나 스크린 리더 입장에서는 똑같은 기능을 하는 <nav>가 2개 있으면, 사용자가 혼란을 느낄 수 있다.

그러니 aria-label을 활용해 용도를 구분해 줘야 한다.

관련 포스트

구글 블로그 카테고리 순서 원하는 대로 정렬하기

구글 블로그 사이드바 카테고리(라벨 위젯)의 정렬 순서를 원하는 대로 바꾸는 방법을 알아봅니다. '가나다순/빈도순'만 지원하는 기본 위젯의 제한을 우회하여, 사용자 정의 순서로 직접 정렬하는 방법을 안내합니다.

페이지네이션

개발자 도구를 통해서 페이지네이션 부분의 class 속성이 blog-pager container라는 것을 알았다.

페이지를 이동하는 페이지네이션 링크가 <nav>가 아닌 <div>로 감싸져 있다.

<nav class='blog-pager container' id='blog-pager' aria-label='페이지네이션'>
  <!-- 생략 -->
</nav>

이렇게 div 태그를 nav 태그로 수정하면 된다.

aria-label 속성도 잊지 말자.

푸터(footer) 메뉴

푸터 메뉴 부분은 개발자 도구로 살펴봤을 때는 <div>를 사용하고 있었지만, 'HTML 편집'을 통해서 찾아보니 <b:section>이라는 일반적인 HTML이 아닌 코드가 사용되고 있었다.

이런 때는 <nav>를 직접 추가해서 이것들을 감싸면 된다.

<nav>로 수정할 수 없는 상황이라면 role 속성을 사용해서 의미를 부여하는 방법(예: role='navigation')도 있지만, 여기서는 통하지 않았다.

<nav aria-label='푸터 서비스 메뉴'>
  <!-- 생략 -->
</nav>

이렇게 nav 태그로 <b:section> 부분을 감싸도록 수정하면 된다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.