워드프레스 404 페이지 템플릿 만들기(SEO 개선)

워드프레스에서 없는 페이지를 요청할 경우 404.php 파일을 로드하여 표시됩니다. 방문자들이 없는 페이지를 요청할 경우에 표시되는 404 페이지를 잘 활용하면 방문자 이탈을 줄여서 SEO(검색엔진최적화)를 개선할 수 있습니다. 이 글에서는 워드프레스 404 페이지 템플릿을 만드는 방법에 대하여 살펴보겠습니다.

[ 이 글을 2022년 2월 28일에 최종 업데이트되었습니다. ]

워드프레스 404 페이지 템플릿 만들기

404 페이지 없음 오류 페이지

가령 베스트셀링 워드프레스 테마인 아바다(Avada)의 경우 404 오류가 발생할 경우 다음과 비슷한 페이지가 표시될 수 있습니다.

워드프레스 아바다 테마 404 페이지 오류
Avada 테마의 404 Not Found 페이지

하지만 다음과 같이 별 도움이 되지 않는 404 페이지도 있습니다.

워드프레스 404 페이지 없음 오류 페이지

워드프레스 알림판에서 404 페이지 템플릿 만들기(아바다, 뉴스페이퍼, Divi, 엘리멘터 등)

아바다, Divi, 뉴스페이퍼 등 일부 테마와 엘리멘터 페이지 빌더를 사용하는 경우에는 워드프레스 알림판에서 404 페이지를 커스텀할 수 있습니다.

Avada 테마에서는 레이아웃 빌더를 사용하여 사이트의 각 요소를 커스텀할 수 있고, 뉴스페이퍼 테마도 클라우드 라이브러리로 사이트의 모든 섹션을 커스텀하는 것이 가능합니다. Newspaper 테마에서는 현재 91개의 404 페이지 템플릿을 제공하고 있습니다(템플릿은 계속 추가됨). 마음에 드는 템플릿을 로드하고 적절히 수정할 수 있습니다.

Divi 테마를 사용하는 경우 Theme Builder에서 직접 404 에러 템플릿을 만들거나, Elegant Themes 블로그에서 무료로 공개하는 404 페이지 템플릿을 다운로드하여 활용할 수 있습니다(예: "Get a FREE 404 Page Template for Divi’s Consultant Layout Pack"(Divi의 컨설턴트 레이아웃 팩용 무료 404 페이지 템플릿 다운로드)).

또한, 엘리멘터 프로에서는 테마 빌더(Theme Builder)를 사용하여 사이트의 각 파트를 커스텀할 수 있습니다. Elementor에서도 Error 404 템플릿을 로드하여 적절히 변경할 수 있습니다. 현재 약 25개 내외의 Error 404 페이지 템플릿이 제공되며, 템플릿은 지속적으로 추가되고 있습니다.

엘리멘터 페이지 빌더에서 제공하는 404 에러 페이지 템플릿

자세한 내용은 다음 글을 참고해보세요.

404.php 파일 편집하기

사용 중인 테마의 404 페이지가 마음에 들지 않거나 제대로 작동하지 않는 경우 404.php 파일을 직접 수정하거나 만들 수 있습니다.

먼저 차일드 테마를 만든 후에 작업하시기 바랍니다. 테마 내의 404.php 파일을 차일드 테마 폴더로 복사한 후에 수정하거나 새롭게 하나 만들어도 됩니다(차일드 테마를 만드는 방법은 여기를 참고하세요).

404 페이지를 만드는 방법은 WordPress Codex 페이지("Creating an Error 404 Page")에 설명되어 있습니다. Codex 페이지의 소스를 가지고 적절히 수정해도 좋을 듯 합니다.

다음과 같은 코드를 사용하여 최근 글 목록을 보여주도록 하는 것도 괜찮을 것 같습니다.

<ul>
<?php $the_query = new WP_Query( 'posts_per_page=5' ); ?>

<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>

<?php
endwhile;
wp_reset_postdata();
?>
</ul>

최근 글을 표시하는 플러그인을 사용하고 있고 해당 플러그인에서 숏코드를 지원하는 경우에는 숏코드를 추가하면 더 좋은 결과를 얻을 수 있을 것입니다. 예를 들어, Display Posts Shortcode 플러그인을 설치하고 다음과 같은 형식으로 숏코드를 추가하면 됩니다(WordPress Codex 문서 참고).

echo do_shortcode( ' [display-posts posts_per_page="5" image_size="thumbnail" include_excerpt="true"] ' );

상황에 맞는 그림을 추가하는 것도 좋은 방법입니다. CSS-Tricks는 404 오류가 발생할 경우 다음과 같은 그림을 표시하고 있습니다.

CSS Tricks 404 페이지 템플릿
CSS Tricks의 404 Not Found 페이지

이 블로그에서는 현재 GeneratePress 테마 내의 404.php 파일을 수정하여 404 페이지를 표시하고 있습니다. "요청하신 페이지를 찾을 수 없습니다" 문구 아래에 검색 상자를 추가했고, 그 아래에 최신 글 목록과 인기글 목록을 표시했습니다.

404 페이지 오류 템플릿

GeneratePress 테마를 사용하는 사용자들을 위해 이 블로그에서와 같이 404 오류 페이지를 만드는 방법을 추후에 별도의 글에서 정리해보겠습니다.

플러그인을 사용하여 404 오류 페이지 수정하기

HTML 코드에 익숙하지 않는 경우 404 페이지를 수정(커스터마이징)할 수 있는 플러그인을 사용할 수도 있습니다.

워드프레스 404 페이지 플러그인

404page 플러그인을 사용하여 404 에러 페이지를 보다 수월하게 커스터마이징할 수 있습니다.

참고:


4개 댓글

  1. 안녕하세요. 늘 많은 도움받고 가는 독자입니다. 혹시 예시로 보여주신 GeneratePress 404페이지 최신글, 인기글 노출 버전 방법 소개글 작성을 부탁드려도 될까요?

    1. 404 페이지의 경우 다음 글을 참고해 보세요:

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-404-%ED%8E%98%EC%9D%B4%EC%A7%80-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%A7%8C%EB%93%A4%EA%B8%B0/

      최신 글 세팅은 GeneratePress 세팅을 참고해보세요:

      https://avada.tistory.com/2299

      인기 글 페이지는 별도로 없습니다. 대부분의 테마에서 인기글 페이지는 제공되지 않습니다.
      인기 글 페이지나 요소를 만들려면, 페이지 뷰를 체크하는 코드를 추가하거나 플러그인을 사용하고, 페이지 뷰가 많은 글을 인기 글로 인식하여 페이지 뷰 순으로 나열하는 코드를 만들어야 할 것입니다.
      이런 기능을 하는 플러그인을 찾아보면 있을 것 같습니다.

      다른 방법으로 댓글이 많은 글을 인기 글로 정의하고, 댓글이 많이 달린 글순으로 나열하는 것도 가능할 것입니다. 방법은 다음 글을 참고해보세요:

      https://avada.tistory.com/2544

    1. 블로그를 방문해주셔서 감사합니다.404 페이지를 잘 활용하면 이탈률을 줄여서 SEO에 긍정적으로 작용할 수 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.