💡 퀵 접속: htm.kr/redirect

HTML5 Redirect(메타 리다이렉트) 태그 사용법

1. Redirect(메타 리다이렉트)란?

HTML에서 <meta http-equiv="refresh"> 태그를 사용하면 일정 시간 후 자동으로 다른 페이지로 이동(리다이렉트)할 수 있습니다. 주로 페이지 이동 안내, 임시 페이지, 유지보수 안내 등에 사용됩니다.

2. 기본 구조

기본 사용법

<meta http-equiv="refresh" content="5;url=https://example.com">

위 코드는 5초 후 https://example.com으로 자동 이동합니다.

3. 자주 사용되는 속성

속성 설명 예시
http-equiv "refresh"로 설정 시 자동 새로고침 또는 리다이렉트 기능을 수행 <meta http-equiv="refresh" ... >
content "초;url=이동할주소" 형식으로, 초 단위 대기 후 해당 주소로 이동 content="3;url=main.html"

4. 실제 사용 예제

<!-- 3초 후 메인 페이지로 이동 -->
<meta http-equiv="refresh" content="3;url=main.html">

<!-- 10초 후 외부 사이트로 이동 -->
<meta http-equiv="refresh" content="10;url=https://www.naver.com">

💡 주의사항

  • 사용자 경험을 위해 리다이렉트 전 안내 메시지를 제공하는 것이 좋습니다.
  • SEO(검색엔진 최적화)에는 서버 측 리다이렉트(HTTP 301/302)를 권장합니다.
  • content 속성의 초 값이 0이면 즉시 이동합니다.
  • 스크립트나 서버 리다이렉트가 불가능할 때만 사용을 권장합니다.

5. 스타일링 예제

<!-- 메타 태그는 스타일이 적용되지 않습니다. 안내 메시지에 스타일을 적용하세요. -->
<div style="padding:20px; background:#e3f2fd; border-radius:6px; text-align:center;">
    5초 후 자동으로 이동합니다. 잠시만 기다려 주세요.
</div>

6. 성능 최적화 팁

  • 불필요한 리다이렉트 사용을 피하고, 서버 리다이렉트를 우선 고려하세요.
  • 사용자에게 충분한 안내와 대기 시간을 제공하세요.

7. 검증 및 테스트

meta refresh 태그가 올바르게 동작하는지 확인하는 방법:

  • 다양한 브라우저에서 테스트
  • SEO 도구로 크롤링 결과 확인
  • W3C 마크업 검증 서비스 사용