[워드프레스] 브라우저 탭에 표시되는 사이트/페이지 타이틀 변경하기 - 워드프레스 정보꾸러미
베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

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

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

SEO 타이틀을 지정하면 해당 제목이 브라우저 탭 및 검색엔진에 노출
워드프레스에서는 SEO 플러그인을 사용하거나 커스텀 코드로 SEO 제목 지정 가능

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

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

간혹 이렇게 표시되는 대신 모든 사이트(개별 글/페이지 포함)에서 사이트 타이틀만 표시되도록 원한다든지 하는 식으로 브라우저 탭에 표시되는 타이틀을 변경하기를 원할 수도 있습니다.

브라우저 탭에 표시되는 사이트/페이지 타이틀을 변경하는 방법

브라우저 탭에 표시되는 사이트 제목/포스트 제목을 변경하고 싶은 경우 Yoast SEO, All in One SEO, Rank Math와 같은 SEO 플러그인에서 설정할 수 있습니다.

SEO 플러그인을 사용하여 SEO 타이틀 형식 지정하기

SEO 플러그인을 사용하는 경우 전체 페이지와 글에 표시되는 타이틀 형식을 지정할 수 있고(전역 SEO 타이틀), 개별 글에서 달리 수정하는 것도 가능합니다.

Yoast SEO를 사용하는 경우 "구글이나 네이버에 검색되는 사이트의 제목과 설명을 Yoast SEO에서 변경하기"를 참고해보세요.

다음 글도 참고해보세요: "구글이나 네이버에 노출되는 워드프레스 사이트/개별 글의 제목 지정하기"

Rank Math를 사용하는 경우 알림판 > Rank Math > Titles & Meta 섹션에서 홈페이지와 포스트 타입(글과 페이지 등)에 대한 SEO 타이틀을 지정할 수 있습니다.

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

"글" 포스트 타입의 경우 Post Types > 글 섹션에서 Single 글 Title 부분에서 지정이 가능합니다. 가령, 사이트 이름 대신 카테고리명이 표시되도록 하고 싶은 경우에 다음과 같이 변경할 수 있습니다.

%title% %page% %sep% %category%

분리 기호(%sep%)는 Global Meta > Separator Character에서 선택할 수 있습니다.

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

플러그인을 사용하지 않고 브라우저 탭에 노출되는 타이틀 변경하기

플러그인을 사용하지 않는 경우 다음과 같은 코드를 테마의 함수 파일에 추가해보도록 합니다.

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>

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

※ Yoast SEO나 All in One SEO Pack 같은 SEO 플러그인을 사용하면 편리하게 브라우저에 표시되는 타이틀을 지정할 수 있고 네이버, 페이스북 등에 공유할 때 표시되는 썸네일도 지정할 수 있습니다. 다음 글을 참고해보세요.

추가

Twenty Seventeen 테마의 경우 위의 코드를 적용해도 제대로 작동하지 않습니다. 테마 함수를 살펴보니 title-tag가 활성화되어 있는 것을 확인할 수 있었습니다.

add_theme_support( 'title-tag' );

이 경우 다음 코드를 함수 파일에 추가하면 제대로 작동합니다.

add_filter( 'document_title_separator', 'cyb_document_title_separator' );
function cyb_document_title_separator( $sep ) {

$sep = "|";

return $sep;

}
Source: stackexchange

차일드 테마를 만든 후에 작성하시기 바랍니다.

구글에 노출되는 글 제목에 사이트명이나 브랜드명이 추가되는 문제

타이틀에 사이트명이나 브랜드명이 없더라도 구글 검색 결과에서는 제목 뒤에 사이트명이나 브랜드명이 추가될 수 있습니다.

제목이 길면 제목 뒷부분을 생략하고 뒤에 브랜드명이 추가될 수 있습니다. 그러므로 제목을 너무 길게 하면 검색 결과에서 일부가 잘릴 수 있으므로 적당하게(?) 간결하게 제목을 설정하는 것이 SEO에 유리할 것입니다.​

Google is adding the site name to the end of some search queries in the search results, truncated the title in order to display a brand or site name at the end.

​구글이 검색 결과에 일부 검색 쿼리의 끝에 사이트명을 추가하고 있다. 이 때문에 브랜드명이나 사이트 이름을 끝에 표시하기 위해 제목이 잘릴 수 있다.

참고:



27 개 댓글

Leave a Comment

  1. 사진과 글을 쓰는 심플한 블로그를 만들고 싶어서 하다보니

    언제나 막히는 부분이 생기면 이곳에서 많은 도움을 얻어 갑니다.

    감사합니다. 좋은 하루 되십시오!

    응답
    • 안녕하세요.도움이 되셨다니 저도 기쁘네요.

      Yoast SEO나 All in One SEO 같은 SEO 플러그인을 사용하면 쉽게 SEO 타이틀과 og 태그를 설정할 수 있습니다.

      응답
  2. 안녕하세요?

    Yoast SEO나 All in One SEO 같은 플러그인을 사용하면 편리하게 설정이 가능할 것입니다.

    https://www.thewordcracker.com/basic/%EA%B5%AC%EA%B8%80%EC%9D%B4%EB%82%98-%EB%84%A4%EC%9D%B4%EB%B2%84%EC%97%90-%EA%B2%80%EC%83%89%EB%90%98%EB%8A%94-%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%9D%98-%EC%A0%9C%EB%AA%A9-%EB%B3%80%EA%B2%BD/

    응답
      • 혹시 저와 같은 문제로 고민하다가 검색해서 들어오는 분들이 있을까봐 댓글 남깁니다.
        Yoast SEO 플러그인에서 Titles & Metas - Title template: %%sitename%% %%page%% %%sep%% %%sitedesc%% 이걸 수정해버리면 웹브라우저 탭에서 사이트설명(태그라인)이 표시되지 않습니다.
        워드프레스 정보 항상 잘 보고 있습니다. 감사합니다. Word님도 편안한 주말 보내세요.^^

  3. 안녕하세요.

    다름이 아니라 이 페이지 및 링크 페이지를 보고 하이픈(–)을 파이프(|)로 바꾸는 방법을 시도해보고 있는데 다소 이해가 되지 않는 부분이 있어 글을 남기게 되었습니다.

    header.php에 부분이 추가되어있으면 제대로 파이프로 변경되어 작동을 한다는 것으로 이해하였는데, 그러나 그 앞부분의 설명은 그렇지 않다라는 것으로 이해되는데 정확히 어느 부분을 어떻게 바꾸어야 정상적으로 변환이 되는지 알 수 있을까요?

    링크의 경우에는 설명이 다소 부족하여 다소 이해하기 힘드나 소스 코드를 봤을 때, $sep = "|";나 $page, $paged 값이 따로 설정되어야 하는 것 같기도 한데 정확히 어느 php 파일에 무엇을 추가해야하는지도 혹시 알 수 있을까요?

    감사합니다.

    응답
    • 안녕하세요?

      타이틀 부분이 기본적으로 워드프레스에서 제공되는 코드가 그대로 사용되는 경우:
      <title><?php wp_title('|', true, 'right'); ?></title>

      그런 경우에는 위의 필터를 사용하면 쉽게 수정이 가능합니다.
      하지만 많은 테마에서 기본적으로 제공되는 코드 방식을 변경하여 사용할 수 있습니다. 그런 경우 헤더 파일에서 테마에 적용된 타이틀 부분 코드를 기본 코드로 바꾼 후에 필터를 적용하면 제대로 적용될 것입니다.

      응답
      • 답변 감사합니다.

        즉, header.php에 링크 내 코드 및 $sep = "|"; 같은 설정을 기입하지 않고

        만을 넣어도 작동한다는 말씀이시죠?

        감사합니다.

      • header.php에는 title가 기입된 부분이 없어 해당 소스를 추가하였는데, 쿠키를 제거하였음에도 추가가 되지 않는 경우에는 어떻게 해야하는지 혹 알 수 있을까요?

        감사합니다.

      • 테마 소스를 분석해서 title 부분을 대체하시기 바랍니다. 보통은 header.php 파일에 title 태그가 추가되어 있지만, 테마에 따라 다르기 때문에 정확한 답변을 드릴 수가 없습니다.

        가령 Twenty Twelve 테마를 잠깐 살펴보니 header.php 파일에 title 태그가 들어있습니다.

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

      • 한 가지만 더 여쭙겠습니다.

        header.php의 안에 위의 해당 소스를 넣었을 때 제목 표시줄에 홈페이지 주소가 떠버리는데 이 경우에는 어떻게 해결하는지 아시나요.

        감사합니다.