구글 블로그 SEO 최적화, aside와 header 태그로 시맨틱 구조 완성하기

HTML 카테고리에서 시맨틱 태그에 대한 글을 쓰다가 이 블로그의 사이드바에 <aside>를 사용하지 않고 있다는 걸 발견했다.

그래서 오늘은 구글 블로그의 사이드바 부분에 <aside>를 추가하고, 겸사겸사 포스트의 제목 부분도 <header>로 감싸는 작업을 해보겠다.

사이드바를 aside 태그로

관련 포스트

HTML 시맨틱 태그, 부가 정보의 aside와 하단 영역의 footer 태그

HTML 시맨틱 태그 중 부가 정보를 담당하는 aside 태그와 사이트 하단을 정의하는 footer 태그의 사용법을 알아봅니다. 실제 블로그 스킨을 분석하며 사이드바에 왜 aside를 사용해야 하는지, footer 내부에 들어갈 핵심 정보는 무엇인지 정리했습니다.

aside 태그에 대한 설명은 이 링크를 통해 확인하자.

왜 aside 태그로 수정하는지 알고 하는 것이 중요하기 때문에 혹시 위의 포스트를 보지 않은 사람은 링크의 글부터 확인하자.

위에 링크한 포스트에서 본 것처럼 당연히 aside 태그를 사용하고 있을 거라고 생각했던 사이드바^Sidebar에 아무 의미 없는 div 태그를 사용하고 있었다.

이 부분을 <aside>로 바꿔보려고 한다.

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

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

캡처한 이미지에 파란 네모로 감싸놓은 div 태그를 aside 태그로 변경해야 한다.

사이드바가 끝나는 지점의 </div>도 </aside>로 수정해야 한다.

그런데 사이드바 안에 들어간 것들이 많아서 코드가 꽤 길기 때문에 끝나는 지점을 찾기가 초보자들에게는 쉽지 않을 것 같아서 이 글을 쓰기 시작했다.

제일 처음에 올려놓은 개발자 도구를 캡처했던 이미지를 다시 보면, 사이드바가 끝날 때쯤에 class 속성에 clearfix가 들어간 div 태그가 있다는 것을 알 수 있다.

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

파란 네모로 표시한 </div>가 빨갛게 변해있다.

시작하는 태그를 <aside>로 변경했는데, 그걸 닫는 태그는 여전히 </div>라서 이렇게 표시된 것이다.

이것도 </aside>로 수정해야 한다.

저장한 후에 블로그를 새로고침하고 다시 개발자 도구를 살펴보면, 사이드바가 aside 태그로 변경된 것을 확인할 수 있다.

포스트 제목을 header 태그로 감싸기

관련 포스트

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

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

header 태그에 대한 설명은 이 포스트에서 정리했었다.

<header>는 페이지 상단뿐만 아니라, <article>의 내부에서도 사용될 수 있다고 했었다.

그런데 이 블로그의 article 태그 내부에는 header 태그가 없었기 때문에 <header>를 추가해 보겠다.

[ctrl + F] 키를 누르고 코드 내에서 post-header main-post-header를 검색한다.

그리고 파란 네모로 표시한 부분의 div 태그들을 header로 수정해 주면 끝이다.

개발자 도구를 통해서 태그가 제대로 바뀌어 있는지 캡처하는 것은 생략했다.

각자 확인해 보자.