웹 표준 및 웹 접근성

웹 표준

유지 보수의 용이성
웹 표준으로 HTML, CSS, JavaScript 로 화면의 구조, 표현, 동작 영역이 분리되면서
유지 보수가 용이 / 코드의 경량화 / 트래픽 비용 감소
웹 호환성 확보
검색 효율성 증대
웹 접근성 향상

시맨틱 요소*를 적절하게 사용하여 구성한 HTML
- 시맨틱 요소: 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소

개발자간 소통
다인원 개발 시 타 개발자가 작성한 비시맨틱 요소의 기능을 파악하고 정의하는 데에 드는 시간 절약
검색 효율성
시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 SEO가 검색 결과 상단에 표시
웹 접근성
시맨틱 요소가 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달하여 웹 접근성 향상

인라인 요소 안에 블록 요소 넣기
👉 블록 요소(<div>) 안에 인라인 요소(, <a>)를 넣을 것
, 요소 사용하기
👉 , 으로 대체
<hgroup> 마구잡이로 사용하기
👉 목차 작성 시 콘텐츠의 상하 관계를 제대로 생각하여 작성
(h1~h6, 숫자가 작을 수록 글자 크기가 크고, 숫자가 커질 수록 크기가 작아진다)
 연속으로 사용하기
👉 은 줄바꿈 용도로만 사용
요소 사이에 간격 필요한 경우 별도의 단락으로 구분()하거나 css 속성에서 여백을 조정할 것
인라인 스타일링 사용하기
👉 HTML과 CSS 코드 분리하여 작성

On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용
Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없음

1. <title> 요소

<title> 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성

올바른 <title> 요소 작성으로 검색 후 유입까지 유도 및 상위에 노출될 확률이 상승

2. <meta> 요소

메타 데이터: 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터

검색 결과창, 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 <meta> 요소에 들어감

2-1. <meta> 요소 사용 목적

name 속성을 사용하며, SEO를 위해서 사용
property 속성을 사용하며, 다른 사람에게 공유하기 위해 => 오픈 그래프(Open Graph) 라고 하며, 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙음

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

오픈 그래프 (open graph)

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

3. <hgroup> 요소

<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높음

이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체하거나, 핵심 키워드의 관련 키워드들을 포함하는 것이 좋음

4. 콘텐츠

개성있는 브랜딩
복사 + 붙여넣기 금지
타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정하여 아예 검색 결과에서 생략하는 경우도 있음
간결한 제목과 설명글
최대한 글자로 작성하기
검색엔진이 읽을 수 없는 이미지로만 내용을 작성하는 것은 지양
꼭 이미지를 넣어야 한다면 alt 속성을 사용하여 해당 이미지에 대한 설명을 텍스트로 추가하는 것이 좋음