부제 : custom 404 page 만들 때 주의사항과 IE 에러 사항 처리

인터넷을 여행하다 보면 마주치게 되는 여러가지 상황들.

그 중 가장 많이 접하는 상황은 아마도 HTTP Status Codes 404 에러일 것이다.
쉽게 말해서 페이지를 찾을 수 없다는 아래와 같은 화면인데 보통은 페이지가 사라졌거나 페이지 이름이 바뀌었거나 스펠링을 잘못 쳤거나 그것도 아니라면 도메인이 없어져서 더 이상 운영을 하지 않는 경우도 있다.

그런 여러가지 경우 IE(Internet Explorer)는 아래와 같은 에러 페이지를 보여준다. 아주 익숙하지만 별로 반갑지는 않은 화면임에는 틀림없다.

404 error page

404 error page


이런 정겹지 않은 404 에러 페이지를 바꿔보자.

실제로 자신만의, 자기 사이트만의 404 page가 있는 곳이 많다. (네이버가 없다는 것이 참 이상할 따름이다. 아니면 고도의 어떤 전략일지도 모를 일이다. 궁금하면 여기를 클릭해 보자)

티스토리 사용자는 사용할 수 없다는 슬픈 사실.
하지만 고객센터에서 다음과 같은 답변을 받았다. 한줄기 햇살같은

현재 티스토리에서는 404 에러 페이지를 꾸미는 기능에 대해서는 제공을 하고 있지 않습니다.
현재 서비스 계획이 잡혀 있지 않지만, 내부적으로 검토를 해 보도록 하겠습니다.


404 에러 페이지 만드는 순서

Step 1. 일단 custom 404 page를 만들고 파일 이름을 적당히 정한다.(일단 404.html 정도로)

Step 2. 파일 만들어서 최상단 폴더에 업로드한다.

Step 3. 먼저 자신의 웹 서버에 따라서 아래와 같이 설정을 수정해야 한다.
    아파치(Apache) 웹 서버일 경우:
       - ErrorDocument 404 /404.html
       - 위 내용을 자신의 최상단 폴더의 '.htaccess' 파일에 (없으면 만들어서) 추가한다.
            .htaccess 파일은 메모장같은 텍스트 에디터로 만든 다음 파일이름을 바꾸면 된다.

                여기에 관련된 추가 사항은 제가 쓴 다른 글을 참고하면 된다.

    IIS(Internet Information Services) 웹 서버일 경우:
       - WWW 서비스의 속성을 선택하고 'Custom Errors' 탭을 선택한다.
       - 404 error 의 디폴트 페이지를 404.html 로 바꾼다.

Step 4. 제대로 동작하는지 확인한다.
    일부러 없는 페이지로 접근해서 자신이 만든 에러 페이지가 정상적으로 보이는지 체크한다.

Step 5. HTTP Status Codes 가 404로 반환해 주는지 200으로 반환해 주는지 한번 더 확인한다.
간혹 404 status code를 리턴하지 않고 200 status code를 리턴하는 경우가 있다.

쉽게 아래와 같은 사이트에서 온라인상에서 확인할 수 있다.
HTTP Status Codes Checker1, HTTP Status Codes Checker2


Custom 404 page 만들 때의 주의 사항

1. php를 사용할 수 있을 경우 아래와 같은 코드를 사용해 보자.

<?php header("HTTP/1.1 404 Not Found"); ?>
<?php header("Status: 404 Not Found"); ?>

이 부분은 html 의 제일 앞부분에 추가해야 한다. 그렇지 않으면 에러가 난다.
위 부분은 http status 를 반환해 준다. Step 5. 부분을 해결할 수 있다.

2. HTML 메타 태그를 추가하자.
<meta name="robots" content="noindex, nofollow" />

위와 같은 메타태그를 설정하면 웹 크롤러가 긁어가지 않고 링크도 무시하게 된다.
404 error page까지 검색엔진이 긁어갈 필요는 없을 것 같으니까.

robots 메타 태그웹크롤러가 문서별로 가져갈지 여부를 설정할 수 있는 태그다.

content에서 사용되는 내용은 아래와 같다.
index이면 페이지는 긁어 가고 noindex면 페이지를 긁어가지 않는다.
follow면 그 페이지에 있는 모든 링크를 찾아가서 링크된 문서도 긁어 가고, nofollow면 링크를 확인하지 않는다.


물론 메타파일은 <head> </head> 사이에 놓여야 한다!


3. 모든 파일 경로는 상대 경로가 아니라 절대 경로를 사용하자

그림 파일등이 포함되어 있을 경우 꼭 절대 경로를 사용하자!
어떤 경로로 들어올 수 없으니까 당연한 일이다.
예를 들어 http://hmhm.net/not_here/ever/no_idea/just_click 등의 얼토당토안한 경로로 들어올 경우 상대경로로 되어 있을 경우 그림 파일들이 제대로 안보일 것은 당연한 일이다.


4. custom 404 page 파일 크기를 확인하자.(IE 5 이상에서만)

파일 크기가 512 bytes 이상되어야 한다.(html 파일을 만들면 다행히 왠만하면 512바이트는 넘는다.) 그렇지 않으면, IE 그 기분나쁜 기본 페이지가 보여지는 엉뚱한 상황이 연출된다.


참고로 다른 에러 메시지의 파일 최소 크기는 아래와 같다.
이 크기보다 작으면 IE 기본 페이지가 보여지게 된다.

Custom error page 의 각 크기 기준치
Code Description     File Size
400 Bad Request > 512 bytes
403 Forbidden > 256 bytes
404 Not Found > 512 bytes
405 Method Not Allowed > 256 bytes
406 Not Acceptable > 512 bytes
408 Request Time-out > 512 bytes
409 Conflict > 512 bytes
410 Gone > 256 bytes
500 Internal Server Error > 512 bytes
501 Not Implemented > 512 bytes
505 HTTP Version Not Supported > 512 bytes


5. 또 다른 IE 기본 에러 페이지가 나오는 경우(IE 5 이상에서만)

완전한 HTML 페이지가 아닐 경우

<BODY>로 시작해서 </BODY>로 확실하게 끝나지 않았거나
<HTML>로 시작해서 </HTML>로 확실하게 끝나지 않았을 경우.

또는 PHP의 exit 명령으로 종료할때 </BODY></HTML>가 출력되지 않을때

지금 나도 티스토리에 세들어 사는 입장이라 멋진 404 페이지는 만들 수 없지만 파란에서 무료 웹호스팅을 하고 있으니 한번 참고해 보기 바란다.


ⓒ 무단 복사/스크랩 금지, 링크 환영 (저작권 공지)
http://hmhm.net/trackback/223
  1. 404 Error Page

    FROM PAPERon.Net - 페이퍼온넷 2007/10/03 01:02  삭제

    최근 일주일 동안 찍은 사진들을 컴퓨터에 불러보았습니다. 이번 주에 포스팅 할 꺼리들이 많이 보여지네요. 설 연휴, 가족들, 오랜만에 만난 친구들, 그리고 의정부 회룡역에서 사라질 서점 등등이 이번 주에 작성될 포스팅 내용이 될 것 같습니다. 하지만 오늘 이 포스팅은 404 Error 페이지에 관해서 작성하려고 합니다. 설 연휴동안 고향을 방문하고 친구들을 만난 일도, 간만에 찾아간 제 자리였던 것 같습니다. 그리고 의정부 회룡역에서 사..

  2. 재밌는 404 페이지

    FROM lunamoth 4th 2007/10/03 01:45  삭제

    404 error, 즉 "페이지를 찾을 수 없습니다" 에러 메시지는 서핑중에 가장 자주 보게 되는 응답 코드일 것입니다. 브라우저의 기본 에러 메시지를 사이트마다 커스터마이징해서 쓰기도 하거니와 이러한 404 페이지만 모아놓은 사이트도 있을 정도고요. 404 페이지가 담고 있어야 될 내용들도 참고해볼만 합니다. crizin님의 다국어 버전도 유용할것 같고, 사운드 효과도 그럴듯 했지만 지금까지 본 404 페이지중에 가장 압권은 벽돌깨기(Arkano...

YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST
  1. BlogIcon 바이웅 2007/10/04 01:41  댓글주소  수정/삭제  댓글쓰기

    에러페이지 처리에 관한 좋은 정보 잘보았습니당~ o(^o ^)o

  2. BlogIcon j4blog 2007/10/04 15:29  댓글주소  수정/삭제  댓글쓰기

    404라는 숫자만 봐도 기분이 나빠지죠. 게다가 그 수많은 코드들을 자유롭게 다루시는 너른호수님이 신기하게만 보입니다. 저는 바로 좌절입니다.
    글 재미있게...아니 진심은 하나도 모르지만 -_- 그냥 읽었습니다.

    • BlogIcon 너른호수 2007/10/05 01:12  댓글주소  수정/삭제

      될 수 있는대로 쉽게 쉽게 쓸려고 노력을 많이 했는데 그렇게 되지 않았나 보네요. ㅜ.ㅜ

      댓글은 정말 감사합니다. ^^

  3. 임재선 2007/10/24 23:10  댓글주소  수정/삭제  댓글쓰기

    정말 좋은 정보 많으시네요.. 내일도 또 들러서 책읽듯이 하루에 몇개씩 보고갈께요..감사합니다..

    • BlogIcon 너른호수 2007/10/25 00:20  댓글주소  수정/삭제

      감사합니다.
      너무나 바빠서 요즘 통 글을 못쓰고 있는데 재선님의 글에서 다시 한번 써보자라는 생각이 다시 듭니다.

      감사합니다.