WordPress page title in browser tab

[워드프레스] 브라우저 탭에 표시되는 사이트/페이지 타이틀 변경하기

워드프레스에서는 SEO에 유리하게 각 글/페이지마다 타이틀이 사이트 타이틀과 함께 브라우저 탭에 표시됩니다. 예를 들어, 설정에 따라 조금씩 다르지만 다음과 같은 형식으로 표시될 수 있습니다.

포스트 제목 - 사이트 타이틀

간혹 이렇게 표시되는 대신 모든 사이트(개별 글/페이지 포함)에서 사이트 타이틀만 표시되도록 원한다든지 하는 식으로 브라우저 탭에 표시되는 타이틀을 변경하기를 원할 수도 있습니다. 개인적으로는 SEO(검색엔진 최적화)를 위해 기본 설정을 권장하지만요…

그럴 경우 다음과 같은 코드를 테마의 함수 파일에 추가해보도록 합니다.

function wpdocs_filter_wp_title( $title, $sep ) {

$title = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
$title = "$title $sep $site_description";
return $title;
}
add_filter( 'wp_title', 'wpdocs_filter_wp_title', 10, 2 );

원하는 경우 사이트 타이틀과 사이트 부제목(설명) 사이의 분리 기호를 변경하는 것도 가능할 것입니다. 가령 다음과 같은 라인을 추가할 수 있을 것입니다.

$sep = "|";

위의 필터를 적용하면 사이트의 모든 페이지에 대하여 브라우저 탭에 “사이트 타이틀 | 사이트 설명” 형식으로 타이틀이 표시됩니다.

보다 정교하게 조정하려면 WordPress 개발자 사이트wp_title 필터에 대한 내용을 확인해보시기 바랍니다.

위와 같은 훅을 적용해도 브라우저 탭에 표시되는 제목이 변경되지 않을 수 있습니다. 그럴 경우 우선 캐시를 삭제해보고 테스트해보시기 바랍니다. 그래도 안 되는 경우가 있는데, 그 이유는 테마 제작자가 타이틀 부분의 코드를 임의로 변경했기 때문입니다. 가령 header.php 파일에 다음과 비슷한 형식으로 타이틀이 추가됩니다.

<title><?php wp_title('|', true, 'right'); ?></title>

위와 같은 형식으로 되어 있다면 위의 필터가 제대로 작동합니다. 하지만 그렇지 않을 경우 제대로 작동하지 않을 수 있습니다. 그럴 경우 header.php 파일에서 직접 소스를 수정해도 됩니다. 또는, 테마 제작자가 수정한 wp_title 부분을 <title><?php wp_title(‘|’, true, ‘right’); ?></title>로 바꾸고 위에 제시된 형식으로 후크(필터)를 적용해도 됩니다. wp_title 함수에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

또, 간혹 테마 제작자가 직접 타이틀 관련 함수를 만들어 추가하는 경우도 있습니다. 이 경우에는 헤더 부분에 <title><?php wp_title(‘|’, true, ‘right’); ?></title> 코드를 삽입(또는 테마 제작자가 추가한 함수 부분을 대체)하고 필터를 함수 파일에 적용하면 원하는 대로 작동할 것입니다.

참고로 헤더 파일에 직접 타이틀 코드를 추가하려면 다음과 비슷한 형식으로 기존의 타이틀 코드를 대체하면 됩니다.

<title><?php echo get_bloginfo( 'name' ) . ' : ' . get_bloginfo( 'description' ); ?></title>

그러면 맨 위에 제시된 후크와 동일한 효과를 얻을 수 있습니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.