티스토리 뷰
SEO 태그 설정 방법
SEO(검색 엔진 최적화)를 효과적으로 수행하려면 웹페이지의 태그를 올바르게 설정하는 것이 중요합니다.
검색 엔진이 웹페이지의 구조와 내용을 쉽게 이해할 수 있도록 여러 가지 태그를 최적화해야 합니다.
1. SEO에 중요한 HTML 태그 종류
| <title> (제목 태그) | 검색 결과에서 표시되는 페이지 제목 | 키워드 포함, 60자 이내 작성 |
| <meta name="description"> (메타 설명) | 검색 결과에서 제목 아래 표시되는 설명 | 150~160자 이내, 클릭을 유도하는 문구 작성 |
| <meta name="robots"> (로봇 태그) | 검색 엔진이 페이지를 크롤링할지 결정 | index, follow 또는 noindex, nofollow 설정 |
| <h1> ~ <h6> (헤딩 태그) | 웹페이지의 제목과 소제목을 정리하는 태그 | H1은 한 번만 사용, 키워드 포함 |
| <img alt=""> (이미지 태그의 Alt 속성) | 이미지에 대한 설명 제공 | 이미지 관련 키워드 포함 |
| <link rel="canonical"> (정규화 태그) | 중복 콘텐츠 문제 방지 | href 속성에 대표 URL 지정 |
| <meta charset="UTF-8"> | 문자 인코딩 설정 | 한국어 페이지는 UTF-8로 설정 |
| <meta viewport> | 모바일 친화적 페이지 설정 | 반응형 웹사이트 필수 설정 |
2. SEO에 최적화된 태그 작성 방법
✅ 1) 제목 태그(<title>) 최적화
🔹 검색 엔진이 가장 중요하게 여기는 태그 중 하나
🔹 검색 결과의 클릭률(CTR)에 큰 영향을 줌
🔹 페이지의 핵심 키워드를 포함해야 함
🔹 최적화 방법
- 60자 이내로 작성
- 핵심 키워드를 제목 앞부분에 배치
- 클릭을 유도하는 문구 포함 (예: "무료 가이드", "최신 트렌드")
🔹 예제 코드
✅ 2) 메타 설명(<meta name="description">) 최적화
🔹 검색 결과에서 제목 아래 표시되는 요약문
🔹 직접 검색 순위에는 영향을 주지 않지만, 클릭률(CTR) 증가에 도움
🔹 최적화 방법
- 150~160자 이내로 작성
- 핵심 키워드 포함
- 사용자에게 클릭을 유도하는 문구 작성 (예: "무료 가이드 제공!")
🔹 예제 코드
✅ 3) 로봇 태그(<meta name="robots">) 설정
🔹 검색 엔진이 페이지를 크롤링하고 인덱싱하는 방법을 지정
🔹 기본값은 index, follow → 검색 엔진이 페이지를 인덱싱 하고 링크를 따라가도록 허용
🔹 설정 옵션
- index, follow → 검색 허용 (기본값)
- noindex, follow → 검색 결과에 표시되지 않지만 내부 링크는 따라감
- noindex, nofollow → 검색 엔진이 페이지를 무시하도록 설정
🔹 예제 코드 (검색 허용 & 크롤링 허용)
🔹 예제 코드 (검색 엔진 차단, 내부 링크도 따라가지 않음)
✅ 4) 헤딩 태그(<h1> ~ <h6>) 최적화
🔹 웹페이지의 제목과 소제목을 계층적으로 구조화
🔹 검색 엔진이 페이지의 주요 주제를 이해하는 데 도움
🔹 최적화 방법
- H1 태그는 한 번만 사용 (페이지의 주요 제목)
- H2~H6 태그를 사용해 내용 정리
- 중요 키워드를 포함하되, 너무 많으면 안 됨
🔹 예제 코드
✅ 5) 이미지 Alt 태그(alt) 최적화
🔹 이미지 내용을 검색 엔진이 이해할 수 있도록 도와줌
🔹 이미지가 로딩되지 않을 경우 대체 텍스트로 표시
🔹 웹 접근성(시각장애인을 위한 스크린리더 지원)에도 중요
🔹 최적화 방법
- 이미지 관련 키워드 포함
- 이미지 내용을 정확하게 설명
🔹 예제 코드
✅ 6) 정규화 태그(<link rel="canonical">) 설정
🔹 같은 콘텐츠가 여러 URL로 노출될 때, 대표 URL을 검색 엔진에 알려주는 태그
🔹 중복 콘텐츠 문제를 방지하고 검색 순위 집중 효과
🔹 예제 코드
✅ 7) 문자 인코딩 태그(<meta charset="UTF-8">) 설정
🔹 한국어 웹사이트의 문자 깨짐을 방지하는 필수 태그
🔹 UTF-8 설정이 기본 (전 세계 언어 지원)
🔹 예제 코드
✅ 8) 모바일 최적화 태그(<meta viewport> 설정)
🔹 모바일에서도 웹사이트가 올바르게 표시되도록 설정
🔹 반응형 웹디자인 필수 요소
🔹 예제 코드
3. SEO 태그 설정 체크리스트
✅ 제목(<title>) 태그는 60자 이내 & 주요 키워드 포함
✅ 메타 설명(<meta name="description">)은 150~160자 이내 & 클릭을 유도하는 문구 작성
✅ 로봇 태그(<meta name="robots">) 설정 확인 (필요시 noindex 사용)
✅ 헤딩 태그(<h1> ~ <h6>)는 계층적으로 정리 & 키워드 자연스럽게 포함
✅ 이미지 태그(<img alt="">)에 키워드 포함 & 이미지 설명 추가
✅ 정규화 태그(<link rel="canonical">) 설정하여 중복 콘텐츠 문제 방지
✅ 모바일 최적화(<meta viewport>) 설정하여 반응형 디자인 적용
4. 결론
SEO 태그 설정은 검색 엔진이 웹페이지를 올바르게 인식하고 순위를 결정하는 핵심 요소입니다.
올바른 태그 설정만으로도 검색 순위가 향상될 수 있으므로, 기본적인 SEO 태그 최적화를 꼭 적용해야 합니다! 🚀