웹사이트를 일정 시간 후 다른 페이지로 이동시키고 싶은데 JavaScript를 사용하고 싶지 않다면, HTML의 META 태그를 활용하면 됩니다. 이 방법은 별도의 스크립트 없이 순수 HTML만으로 페이지를 자동 전환할 수 있어 매우 간편합니다.
메타 태그를 이용한 리디렉션 원리
HTML 페이지에서 리디렉션을 구현하려면 <head> 영역 안에 <meta> 태그를 추가하면 됩니다. 이때 http-equiv 속성을 사용하여 content 속성 값에 해당하는 HTTP 헤더를 제공합니다.
content 속성의 값은 페이지가 리디렉션되기를 기다리는 초 단위 시간을 의미합니다. 예를 들어 값을 5로 설정하면 5초 후에 지정된 URL로 이동합니다.
이 기능을 활용하면 방문자를 새 홈페이지로 자동으로 안내할 수 있습니다. 만약 페이지가 로드되는 즉시 바로 리디렉션되기를 원한다면, content 속성 값을 0으로 설정하면 됩니다.
기본 문법
<meta http-equiv = "refresh" content = "대기_시간(초); url = 이동할_URL" />
예제: 2초 후 다른 페이지로 이동하기
다음은 현재 페이지를 2초 후에 다른 페이지로 리디렉션하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Redirection</title>
<meta http-equiv = "refresh" content = "2; url = https://www.tutorialspoint.com" />
</head>
<body>
<p>This page will redirect in 2 seconds.</p>
</body>
</html>위 코드를 실행하면 브라우저에 "This page will redirect in 2 seconds."라는 문구가 표시되고, 정확히 2초 후에 지정된 URL(https://www.tutorialspoint.com)로 자동으로 이동합니다.
활용 팁 및 주의 사항
- JavaScript 비활성화 환경에서도 작동: 메타 태그 방식은 브라우저 차원에서 처리되므로 사용자가 JavaScript를 꺼두어도 정상적으로 리디렉션됩니다.
- 적절한 대기 시간 설정: 이동 안내 문구를 함께 표시하는 경우, 사용자가 내용을 인지할 수 있도록 최소 2~3초 이상의 대기 시간을 두는 것이 좋습니다.
- SEO 고려 사항: 검색 엔진 최적화 관점에서는 가능하면 서버 측 301 리디렉션을 사용하는 것이 권장됩니다. 메타 리프레시는 임시 안내 페이지나 간단한 용도에 적합합니다.
- 접근성 향상: 자동으로 이동하기 전에 링크를 직접 클릭할 수 있는 대체 링크를 함께 제공하면 사용자 경험이 더욱 좋아집니다.