사용자 정의 404 페이지

방문자가 존재하지 않는 주소로 접속하면 웹 서버는 해당 페이지를 찾을 수 없다는 뜻의 404 Not Found 응답을 보냅니다.

주소를 잘못 입력하거나, 페이지가 삭제 또는 이동되었거나, 오래된 링크를 통해 접속했을 때 404 페이지가 표시될 수 있습니다.

에스페이지에서는 페이지가 없을 때 기본적으로 다음과 같은 404 페이지가 표시됩니다.

/public 폴더에 +404.essepage 파일을 만들면 기본 페이지 대신 원하는 내용과 디자인의 404 페이지를 표시할 수 있습니다.

404 페이지 만들기

404 페이지는 다음 위치에 만듭니다.

/public/+404.essepage

웹사이트의 파일 구조는 다음과 같은 형태가 됩니다.

/public
├── +page.essepage
├── +404.essepage
├── about
│   └── +page.essepage
└── contact
    └── +page.essepage

404 페이지 컨텐츠 작성하기

/public/+404.essepage 파일에 다음 코드를 작성하세요.

<head>
    <title>Page Not Found</title>
</head>

<main>
    <p>404</p>

    <h1>Page Not Found</h1>

    <p>
        The page you are looking for does not exist
        or may have been moved.
    </p>

    <a href="/">Go to Home</a>
</main>

404라는 숫자만 표시하기보다 방문자가 무엇을 해야 하는지 알 수 있도록 짧은 설명과 이동할 수 있는 링크를 함께 제공하는 것이 좋습니다.

404 페이지 공개하기

404 페이지를 작성했다면 파일을 저장하고 공개합니다.

/public/+404.essepage 파일을 마우스 오른쪽 버튼으로 클릭합니다.
공개(Publish)를 선택합니다.
공개가 완료될 때까지 기다립니다.

이후 파일을 수정할 때는 다른 페이지와 마찬가지로 다음 순서로 작업합니다.

코드를 수정합니다.
파일을 저장합니다.
미리보기에서 결과를 확인합니다.
변경사항 적용(Apply Changes)을 선택합니다.
공개 사이트에서 최종 결과를 확인합니다.

변경사항을 적용한 직후에는 캐시가 갱신되는 데 최대 1분 정도 걸릴 수 있습니다.

404 페이지 확인하기

404 페이지가 제대로 표시되는지 확인하려면 사이트에 존재하지 않는 주소로 접속하세요.

프로젝트 코드가 my-website라면 다음과 같은 주소를 사용할 수 있습니다.

https://espg.dev/my-website/page-does-not-exist

page-does-not-exist라는 페이지가 실제로 존재하지 않는다면 작성한 404 페이지가 표시됩니다.

사용자 정의 도메인을 연결했다면 해당 도메인에서도 같은 방법으로 확인할 수 있습니다.

https://example.com/page-does-not-exist

방문자가 이동할 수 있는 링크 추가하기

404 페이지에서 방문자가 사이트를 계속 이용할 수 있도록 주요 페이지의 링크를 제공할 수 있습니다.

앞에서 작성한 홈페이지 링크를 다음과 같은 내비게이션으로 교체해보세요.

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

404 페이지에는 명확한 안내와 주요 콘텐츠로 이동하는 링크를 제공하는 것이 좋습니다.

자세한 권장 사항은 Google Search Central의 404 오류 안내를 참고할 수 있습니다.

404 페이지가 표시되지 않을 때

사용자 정의 404 페이지가 표시되지 않는다면 다음 내용을 확인하세요.

파일이 /public 폴더 안에 있는지
파일 이름이 +404.essepage인지
404 페이지 파일을 공개했는지
수정한 뒤 변경사항 적용(Apply Changes)을 했는지
테스트한 주소와 연결된 페이지가 실제로 존재하지 않는지
테스트한 주소가 파라미터 폴더의 경로와 일치하지 않는지
캐시가 갱신될 때까지 기다린 뒤 새로고침했는지

다음 단계

사용자 정의 404 페이지를 만들었다면 다음 문서로 넘어가세요.

여러 페이지에서 공통 구조 사용하기: 레이아웃
홈페이지와 주요 페이지 연결하기: 내비게이션과 링크
URL의 일부를 값으로 받는 방법: 파라미터 폴더
파일 이름의 자세한 규칙 확인하기: 파일 이름 규칙
공개된 사이트의 변경사항 관리하기: 공개, 적용과 전체 적용

언어

목차

Title