안녕하세요! sopt 36기 Web 파트원 김정민입니다
오늘은 meta 태그에 대해서 정리해보려고합니다
meta 태그란?
HTML 문서의 메타데이터(정보에 대한 정보)를 담는 태그로, 웹페이지의 설명, 작성자, 문자 인코딩, 검색엔진 설정 등을 정의할 수 있습니다!
대체로 <head>안에 위치하며 브라우저에 직접 보이진 않지만 검색엔진 최적화(SEO), 소셜 미디어 공유, 웹브라우저 동작 등에 큰 영향을 주고있습니다!
자주 사용하는 meta 태그 정리
1. <title>
- 페이지 제목을 정의된다
- 검색 결과나 브라우저 탭 이름에 표시된다
<title>기술 블로그 - sopt</title>
=> 너무 짧거나 중복되면 SEO에 불리! 키워드 포함 추천
2. description
- 페이지 설명: 검색엔진에 요약 설명 제공한다
- Google 검색 결과의 요약글로 사용될 수 있다
<meta name="description" content="sopt, web, meta데이터를 정리한 블로그 포스트입니다.">=> 150~160자 이내가 적당. 핵심 키워드를 포함한다
3. robots
- 검색엔진 크롤러의 동작을 제어한다
- 인덱싱 여부와 링크 추적 허용 여부 설정한다
<meta name="robots" content="index, follow">
<!-- 또는 -->
<meta name="robots" content="noindex, nofollow">
- index: 페이지 인덱싱 허용
- noindex: 검색 결과에서 제외
- follow: 링크 추적 허용
- nofollow: 링크 추적 금지
=> 개발 중인 페이지는 noindex로 설정하는 경우도 있어요!
4. viewport
- 반응형 웹 필수 요소
- 화면 크기나 확대/축소 동작을 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">
=> 모바일에서 깨지지 않도록 필수 설정!
위 예시 태그들이 주로 사용되지만 다른 메타 태그들도 있으니 심심할 때 다른 태그들 찾아봐도 좋을것 같습니당~
| <title> | 페이지 제목 표시 | ⭐⭐⭐⭐ |
| description | 검색 결과 설명 요약 | ⭐⭐⭐⭐ |
| robots | 인덱싱/크롤링 제어 | ⭐⭐⭐ |
| viewport | 반응형 화면 설정 | ⭐⭐ |
| charset | 문자 인코딩 지정 | ⭐ |
| author, keywords | 작성자, 키워드 정보 | ⭐ (거의 영향 없음) |
=> 태그들에 따른 SEO 영향도표입니다
'1주차' 카테고리의 다른 글
| 왜 애니메이션에서 transform이 성능이 좋을까? (0) | 2025.04.11 |
|---|---|
| JS 엔진 동작 원리/ 구성요소 (0) | 2025.04.11 |
| Scroll-based CSS 애니메이션 (1) | 2025.04.11 |
| SEO를 알고 나의 성공시대 시작됐다 (0) | 2025.04.11 |
| [HTML] 접근성을 위한 또 다른 방법 - ARIA Role (0) | 2025.04.11 |
