트위터 공유 시 한글이 포함된 URL이 제대로 링크가 되지 않는 경우

트위터 공유 시 한글이 포함된 URL의 링크가 제대로 작동하지 않는 경우

이 글에서 플러그인을 사용하지 않고 워드프레스에서 트위터, 페이스북, 네이버 블로그 등 소셜 공유 아이콘을 추가하는 방법이 소개되어 있습니다.

하지만 보통 트위터 공유의 경우 URL 주소에 한글 문자가 포함되어 있으면 영문까지만 링크가 되고 한글 부분은 링크가 되지 않는 문제가 발생하는 것을 알게 되었습니다. 외국에서 만든 플러그인을 사용하는 경우에도 마찬가지 문제가 발생할 것 같습니다.

예를 들어, URL에 한글이 포함된 글을 트위터에 공유해보면 다음 그림과 비슷하게 공유됩니다:

워드프레스 트위터 공유

그림과 같이 영문으로 된 URL 부분만 링크가 되고 한글 부분부터는 링크가 되지 않습니다. 이 경우에 링크를 클릭하면 thewordcracker.com/miscellaneous/로 연결됩니다. 이 문제를 해결하려면 urlencode 함수를 사용하여 주소를 인코딩해주면 됩니다. (혹은 한글을 URL에 포함되지 않도록 고유주소를 설정하는 방법도 가능하겠지만 그럴 경우 고유주소가 변경되므로 바람직하지 않습니다.)

가령 "플러그인을 사용하지 않고 소셜 공유 버튼/네이버 블로그 공유 버튼을 추가하는 방법"에 소개된 방법을 사용하는 경우 트위터 부분을 다음과 같이 수정하면 됩니다:

$twittersubURL = urlencode($crunchifyURL);
$twitterURL = 'https://twitter.com/intent/tweet?text='.$crunchifyTitle.'&url='.$twittersubURL.'&via=XXXXXXXXXX; // XXXXXXXXXX 부분은 트위터 ID로 대체

이제 한글 문자가 포함된 글을 공유하면 공유된 글에서 링크가 제대로 작동합니다.

참고: 이 방법을 사용할 경우 트위터 게시물에서 링크 URL 내의 한글이 깨져 보입니다. 즉, 링크는 제대로 작동하지만 한글이 깨져보이는 단점이 있고, 이 방법을 사용하지 않으면 한글 부분은 제대로 보이나 링크는 제대로 되지 않는 문제가 있습니다. 어느 것이 더 좋을지를 판단해서 선택해야 할 것 같습니다. 한글도 제대로 표시되고 링크도 표시되는 방법이 있다면 가장 좋을 듯 하지만 현재로서는 방법을 찾기가 쉽지 않네요.

추가: 한글 등 비영문이 URL에 들어갔을 때 트위터에서 링크가 제대로 작동 혹은 표시되지 않는 경우 urldecode( get_permalink() )를 사용해보면 성공할 수도 있습니다. 저는 이 방법도 잘 안 되어 그냥 기본 고유주소 형식(.../?p=post_ID)으로 트윗하도록 수정했습니다.

워드프레스 트위터 공유 링크 형식어차피 제목이 한글로 되어 있으니 이 방법도 괜찮은 것 같습니다. 이 경우 $twittersubURL 부분을 다음과 같이 수정해주면 잘 작동할 것입니다.

$domain = get_site_url();
$id = get_the_ID();
$twittersubURL  = $domain.'/?p='.$id;

고유주소를 다른 방식으로 지정하고 싶은 경우 이 글을 참고해보시기 바랍니다.


3개 댓글

  1. $domain = get_site_url();
    $id = get_the_ID();
    $twittersubURL = $domain.'/?p='.$id;

    이 코드 있는 위치가 어디죠? 의외로 초보는 이것이 가장 중요합니다.

    1. 안녕하세요, 제임스본드님.

      저는 다음 글에서 소개하는 방법으로 소셜 공유 버튼(페이스북, 트위터, 네이버, 네이버 밴드, 카카오스토리)을 추가하여 사용하고 있습니다.

      https://www.thewordcracker.com/intermediate/%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EC%95%8A%EA%B3%A0-%EC%86%8C%EC%85%9C-%EA%B3%B5%EC%9C%A0-%EB%B2%84%ED%8A%BC-%EC%B6%94%EA%B0%80/

      트위터에 공유하면 다음 그림과 같이 깨져보이는 한글 URL 부분이 ...으로 표시되도록 (혹은 한글 URL 중 일부만 깨져보이도록 표시되고 뒷부분은 말줄임표로 표시될 것 같습니다) 굳이 이 글에서 소개하는 방법을 사용하지 않아도 될 것 같습니다.

      다음 스크린샷을 참고해보세요.

      https://www.screencast.com/t/jsaBsuLyW1
      https://www.screencast.com/t/jsaBsuLyW1

댓글 남기기

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