[로드맵] FrontEnd - HTML #2

Fron-end 로드맵 중 Front-end 부분 - 드림코딩

https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상

HTML

4. SEO

SEO 란?

SEO(Search Engine Optimization)는 검색 엔진 최적화라 하며 네이버나 구글 같은 검색 엔진이 쉽게 이해할 수 있는 형태로 웹페이지를 구성하는 과정을 말한다. 이를 통해 검색엔진 상위 노출도를 높일 수 있다.

SEO를 위한 작업

• 메타 태그
  description: 웹페이지에 대한 간략한 1~2줄의 문장
  robots: 웹페이지별 검색로봇의 접근 여부를 설정하는 태그

<!-- 네이버 meta 태그 -->
<meta name="robots" content="index,nofollow">
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">

• title 태그
  검색엔진에 노출되는 제목을 설정. 해당 페이지를 가장 잘 나타내는 주제로 정하는 것이 좋다.

<!-- 네이버 Title -->
<title>NAVER</title>

• 오픈그래프 태그
  웹페이지의 링크가 카카오톡이나 다른 SNS에서 공유될 때 어떻게 노출되는지 정의하는 태그. 뿐만 아니라 검색엔진 최적화 과정에서 해당 웹페이지가 SNS에 얼마나 공유되는지 파악할 수 있도록 하여 상위노출도 평가에 영향을 준다.

<!-- 네이버 오픈그래프 태그 -->
<meta property="og:title" content="네이버">
<meta property="og:url" content="https://www.naver.com/">
<meta property="og:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">

네이버 카카오톡 공유

5. Accessibility

Accessibility 란?

Accessibility는 접근성이라는 뜻으로 누구나 동등하게 웹페이지를 사용할 수 있도록 하는 것을 의미한다. 장애인 혹은 고령자 등 다양한 사람들이 모두 웹페이지를 잘 이용할 수 있도록 보장하는 것을 말한다.

접근성 지침

WCAG(Web Content Accessibility Guide) 2.1 에 대한 간단한 내용은 다음과 같다.

• 인식의 용이성: 사용자가 컨텐츠를 인식할 수 있는가에 대한 지침들을 나타낸다.
• 운용의 용이성: 사용자가 컨텐츠와 상요작용할 수 있는가에 대한 지침들을 나타낸다.
• 이해의 용이성: 사용자가 인터페이스를 이해할 수 있는가에 대한 지침들을 나타낸다.
• 견고성: 사용자가 다양한 환경에서 사용할 수 있는가에 대한 지침들을 나타낸다.

각 사항별로 다양한 지침들이 존재하며 이러한 지침을 잘 지키는 것으로 웹 접근성을 높일 수 있다.