티스토리 블로그 외부 SNS 홍보 시 썸네일과 제목이 안 보일 때 해결 방법

작성자: songgun - 11월 18, 2025

티스토리 블로그를 운영하다 보면 글을 SNS(Threads, 카카오톡, 페이스북 등)에 공유했을 때 제목과 썸네일이 나오지 않고 주소만 길게 표시되는 경우가 있습니다.

이 문제는 단순한 오류가 아니라 메타 정보(OG 태그)가 누락되어 있기 때문입니다. 오늘은 이 문제를 해결하는 구체적인 방법을 단계별로 정리해보겠습니다.

1. 문제가 발생하는 이유

SNS에서 링크를 공유하면 해당 플랫폼은 페이지의 HTML 상단(헤더 영역)에 포함된 메타 정보(meta tag)를 읽어 제목, 설명, 대표 이미지를 표시합니다.

하지만 티스토리 기본 스킨에는 이 정보가 생략되어 있거나, 블로그 설정에 따라 자동으로 삽입되지 않는 경우가 있습니다.

그 결과 SNS는 글의 제목이나 이미지 정보를 인식하지 못하고 단순한 링크만 보여주게 됩니다.

2. 해결 방법 – OG(Open Graph) 메타태그 추가하기

이 문제를 해결하려면 HTML 편집기에서 OG 메타태그(Open Graph Tag)를 수동으로 추가해주어야 합니다.

아래 코드를 블로그의 HTML 편집기 → <head> 태그 안쪽에 붙여 넣으세요. 특히 </head> 바로 위에 넣는 것이 가장 안전합니다.

<!-- OG 메타태그 설정 (SNS 미리보기용) -->
<meta property="og:type" content="article">
<meta property="og:site_name" content="[##_blogger_name_##]">
<meta property="og:title" content="[##_page_title_##]">
<meta property="og:description" content="[##_page_description_##]">
<meta property="og:image" content="[##_og_image_##]">
<meta property="og:url" content="[##_article_rep_link_##]">

이 코드는 각 글의 제목, 설명, 대표 이미지, URL을 자동으로 가져와 SNS 공유 시 썸네일과 제목이 정상적으로 표시되도록 합니다.

3. 코드 삽입 위치 예시

HTML 편집기에서 아래처럼 <head> 부분을 찾아 </head> 위쪽에 붙여 넣으면 됩니다.

<head>
    <meta charset="utf-8">
    <title>[##_page_title_##]</title>

    <!-- OG 메타태그 추가 -->
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="[##_blogger_name_##]">
    <meta property="og:title" content="[##_page_title_##]">
    <meta property="og:description" content="[##_page_description_##]">
    <meta property="og:image" content="[##_og_image_##]">
    <meta property="og:url" content="[##_article_rep_link_##]">
</head>

4. 대표 이미지 설정 확인

각 글의 대표 이미지(글 상단 첫 번째 이미지)는 OG 태그의 og:image 항목으로 자동 반영됩니다.

만약 글의 첫 번째 이미지가 없다면 SNS 미리보기에서도 썸네일이 표시되지 않으므로 모든 글 상단에 대표 이미지를 추가하는 것을 추천합니다.

5. 적용 후 테스트 방법

SNS(Threads, 카카오톡, 트위터 등)에 링크를 공유해봅니다.
제목과 썸네일이 정상적으로 표시되면 설정 완료입니다.
여전히 잘못 표시된다면 Facebook Debugger 도구에서 링크 입력 후 Scrape Again을 눌러 캐시를 초기화하세요.

6. 추가 SEO 최적화 팁

OG 태그는 SNS 미리보기뿐 아니라 검색엔진 최적화(SEO)에도 긍정적인 영향을 줍니다. 가능하다면 아래 메타태그도 함께 추가해보세요.

<!-- SEO 관련 메타태그 -->
<meta name="description" content="[##_page_description_##]">
<link rel="canonical" href="[##_article_rep_link_##]">
<meta name="keywords" content="티스토리, OG태그, 썸네일, SNS미리보기, 블로그홍보">

7. 애드센스 배치 팁 (선택사항)

이 글처럼 정보성 콘텐츠에는 본문 중간·하단에 애드센스를 배치하면 수익 효율이 좋습니다.

예시:

<!-- 중간 광고 -->
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYYYY"
     data-ad-format="auto"
     data-full-width-responsive="true">
</ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

마무리

이제 티스토리 블로그에서 글을 SNS에 공유해도 제목, 설명, 썸네일이 정확하게 표시됩니다.

한 번의 설정만으로 블로그의 공유 노출 품질이 크게 개선되어 더 많은 클릭과 방문을 유도할 수 있습니다. 불로그에도 이렇게 신경쓸게 많아요^^

이 블로그 검색

수익나는삶