시맨틱 마크업 : 구글에서 내 사이트가 잘 보이지 않는 이유

 

💡 시작하면서

회사에서 요청사항이 들어왔습니다 회사 사이트를 검색해도 다른 사이트들이 나오거나 결과가 나오지 않는다는 것이었습니다 확인해본 결과 구글에서 사이트를 검색할 때, 정확한 검색어를 입력했음에도 불구하고, 사이트 이름 외에는 다른 페이지들이 우선순위에서 밀리고 있었습니다 SSR 작업을 진행하며 SEO 최적화를 어느 정도 했다고 생각했지만, 중요한 부분을 놓치고 있었습니다  바로 시맨틱 마크업입니다

 

시멘틱 마크업은 왜 중요한가?

시맨틱의 사전적 의미

SEO(검색엔진 최적화)가 중요해지면서 더 많은 노출 수와 트래픽을 유도하여 광고 효과를 극대화할 수 있는 방법들이 많아지고 있습니다

시맨틱이란 의미 자체가 의미, 의미론적인 이란 뜻을 가지고 있는데 지금 우리는 개발을 할 때 너무 많은 <div>를 사용하고 있지 않나요?

쉽게 말하면 <div>는 이름표가 없는 상자입니다 semantic 마크업이 들어간 태그는 이름표가 있는 상자라고 할 수 있겠죠

시맨틱 마크업을 설명한 그림 예

장난감이 한 개씩 들어 있는 상자들이 있다고 합니다 꼬마 아이가 팬더인형이 들어 있는 장난감 상자를 찾고 싶은데 그림에서 왼쪽은 상자에 아무것도 적혀있지 않은 상자이고 오른쪽은 팬더라는 이름이 적혀 있는 상자가 있습니다 두 개 중 어느 장난감 상자에서 팬더 인형을 찾기 쉬울까요? 왼쪽은 찾더라도 몇 개의 상자를 다 열어봐야 할지도 모릅니다 전부 다 열어 봐야 할지도 모르죠

 

각각의 의미가 있는 마크업을 활용하면 검색엔진도 사이트를 탐색하기 훨씬 쉬울 겁니다

또한 시맨틱 마크업을 사용하면 좋은 이점들이 있습니다

시맨틱 마크업(태그)을 사용하면 좋은 이유

📌 검색엔진 최적화(SEO) 향상

검색엔진이 페이지의 주요 내용을 쉽게 이해하고 색인화하는 데 도움을 줍니다. 예를 들어, <article>, <section>, <header>, <footer> 등의 태그는 페이지의 각 부분을 정의하고, 검색엔진이 페이지를 더 잘 분류하고 우선순위를 매길 수 있게 합니다.

 

📌 웹 접근성 향상

스크린 리더와 같은 보조 기술을 사용할 때, 페이지의 구조를 더 잘 이해할 수 있도록 돕습니다. 이를 통해 시각적 장애가 있는 사용자들이 웹 페이지를 더 쉽게 탐색할 수 있습니다.

 

📌 코드의 가독성 향상

코드의 의미를 명확하게 표현하므로 개발자가 HTML을 읽고 수정할 때 더 직관적입니다. 또한 팀원 간 협업 시 코드 유지보수가 용이해집니다.

 

📌 구조적 일관성

페이지의 논리적 구조를 명확하게 정의하므로 콘텐츠를 구성할 때 일관성을 유지할 수 있습니다. 이는 웹 페이지가 더 체계적으로 보이게 합니다.

 

많은 개발자들이 아무 의미 없는 <div>를 사용하기 편하다는 이유만으로 사용하고 있습니다 저 또한 시맨틱 마크업을 알기 전 <div>로 활쏘기를 많이 했습니다 앞으로는 안 맞는 상자 안에 물건들을 집어넣지 말고 처음부터 물건에 딱 맞는 상자를 준비해 사용하도록 합시다

시맨틱 박스

 

💡 시맨틱 마크업 (태그)의 종류 💡

시맨틱 마크업에 사용하는 태그의 종류는 엄청나게 많이 있습니다 약 100개 정도라고 하네요 만약 궁금하시다면

https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

참고해보시고 여기서 다루지는 않지만 더욱 알맞은 시맨틱 마크업을 찾아보고 적용시켜 보는 것을 추천드립니다

저는 그중 가장 많이 사용하고 또 가장 많이 헷갈리는 태그 위주로 설명을 드리겠습니다

 

<main> <header> <footer> <aside>

 

<main> 태그는 사이트의 핵심 콘텐츠나 주요 기능을 나타낼 때 사용됩니다. <header> 태그는 주로 제목, 로고, 검색 폼, 작성자 이름 등 상단에 배치되는 요소들에 사용됩니다. <footer> 태그는 작성자 정보, 저작권, 관련 문서 등 하단에 위치한 내용들을 담는 데 사용됩니다. 마지막으로, <aside> 태그는 주요 콘텐츠와 간접적으로 관련된 부분을 나타내며, 보통 사이드바나 콜아웃 박스와 같은 형태로 표현됩니다.  

 

 

<nav> <ui> <oi> <li>

 

<nav> 태그는 사이트 내에서 내비게이션을 정의하는 데 사용되며, 보통 메뉴나 링크 목록을 포함합니다. <ul> 태그는 순서가 없는 리스트를 정의할 때 사용되며, 항목들이 순서 없이 나열됩니다 <li> 태그는 리스트 항목을 정의하는 태그로, <ul> 또는 <ol> 태그 안에 사용되어 각 항목을 표시합니다.

 

 

<article> <section> 

 

<article> 태그는 독립적이고 자립적인 콘텐츠를 나타내며, 예를 들어 블로그 포스트나 뉴스 기사처럼 독립적으로 사용할 수 있는 콘텐츠를 담는 데 사용됩니다. <section> 태그는 웹 페이지에서 주제별로 콘텐츠를 구분할 때 사용되며, 관련된 내용들을 논리적으로 묶는 역할을 합니다

 

💡 시맨틱 마크업 (태그)의 사용 예시 💡

숨은 고수 찾기 숨고의 사이트를 예시로 설명드리겠습니다

숨은 고수 찾기 숨고

 

시맨틱 마크업을 구성해 본다면 <header> <main> <ui> <li> <section> <footer>로 구성해 볼 수 있습니다

💡 마치면서

시맨틱 마크업은 검색엔진이 페이지의 구조와 콘텐츠 의미를 명확히 파악할 수 있게 도와 SEO를 크게 향상합니다. 동시에 <header>, <section>, <article>, <nav> 같은 태그로 각 영역의 역할을 분명히 구분함으로써 코드의 가독성과 유지보수성이 높아지며, 팀원이나 외부 파트너도 구조를 직관적으로 이해할 수 있습니다.

또한 디자이너와 퍼블리셔는 시맨틱 태그를 통해 디자인 시안과 실제 마크업 간 대응 관계를 쉽게 확인할 수 있어 협업 과정에서 발생하는 오류나 오차를 줄이고 작업 효율을 높일 수 있습니다. 무엇보다 웹 표준을 준수하며 의미론적 접근을 적용하면 접근성과 호환성이 확보되어 모든 사용자가 일관된 경험을 누릴 수 있습니다.