베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

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

Last Updated: 2022년 2월 28일 | 2개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스에서 없는 페이지를 요청할 경우 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 에러 페이지를 보다 수월하게 커스터마이징할 수 있습니다.

참고:



2 개 댓글

Leave a Comment