[웹] Seo 와 WAI-ARIA 내용 정리

📌 SEO(Search Engine Optimization, 검색 엔진 최적화

검색 엔진 최적화(영어: search engine optimization, SEO)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다.
웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다.

❓ 필요성

대부분 특정 웹 페이지에서 정보를 검색했을때 원하는 결과가 상위페이지에 있는경우 다른 페이지로 굳이 넘기지 않는다. 힘들게 웹 페이지를 만들어도 검색시 상위결과에 없고 뒤 페이지로 넘어간다면, 아무도 찾지않는 웹페이지가 된다.
이러한 사태를 방지하기위해 검색엔진의 작동 방식에 맞게 웹 페이지를 최적화해 주는 작업 (SEO)이 필요하다.

On-Page SEO

• 내부에서 사용하는 방법으로, 제목 , 컨텐츠 , 핵심 키워드 배치, HTML 시멘틱요소 등을 이용한다.

Off-Page SEO

• 외부에서 홍보, 광고 백링크 등으로 이용하는 방법으로, 페이지 내용이나 구조와는 관계가 없다.

On-Page 요소

대표적으로 <title> , <meta> 가 있다.

• title 은 검색 결과에서 바로 보이는 제목에 해당하는 요소이다. 유튜브에서 제목이 클릭하게 만드는것과 같이 중요하다.
• 또한 핵심 키워드를 포함하면 상위노출 확률이 높아진다. 하지만 여러번 반복시 불이익이 발생할 수도 있으니, 한번만 포함하도록 한다.

---

meta 요소는 title 과는 다르게 여러 속성값이 있다.

SEO를 위한 meta 요소

<meta name="속성값" content="내용" />

description : 콘텐츠에 대한 간략한 설명이다다. (검색 결과에서 제목 밑에 뜨는 내용)
keywords : 웹 페이지의 관련 키워드들을 나열할 때 사용한다.
author : 콘텐츠의 제작자를 표시한다.

오픈 그래프 (open graph)

property 속성값	설명
og:url	페이지의 표준 URL
og:site_name	사이트의 이름
og:title	콘텐츠의 제목
og:description	콘텐츠에 대한 간략할 설명입니다. (검색 결과에서 제목 밑에 뜨는 내용)
og:image	미리보기로 표시될 이미지
og:type	콘텐츠 미디어의 유형입니다. 기본 값은 website로, video, music 등의 유형을 표시할 수 있다.
og:locale	리소스의 언어로, 기본값은 en_US 한국은 ko_KR

---

✅ WAI-ARIA

WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격으로, 웹 접근성을 향상시킬 수 있는 방법 중의 하나이다.

WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술

❓ 필요성

• 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와준다.

• 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미이다.

• WAI-ARIA는 보조적인 역할로만 사용해야한다. WAI-ARIA를 남용해선 안 되며, 시맨틱한 HTML을 작성하는 것이 최우선

💡 사용방법

WAI-ARIA의 속성에는 세 가지 분류가 있다.

역할(role) : HTML 요소의 역할을 정의하는 속성
상태(state) : 요소의 현재 상태를 나타내는 속성
속성(property) : 요소의 특징을 정의하는 속성(attribute)

• HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute)이다.
• HTML 요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 또 설명해줄 필요는 없다.
• 시맨틱 요소 본연의 의미를 임의로 바꾸지 않아야 한다.

<div role="button">div이지만 button으로 사용되는 요소</div>

// WAI-ARIA의 잘못된 사용 예시
<button role="button">button인 요소</button>

// WAI-ARIA의 잘못된 사용 예시
<h1 role="button">h1인 요소</h1>

• 텍스트 콘텐츠 없이 이미지로만 만들어진 버튼의 경우 어떤 역할을 하는지 파악하기 힘들다.
• 그럴때 aria-label 요소를 사용하면 다음과 같이 의미를 부여해줄 수 있다.
• aria-label 은 말 그대로 요소에 라벨을 붙여주는 기능이다.

<button> <img src="X.png" /> </button>
<button> <img src="돋보기.png" /> </button>

// aria-label
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

🌴 정리

검색 엔진 최적화 과정을 통해 웹사이트의 상위노출을 시킬 수 있다.
적절한 시멘틱요소와, title, meta를 잘 활용하고 생각하여 웹 사이트를 개발해야 한다.
WAI-ARIA 는 다양한 속성들이 존재 하지만
role, aria-label 정도만 사용해도 HTML에 추가적인 의미를 부여할 수 있기 때문에 웹 접근성을 어느정도 향상시킬 수 있다