계발하는 개발자

웹 접근성과 시맨틱 마크업 | 검색엔진(SEO) 최적화 본문

🖥 Computer Science/Programming

웹 접근성과 시맨틱 마크업 | 검색엔진(SEO) 최적화

dev_genie 2023. 11. 28. 23:14

시맨틱 마크업(Semantic Markup)

시맨틱(Semantic) 이란 "의미론적인"의 뜻을 가지며, 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서 시맨틱 마크업이란, 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.

 

시맨틱 마크업은 다음과 같이 표현할 수 있다.

 

작성 방법

시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다.

예를들어 다음과 같이.

- 헤더/푸터에 <header>와 <footer> 사용

- 메인 컨텐츠에 <main>과 <section> 사용

- 독립적인 컨텐츠에 <article> 사용

- 최상위 제목으로 <h1> 사용

- 순서가 없는 목록으로 <ul>과 <li> 사용

- 네비게이션에 <nav> 사용

 

이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것을 말하는데,

이런 점 외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류라 할 수 있다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.

 

예를 들어, 동일한 효과를 부여하는 <strong>과 <b> 태그가 있다.

둘은 동일하게 글자색을 진하게 하는 기능을 하지만 <b> 태그의 경우는 그 자체가 "bold"의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong>의 경우에는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다"라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.

 

특징

  • 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에, 검색엔진 최적화(SEO)에 유리하다.
  • 웹 접근성 측면에서, 시각장애가 있는 사용자가 스크린리더를 통해 의미를 더 잘 파악할 수 있다.
    • 스크린리더가 strong 태그를 만나면 조금 더 강하게 말해준다. 예를 들어 p태그 안에 "볼드체" 라는 텍스트가 있다고 해보자.  p태그의 font-weight 안의 text는 그냥 일반적인 톤으로 "볼드체"라고 읽는다면, strong 태그 안의 text는 강조된 톤으로 " p태그안의↗ strong태그↗ 입니다↗" 로 읽는다. 그러면 시각장애인은 해당 음성만 듣고도 페이지에서 중요한 부분이 어디에 있는지를 인식할 수 있게 된다.
  • 단순히 div, span으로 둘러싸인 요소들보다 코드의 가독성이 좋다.

 

시맨틱 마크업 HTML

1. <title>과 <h>태그

<head>에 위치한 title과 h태그(제목태그)는 현재 페이지의 주제를 알려줄 수 있는 태그이기 때문에 각 페이지마다 신경써서 작성해야 한다.

회사명이나 사이트명 등 해당 페이지의 주제를 효과적으로 전달할 수 있는 제목을 title태그에 정확하게 작성해야 하며 각 페이지별로 다르게 작성하는 것이 좋다. 타이틀의 경우 ‘제목 없음’이나 ‘새 페이지’와 같은 의미없는 타이틀을 넣지 않도록 하며, 불필요한 키워드나 너무 긴 텍스트를 사용하지 않는 것이 좋다.

<h> 제목 태그의 경우 중요한 텍스트를 강조하거나 콘텐츠의 계층 구조를 만들어 사용자가 문서를 더 쉽게 탐색할 수 있도로 한다. 너무 긴 제목과 한페이지내에 과도한 사용을 지양해야 한다. 따라서 꼭 필요한 경우에만 사용하고 단순히 디자인적으로 강조가 필요할때는 제목태그 대신 <em>이나 <strong>같은 태그를 사용하는 것이 좋다.

 

2. 메타 설명 태그 <meta name=“description” content=“페이지 설명”>

메타 설명태그는 <head>에 위치하는 태그로 검색엔진에 페이지의 내용을 요약하여 제공하며 길이 제한은 없지만 한두 문장 또는 짧은 단락 정도로 작성한다. 메타 설명태그는 구글Google 검색 결과에서 페이지의 스니펫으로 사용할 수 있기 때문에 이 태그를 잘 작성하면 구글봇뿐만 아니라 사용자가 해당 페이지의 내용을 이해하는데 도움이 된다.

 

위 이미지에서 vibe 라는 타이틀 아래 짧은 한줄의 스니펫이 들어가있는 걸 볼 수 있는데

vibe 사이트 개발자모드를 확인하면 바로 아래같이 메타 설명태그에 작성한 내용이 스니펫으로 들어가있다는 걸 확인할 수 있다. 

 

3. 시각자료는 텍스트로 설명한다.

컴퓨터는 이미지나 영상같은 시각자료에 대한 정보를 텍스트로 알 수 있기때문에 이에 대한 설명을 반드시 추가해줘야 한다. 이미지의 경우 대체텍스트 alt를 단순히 파일 제목으로 하기보다는 간단하게라도 이미지에 대해 설명하는 글을 넣어주는 것이 좋다. 이는 시각장애인들이 사용하는 스크린 리더기가 이미지를 읽는 방법이기도 하고 이미지에 링크를 사용할 경우 앵커텍스트로써의 역할도 한다.

 

4. 페이지, 콘텐츠별 고유한 URL

이해하기 쉬운 url을 통해 구글봇과 사용자에게 콘텐츠의 내용을 전달할 수 있다. 여러개의 하위 카테고리나 메뉴가 있을 경우 디렉토리 구조를 최대한 단순하게 만들고 의미없는 id나 암호화된 문자보다는 홈페이지(메인페이지)를 기반으로 탐색경로나 카테고리가 반영된 url을 사용하는 것이 좋다. 아래 LG전자의 경우 url만 봐도 사용자가 현재 어떤 카테고리에서 어떤 상품을 보고 있는지 알 수 있기때문에 사이트를 탐색하기 편리하다.

 

5. CSR과 SSR (vue와 nuxt)

대부분의 웹 크롤러들은 HTML에서 컨텐츠를 수집하는데 CSR 방식의 경우 서버는 단지 json파일만 보내주고 HTML을 그리는 역할은 클라이언트에서 js로 수행하기때문에 CSR방식으로 개발된 페이지를 빈페이지로 인식할수도 있다. 반면 SSR 방식은 View를 서버에서 전부 렌더링하기 때문에 HTML에 모든 컨텐츠가 저장되어 있어 SEO를 사용하는데 문제가 없다. 현재 구글봇의 경우 자바스크립트도 지원하고 있어 CSR 방식의 사이트도 크롤링이 가능하다고 하지만 vue보다는 SSR방식을 사용하는 nuxt가 검색엔진 최적화에 적합하다고 할 수 있다.

 

검색엔진(SEO) 최적화

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전 세계의 웹사이트 정보를 수집한다. (이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)인덱스를 생성할 때 사용되는 정보는 검색로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다. 검색엔진 봇은 작성된 HTML 구조와 그 안에 담긴 텍스트를 분석함으로써 정보를 획득하고 종합하여 검색결과 상위에 노출될 수 있도록 최적화한다.

 

웹 접근성(Web Accessibility)

웹 접근성이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 대해 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 말한다.

 

웹 접근성 자가 진단 평가 도구

 

웹 접근성 가이드 참고

 

검색엔진 상위노출 가이드

LIST

'🖥 Computer Science > Programming' 카테고리의 다른 글

정적/동적 웹페이지 특징 및 장단점  (0) 2023.11.28
동기/비동기 개념과 프로세스와 스레드  (0) 2023.11.28
[Ngrok] localhost를 외부에서 접속하는 방법  (0) 2023.09.21
[CI/CD] Jenkins와 Github 연동 및 빌드 자동화 구성  (0) 2023.09.19
[Jenkins] 젠킨스(Jenkins) 기본 설정 - windows  (0) 2023.09.18
profile

dev_genie

@dev_genie

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!