SEO
개발자가 아무리 열심히 웹페이지를 만들어도, 검색했을 때 검색 결과 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹 페이지가 되어버린다.
이런 사태를 방지하기 위해서는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업, SEOSearch Engine Optimization 검색 엔진 최적화 가 필요하다. SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있다.
SEO는 크게 On-Page SEO 와 Off-Page SEO 두가지로 나뉜다.
- On-Page SEO : 페이지 내부에서 진행할 수 있는 SEO 제목, 콘텐츠, 핵심 키워드 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
- Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO, 소셜 미디어 홍보, 백링크등을 이용하는 방법, 웹 페이지 내용이나 구조와는 관계 X
On-Page SEO 예시의 일례로 여러 개의 <meta>요소와 <title>요소에 검색 키워드를 적용시킨다. 등이 있다.
SEO에 미치는 요소
1. <title> 요소
<title> 요소는 검색 결과창에서 제목에 해당하는 요소로,<head> 요소의 자식 요소로 작성한다.
<title>요소에 어떤 내용을 적는가에 따라 검색 후 유입까지 유도할 수 있다.- 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어진다.
<title>요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.- 같은 키워드를 반복시 불이익을 받을 수 있으니 핵심 키워드는 한 번만 포함시켜주자.
2. <meta> 요소
<meta> 요소는 메타 데이터를 담는 요소
<meta> 요소도 <head> 요소의 자식요소로 작성해주는 것이 일반적
<meta> 요소 안에 들어있는 내용은 웹페이지가 어떤 데이터를 달고 있는지를 설명하는 메타 데이터임을 알 수 있다. 또한 <meta> 요소에 들어가는 내용은 검색 결과창에서만 확인 할 수 잇는 것이 아닌 소셜 미디어나 채팅 앱에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 이 <meta> 요소에 들어가 있는 내용이다.
<meta> 요소의 각각의 목적은 다르다.
첫 번째 경우에는 name속성을 사용하며, SEO를 위해서 사용하는 것이 목적이다.
두 번째 경우는 property속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적.
특히 property속성을 사용하는 경우는 오픈 그래프Open Graph 라고 하며, 페이스북에서 게시물을 공유하기 위한 목적으로 만들었으며, 속성값 앞에는 오픈 그래프를 뜻하는 "og"가 붙는다.
SEO를 위한 meta 요소
<meta name='속성값' content='내용' />| name 속성값 | 설명 |
|---|---|
| description | 콘텐츠에 대한 간략한 설명. 검색결과에서 제목 밑에 뜨는 내용을 생각하면 된다. |
| keywords | 웹 페이지의 관련 키워드들을 나열할 때 사용 |
| author | 콘텐츠의 제작자를 표시한다. |
오픈 그래프
<meta property ='속성값' content='내용'/>| property 속성값 | 설명 |
|---|---|
| og:url | 페이지의 표준 URL |
| og:site_name | 사이트의 이름 |
| og:title | 콘탠츠의 제목 |
| og:description | 콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 내용을 생각하면 된다. |
| og:image | 미리보기로 표시될 이미지 |
| og:type | 콘텐츠의 미디어 유형. 기본 값은 website로, videio, music등의 유형을 표시할 수 있다. |
| og:locale | 리소스의 언어로, 기본 값은 en_US 한국은 ko_KR이다. |
3. <hgroup> 요소
<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인 만큼 핵심 키워드를 포함하고 잇을 가능성이 높다. 따라서 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급한다.
but 똑같은 키워드만 반복 === 역효과.
비슷한 키워드로 대체해서 사용 or 핵심 키워드& 관련 키워드 포함시키는 것이 좋다.
4. 콘텐츠
개성있는 브랜딩
아이디어나 이름이 겹치지 않는다면, 관련 키워드를 검색했을 때 해당 웹 사이트가 상위권에 뜰 가능성이 매우 높다. 꼭 이름이나 서비스 종류가 이니더라도 웹사이트만의 독특한 이벤트나 콘텐츠를 만들어내는 것도 훌륭한 방법
복붙 금지
타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정 아예 검색 결과에서 생랼해버리기도 한다.
타 사이트의 글을 이용하고 싶다면, 일부만 가져오면서 링크를 첨부하여 출처를 표기하는 것이 좋다.
간결한 제목과 설명글
웹사이트와 관련있는 키워드라고 해도, 같은 키워드를 너무 많이 반복해서 작성해도 좋지 않다. 최악의 경우 스팸 요소가 있는 사이트로 분류될 가능성도 있으니 조심하자.
최대한 글자로 작성하기
적절한 이미지의 사용은 콘텐츠의 품질을 높여준다. 하지만 글자로 적어도 될 내용을 굳이 이미지로 만들어서 작성하는 것은 SEO에는 도움이 되지 않는다.
꼭 이미지를 넣어야 한다면 alt 속성을 사용하여 해당 이미지에 대한 설명을 텍스트로 작성하는 것이 좋다.
// O
<img src='nada.img' alt='nada_blog_logo' />
//X
<img src='nada.img' alt='나다 블로그 로고, 클립, 소스, 메뉴 네브바 등' />
웹 접근성
웹 접근성이란?
일반적으로 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있또록 보장하는 것을 뜻한다. 또한 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다.
궁극적인 목적으로 어떤 상황이든, 어떤 사람이든 정보를 제공받지 모하는 경우가 없도록 하는 것이다.
웹 접근성 실태
우리나라의 웹 접근성 수준은 높은 정보화 수준에도 불구하고 높지 않다.
일례로 시력이 안 좋은 경우 화면의 텍스트를 음성으로 읽어주는 스크린 리더를 사용하는 경우가 많다. 하지만 이미지에 들어있는 글자의 경우는 스크린 리더가 인식할 수 없어 음성으로 읽어줄 수 없다.
국내 온라인 쇼핑몰 사이트를 보면 상품의 상세정보가 이미지로 올라와있는 경우가 많고, 텍스트로 표시된 정보는 굉장히 제한적인 것을 볼 수 있다.
해외 쇼핑몰 사이트 같은 경우 상품의 기본 정보가 모두 텍스트로 작성되어 있다. 또한 페이지에 첨부되어 있는 모든 이미지에 이미지를 설명하는 텍스트가 함께 작성되어 있다.
국내에서는 대부분의 경우 웹 접근성에 대한 인식이 낮은 편이고, 잘 지켜지지 않는 경우가 많다.
웹 접근성을 갖추기 위해 노력하면 정보의 평등에 다가갈 수 있는 것은 물론이고, 그 외에도 여러 가지 효과를 기대할 수 있다.
웹 접근성을 갖추면 얻을 수 있는 효과
- 사용자층 확대
웹 접근성을 확보하면 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 된다.
그만큼 이용자를 늘릴 수 있고, 새로운 고객층을 확보할 수 있게 된다.
- 다양한 환경 지원
웹 접근성을 향상시키면 다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대된다. 자연스럽게 서비스 이용자 수 증가를 기대할 수 있다.
- 사회적 이미지 향상
기업의 사회적 책임에 대한 중요성이 점점 증가하고 있는 상황에서, 웹 접근성 확보를 통해 기업이 정보 소외계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 잇음을 보여줄 수 있다. 그만큼 이용자 수 증가는 물론 충성 고객을 확보할 수 있는 가능성이 늘어나게 된다.
WAI-ARIA
- WAI
Web Accessibility Initiative: 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 - ARIA
Accessible Rich Internet Applications: 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는 기술- RIA
Rich Internet Applications: 따르 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA 를 의미하는 경우가 많다.
- RIA
정리하자면, WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격이다.
WAI-ARIA의 필요성
WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다.
- 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 도와준다.
시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황이라는 것은 시맨틱 요소만으로 충분한 상황에서는 사용하지 않아야 한다는 의미. WAI-ARIA는 보조적인 역할로만 사용해야 한다.
- SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해줄 수 있어 동적인 콘텐츠엣도 웹 접근성을 향상시킬 수 있다.
WAI-ARIA 사용법
WAI-ARIA는 HTML 태그 내부에 속성을 추가함으로서 의미를 부여해줄 수 있다.
WAI-ARIA의 속성에는 크게 세가지 분류가 있다.
- 역할 role : HTML 요소의 역할을 정의하는 속성
- 상태 state : 요소의 현재 상태를 나타내는 속성
- 속성 property : 요소의 특징을 정의하는 속성 attribute
- 역할 role
HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성.
예를 들어, 버튼으로 사용되는 요소를 만들었는데<div>요소를 사용했다면, 이 요소가 버튼 역할을 하고 있음을 다음과 같이 표시해줄 수 있다.
<div role='button'>div이지만 button으로 사용되는 요소</div>주의할 점은, HTML요소로 충분히 파악할 수 있는 내용을 또 설명해줄 필요는 없다.
또한, 시멘틱 요소 본연의 의미를 임의로 바꾸지 않아야 한다.
- 상태 state
- aria-selected
탭 컴포넌트에서 필요한 정보가 역할 뿐인가? 어떤 탭이 선택되어 있는지도 알 수 있어야 하지 않을까?
이럴 때 사용하는 속성이 바로 여러 개의 선택 가능한 요소 중에서 선택 상태인 요소를 표시할 수 있는 aria-selected라는 속성이다.
<div role='tablist'>
<li role ='tab' aria-selected='true'>Tab1</li>
<li role ='tab' aria-selected='false'>Tab2</li>
<li role ='tab' aria-selected='false'>Tab3</li>
</div>
<div role='tabpanel'>Tab menu ONE</div>
<div role='tabpanel'>Tab menu Two</div>
<div role='tabpanel'>Tab menu THREE</div>이제 3개의 탭 중에서 첫 번째 탭이 선택된 상태임을 알 수 있게 됐다.
이 외에도 아코디언 UI가 펼쳐진 상태인지 표시해주는 aria-expanded,요소가 숨긴 상태인지를 표시하는 aria-hidden등의 속성이 있다.
- 속성 property
- aria-label
이따금 요소에 대한 정보를 전혀 얻을 수 없는 경우가 발생하기도 한다.
텍스트 콘텐츠 없이 이미지로만 만들어진 버튼이 대표적인 예시이다.
<button aria-label='닫기'><img src='close.png' /></button>
<button aria-label='검색'><img src='sersh.jpeg' /></button>- aria-live
aria-live속성은 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시한다.
즉, 브라우징 도중에 내용을 띄우는 alert ,modal , off(defalt) 가 있다.
1. polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달한다.
2. assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달한다.
