웹퍼블리싱과 디자인 작업 시 체크해야 할 SEO 관련 사항

 

안녕하세요 찐망고입니다.

이전에 SEO(검색엔진최적화)작업에 대한 포스팅을 했는데요.

SEO(검색 엔진 최적화)작업

 

그렇다면 현재 마크업하는 입장에서 우리는 멀 체크하며 작업을 해야할 지 알아봐야겠죠?

 

물론 그동안 계속 포스팅을 하긴 했지만 정리차원에서

1. HTML 마크업에서 체크해야 할 요소

  1. 시맨틱 태그 사용

• 콘텐츠 구조를 명확히 하고 검색 엔진이 쉽게 이해할 수 있도록 합니다.
• 예: <header>, <main>, <section>, <article>, <footer> 등의 시맨틱 태그 사용.

<article>
  <h1>SEO란 무엇인가?</h1>
  <p>검색 엔진 최적화는...</p>
</article>

 

 

  2. H태그 계층 구조

• 제목 태그는 계층적으로 사용해야 합니다.
• 예: <h1>은 페이지의 주제, <h2>는 주요 섹션, <h3>는 하위 섹션.
• 잘못된 예: <h1>을 여러 번 사용하거나 계층을 건너뛰기.

<h1>SEO 가이드</h1>
<h2>SEO의 중요성</h2>
<h3>키워드 연구</h3>

 

 

  3. alt 속성 작성

• 이미지는 반드시 alt 속성을 추가해야 합니다.
• alt 속성은 이미지의 대체 텍스트로, 검색 엔진과 화면 리더가 이미지를 이해하는 데 도움을 줍니다.

<img src="seo-guide.jpg" alt="SEO 가이드 이미지">

 

 

 4. 메타 태그 삽입

• Title 태그: 페이지의 제목을 명확하게 작성합니다.
• Description 메타 태그: 페이지 내용을 간단히 요약.
• Viewport 메타 태그: 모바일 최적화를 위해 추가.

<meta name="description" content="SEO의 모든 것: 검색 엔진 최적화 가이드">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

5. 페이지 속도 최적화

• HTML 파일 크기를 줄이고 불필요한 주석 제거.
• CSS와 JS는 가능한 한 압축된(minified) 버전을 사용.

 

2. 디자인 작업에서 체크해야 할 요소

  1. 반응형 웹 디자인(Responsive Design)

• 다양한 화면 크기(모바일, 태블릿, 데스크톱)에서 사이트가 잘 보이도록 작업합니다.
• 툴 활용: 브라우저의 개발자 도구를 사용해 반응형 상태를 테스트.

 

 2. 폰트 크기와 가독성

• 검색 엔진뿐만 아니라 사용자가 콘텐츠를 쉽게 읽을 수 있어야 합니다.
• 기본적으로 본문은 16px 이상, 줄 간격(line-height)은 충분히 설정합니다.
• 폰트 대비(contrast ratio)는 WCAG 기준(최소 4.5:1) 이상.

 

3. 이미지 최적화

• 적절한 파일 형식 사용: PNG, JPEG, WebP 등 상황에 맞게 선택. 
• 이미지 크기 조정: 필요 이상의 해상도를 줄여 페이지 속도 최적화.
• Lazy Loading 적용: 스크롤할 때 이미지를 로드하도록 설정

<img src="large-image.jpg" alt="예제 이미지" loading="lazy">

 

 

4. CTA 버튼 및 사용자 동선 디자인

• 버튼은 명확하고 클릭하기 쉬운 크기로 디자인.
• 예를 들어, 모바일에서는 손가락으로 쉽게 클릭할 수 있도록 버튼 크기를 충분히 크게 설정.

 

5. 색상과 접근성

• 시각 장애인을 고려한 색상 대비를 사용합니다.
• 예: 버튼이나 링크 색상만으로 상태를 표시하지 않고, 텍스트로도 상태를 명확히 합니다 .

 

3. 툴 활용으로 체크할 수 있는 사항

  1. HTML과 CSS 점검: W3C Validator로 HTML/CSS 문법 오류 확인.

  2. 디자인 접근성 체크: Color Contrast Checker로 대비 검사.

  3. 반응형 테스트: Chrome 개발자 도구에서 다양한 디바이스로 확인.

  4. 페이지 속도 확인: PageSpeed Insights에서 개선 사항 분석.

 

 

웹퍼블리싱 작업은 단순히 "보기에 좋은 웹사이트"를 만드는 것을 넘어,

검색엔진이 좋아하고 사용자에게도 편리한 사이트를 만드는 것이 중요합니다.

이러한 체크리스트를 활용하면 디자인과 퍼블리싱 작업을 하면서 SEO를 동시에 고려할 수 있겠죠?