고정 헤더 영역
상세 컨텐츠
본문
개요
- SEO에 적합한 코드작성 유무를 묻는 면접이 많아지면서 SEO 검색 엔진 최적화에 의문이 들었다.
- 기본적인 마크업과 명확한 레이아웃 구현이 주를 이룬다면 크게 문제가 되는 게 없지 않을까? 단순히 생각했었는데
이 기회에 SEO에 적합한 코드란 무엇인지 구체적으로 알아보기로 했다.
일단 SEO(검색 엔진 최적화)에 적합한 코드를 작성하려면, 검색 엔진이 페이지의 콘텐츠를 정확하게 이해하고 가치를 높이도록 최적화해야한다. HTML, 메타 태그, 구조화된 데이터, 접근성 등의 고려가 그것들의 예시다.
1. 기본적인 HTML SEO 최적화
1) 올바른 HTML 태그 사용
<h1>이곳은 메인 제목입니다</h1> <!-- 페이지당 1개만 사용 -->
<h2>부제목 1</h2>
<p>관련된 내용을 작성하세요.</p>
<h2>부제목 2</h2>
<p>다른 관련 내용을 추가하세요.</p>h1 태그는 페이지의 주요 제목이므로 1개만 사용해야 하며 h2~h6는 하위 제목으로 활용해야한다.
*덧붙이는 사족) 기존 H1 ~ h6태그를 사용했을 땐 타이틀에 따른 용도의 요소보다 폰트 크기에 따른 css요소를 많이 생각했었다.
리액트 프로젝트를 하면서 컴포넌트를 분리했을 때, 과연 한 페이지내 들어오는 컴포넌트 요소들에서도 h1 요소가 겹쳐도 되는가가 궁금증이었다.
결론은 ? h1은 페이지당 한 개만 사용가능하므로 겹쳐서 이용할시 검색엔진 최적화에 불합하다는 것! 최대한 h1 ~ h6 요소를 순서대로 사용하는 방향으로 수정하였다.
2) 적절한 이미지 태그 (<img>) 활용
<figure>
<img src="seo-image.jpg" alt="SEO 최적화된 웹사이트 예제">
<figcaption>SEO 최적화된 웹사이트를 보여주는 예제 이미지</figcaption>
</figure>alt 속성에 이미지의 의미를 설명하는 문구를 넣으면, 검색 엔진이 이미지 콘텐츠를 이해할 수 있다.
그렇다면 여기서 figure 속성은 무엇일까?
- figure란?
<figure> 요소는 HTML에서 이미지, 도표, 코드 조각, 다이어그램 등과 같은 독립적인 콘텐츠를 표현할 때 사용되며 일반적으로 <figcaption> 요소와 함께 사용해 해당 콘텐츠에 대한 설명을 제공할 수 있다.
✅ <img>를 <figure>로 감싸는 것이 좋은가?
결론적으로, 이미지가 단순한 디자인 요소가 아니라 중요한 콘텐츠라면 <figure>로 감싸는 것이 더 좋다.
하지만, 모든 이미지에 <figure>를 사용할 필요는 없다!
언제 <figure>를 사용해야 할까?
| 사용 시나리오 | <figure>를 사용하는 것이 좋음? | 이유 |
| 이미지가 본문 내용과 직접 관련됨 | 예 | 이미지를 독립적인 콘텐츠로 그룹화하고 설명을 추가 할 수 있음 |
| 캡션(<figcaption>)이 필요한 경우 | 예 | 설명을 추가하면 접근성과 SEO가 향상됨 |
| 차트, 그래프, 코드 조각 등을 포함할 때 | 예 | 의미를 명확하게 전달 가능 |
| 아이콘, 배경, 장식용 이미지 | 아니오 | 단순한 디자인 요소라면 <figure>가 필요 없음 |
비교 예제
❌ 단순한 디자인 요소라면 <img>만 사용
<img src="logo.png" alt="회사 로고">이유: 로고는 본문 내용과 직접적인 관련이 없는 디자인 요소이므로 <figure>가 필요하지 않음.
<figure>
<img src="seo-guide.png" alt="SEO 최적화 가이드 예제">
<figcaption>SEO 최적화 방법을 설명하는 다이어그램</figcaption>
</figure>
이유: 본문과 관련된 이미지를 그룹화하고, figcaption을 추가하여 의미를 명확하게 전달할 수 있음.
SEO & 접근성 측면에서의 장점
- SEO 최적화 → <figcaption>을 사용하면 검색 엔진이 이미지 내용을 더 잘 이해함.
- 접근성 향상 → 스크린 리더가 figcaption을 읽어주기 때문에 시각장애인도 의미를 파악할 수 있음.
- 문서 구조 개선 → <figure>를 사용하면 이미지가 문서의 논리적인 흐름을 더 명확하게 만듦.
결론
- 설명이 필요한 콘텐츠 이미지라면 <figure>을 사용하는 것이 더 좋음.
- 단순한 장식용 이미지라면 <figure> 없이 <img>만 사용해도 충분함.
- SEO와 접근성을 고려할 때 <figure> + <figcaption> 조합이 더 효과적!
3) 메타 태그 최적화
<head>
<title>SEO 최적화 방법 - 검색 순위 올리기</title>
<meta name="description" content="SEO 최적화하는 방법을 배우고, 웹사이트 검색 순위를 높이는 법을 알아보세요.">
<meta name="keywords" content="SEO, 검색 엔진 최적화, 구글 상위 노출">
<meta name="robots" content="index, follow">
</head>
- <title>: 검색 결과에 표시될 제목 (60자 이내)
- <meta description>: 페이지 요약 (150자 이내)
- <meta keywords>: 과거에는 중요했지만 현재는 큰 영향 없음
- <meta robots>: 검색 엔진이 페이지를 크롤링할지 결정 (index, follow가 기본)
2. 빠른 로딩 속도 & 모바일 최적화
1) 이미지 최적화
- 이미지는 WebP 형식을 사용하여 용량 줄이기
- width & height 속성을 지정하여 레이아웃 시프트(LCP) 문제를 방지
<img src="image.webp" alt="빠른 SEO 이미지" width="600" height="400">
2) CSS와 JavaScript 최적화
- 필요한 코드만 로드
- CSS와 JavaScript 파일을 최소화(minify)
- 중요한 CSS는 내장 스타일(inline styles) 로 적용
- defer 또는 async 속성을 사용하여 스크립트 로딩을 최적화
<script src="script.js" defer></script>
3) 반응형 웹 디자인 적용
<meta name="viewport" content="width=device-width, initial-scale=1">이 코드를 추가하면, 모바일 화면에서도 최적화된 뷰포트를 제공할 수 있다.
4. 내부 링크 & 외부 링크 최적화
✅ 1) 내부 링크 활용
웹사이트의 구조를 명확하게 하여 검색 엔진이 쉽게 크롤링할 수 있도록 만든다.
같은 사이트 내에서 관련 페이지를 연결하면 SEO 점수를 향상시킬 수 있다.
<a href="/seo-guide">SEO 가이드 보기</a>
2) 외부 링크(출처) 추가
신뢰할 만한 외부 웹사이트로 연결하면 신뢰도를 높일 수 있다.
rel="noopener noreferrer"을 사용하면 보안성을 높일 수 있다.
<a href="https://developers.google.com/search/docs" target="_blank" rel="noopener noreferrer">
구글 검색 가이드 참고
</a>
결론
✅ 검색 엔진이 잘 읽을 수 있도록 HTML 구조를 올바르게 사용
✅ 메타 태그를 최적화하여 제목과 설명을 명확히 제공
✅ 구조화된 데이터(Schema.org)를 적용하여 검색 가시성을 높임
✅ 웹페이지 속도와 모바일 최적화를 진행하여 사용자 경험 개선
✅ 내부 링크와 외부 링크를 효과적으로 활용하여 사이트 신뢰도를 높임
이런 요소들을 적용하면 검색 엔진 최적화(SEO)를 더욱 효과적으로 수행할 수 있다.
'Diary about code' 카테고리의 다른 글
| 02. 웹접근성, 웹표준화 (0) | 2025.02.19 |
|---|
