[태그:] 워드프레스

SNS 공유가 안 될 때, 겪는 그 답답함 정확히 압니다

블로그에 정성스럽게 글을 썼는데 링크를 카카오톡에 붙여넣으려니 썸네일이 안 뜨는 경험, 다들 한 번쯤 있을 겁니다. 텍스트만 덩그러니 뜨거나, 아예 잘못된 로고 이미지가 나와서 당황했죠. 워드프레스 블로그를 운영하면서 가장 자주 겪는 이 ‘워드프레스 OG 태그 오류’는 단순히 보기 싫은 문제를 넘어서 방문자 30%를 그냥 날려버리는 결과로 이어집니다. 링크를 클릭할지 말지는 0.5초 안에 결정되는데, 그때 보여주는 ‘얼굴’이 없다면 아무리 좋은 글도 무용지물이니까요. 저도 처음 자동화 블로그를 만들었을 때 이 문제 때문에 며칠을 밤새 디버깅했던 기억이 납니다. 설정이 꼬여서 카카오톡 링크 미리보기가 안 뜨면 트래픽이 반토막 나는 건 당연한 일이죠.

왜 내 글만 썸네일이 안 뜰까요?

대부분은 워드프레스 기본 설정에는 메타 태그가 비어 있기 때문입니다. 페이스북이나 카카오 같은 플랫폼은 ‘og:image’나 ‘og:title’ 같은 정보를 페이지 소스에서 찾는데, 이것이 없으면 그냥 아무 이미지나 가져오거나 아예 비워버립니다. 글을 쓸 때마다 수동으로 입력할 수도 있지만, 그건 1인 빌더가 할 수 있는 노동이 아닙니다. 매일 수십 개의 글이 발행되는 제 블로그 시스템에서 일일이 썸네일을 등록하는 건 불가능했고, 결국 이 과정을 자동화하지 못하면 블로그 방문자 유입 감소는 피할 수 없는 구조적인 문제였습니다.

방문자 30%를 날리는 잘못된 메타 태그의 대가

제가 운영하는 사이트들의 로그를 분석해보면, SNS 유입 비중은 생각보다 큽니다. 다만 메타 데이터가 없으면 클릭률(CTR)이 급격히 떨어지는데, 이는 사람들의 시선이 이미지로 먼저 가기 때문입니다. 소셜 미디어에서 글이 떠도 클릭을 안 시키면 그건 죽은 길거나 다름없습니다. ‘블로그 방문자 유입 감소 원인’을 찾다가 제일 먼저 점검해봐야 할 게 바로 이 부분입니다. 썸네일 하나 때문에 트래픽을 반으로 줄이는 건 너무나 억울한 손해니까요.

OG 태그가 단순 정보가 아닌 ‘클릭 유도’ 장치인 이유

OG(Open Graph) 태그는 단순히 페이지 정보를 적어두는 기술 명세가 아닙니다. SNS에서 내 글을 보여주는 ‘간판’ 역할을 합니다. 제가 만드는 콘텐츠 자동화 파이프라인에서는 AI가 글을 쓰고, 또 다른 AI가 이 OG 태그를 세팅합니다. 제목을 잘 써도 썸네일이 없으면 클릭이 안 됩니다. 반대로, 제목이 평범해도 썸네일이 매력적이면 클릭이 됩니다. 말하자면 OG 태그는 정보 전달을 넘어 쓸 만한 클릭 유도 장치(Copywriting)가 되어줘야 합니다. 그래서 저는 이걸 단순한 세팅이 아니라 ‘제품의 퍼블리싱’ 과정의 핵심으로 봅니다.

OG 태그가 왜 중요하고 구체적으로 어떤 역할을 하나요?

페이스북, 트위터, 링크드인 같은 해외 플랫폼은 대체로 Open Graph Protocol을 표준으로 따릅니다. 다만 문제는 국내입니다. 네이버 블로그나 카카오톡은 조금 다른 방식을 쓰기도 하고, 스크래핑 타이밍이 다릅니다. ‘SNS 클릭률 높이는 법’의 가장 기초는 이 태그를 제대로 심는 것입니다. 예를 들어, 제가 매일 크론으로 돌리는 유튜브 쇼츠 링크를 카카오톡에 공유할 때도 이 태그가 없으면 그냥 검은 화면만 뜹니다. 이건 자동화 시스템의 신뢰도와도 직결됩니다. 태그 하나가 시스템의 완성도를 결정하니까요.

네이버와 카카오톡이 읽어들이는 메타 데이터의 차이

해외 플랫폼과 달리 한국형 메신저는 캐시가 더 강력하게 작동합니다. 네이버는 ‘twitter:card’나 ‘og:title’을 우선순위로 읽지만, 카카오톡은 가끔 맨 처음 이미지를 무작위로 가져오기도 합니다. 이게 가장 골치 아픈 부분입니다. ‘메타 태그 중요성’을 아무리 강조해도, 각 플랫폼마다 읽는 스펙이 다르니까요. 그래서 저는 모든 스펙을 커버하는 ‘호환성 높은 코드’를 짤 수밖에 없었습니다. 어디에 링크를 걸든 제 의도한 썸네일이 뜨게 만드는 게 진짜 자동화니까요.

가장 쉬운 방법 vs 가장 가벼운 방법: 선택의 기준

워드프레스에서 이걸 해결하려는 ‘가장 쉬운 방법’은 유명한 SEO 플러그인을 깔는 겁니다. Rank Math나 Yoast SEO 같은 플러그인은 잘 만들어졌습니다. 다만 저는 이걸 쓰지 않습니다. SaaS를 10개가량 운영하면서 겪었지만, 플러그인이 하나씩 늘어날 때마다 사이트 속도는 기하급수적으로 느려지거든요. DB 쿼리도 늘고, 충돌도 납니다. ‘플러그인 없이 워드프레스 속도 높이기’를 원하는 1인 창업자 입장에서, 이건 무거운 대가를 치르는 선택입니다.

워드프레스에서 이걸 자동으로 설정해주는 가장 쉬운 방법은 무엇인가요?

물론 플러그인이 편합니다. 설정 화면에서 토글 하나만 켜면 알아서 다 해주니까요. 다만 그 ‘편리함’ 뒤에는 숨겨진 비용이 따릅니다. 제가 처음에는 ‘워드프레스 og 태그 플러그인 추천’을 검색해서 유명한 걸 다 깔았습니다. 다만 나중에 서버 모니터링을 해보니, 페이지 로드할 때 플러그인이 불러오는 CSS랑 JS 파일이 수백 줄이었습니다. 글 하나 읽는데 그 무거운 짐을 짊어지고 오는 격입니다.

무거운 플러그인 없이 가볍게 적용하는 방법이 있나요?

저는 코드를 직접 수정합니다. `functions.php`에 후킹(Hooking)해서 `wp_head`에 코드를 심는 방식입니다. 다만 `functions.php` 자체가 테마 파일이라 테마를 바꾸면 그대로 사라집니다. 그래서 부모 테마를 직접 건드리지 말고 자식 테마에 넣거나, 디자인과 무관하게 유지돼야 하는 기능이면 커스텀 플러그인으로 빼는 쪽이 맞습니다. 이게 ‘wp_head 후킹 사용법’의 핵심입니다. 테마 업데이트를 해도 코드가 날아가지 않도록 자식 테마(Child Theme)나 간단한 커스텀 플러그인을 하나 만들어서 관리하면 됩니다. 제 경험상, 플러그인을 지우고 이 방식으로 바꾸니 페이지 로딩 속도가 1초 이상 빨라지는 걸 확인했습니다. 속도는 곧 돈이니까요.

자동화 핵심: 썸네일 없어도 지정 이미지가 뜨게 만들기

AI가 글을 쓰는 환경에서 가장 큰 문제는 ‘대표 이미지(Featured Image)’가 없는 경우입니다. AI가 텍스트는 써줘도 이미지는 만들어주지 않거나, 가끔 실수를 할 때가 있거든요. 그때마다 관리자가 들어가서 이미지를 일일이 등록하라면 그건 자동화가 아닙니다. 제 ‘무인 크론’ 시스템이 멈추지 않으려면, 글에 이미지가 없을 때 자동으로 기본 이미지를 띄워주는 ‘폴백(Fallback) 로직’이 필수적입니다.

글마다 일일이 썸네일을 만들지 않고도 공유 이미지를 자동으로 뽑을 수 있나요?

가능합니다. 코드를 짤 때 “이 글에 대표 이미지가 설정되어 있나?” 확인하고, 없다면 “기본 로고 이미지를 가져와”라고 조건문을 걸면 됩니다. 이게 ‘워드프레스 썸네일 자동 생성’의 꽃입니다. 저는 제 브랜드 로고를 기본 이미지로 설정해뒤습니다. 그러면 글에 썸네일을 깜빡한 글이라도 SNS에 공유했을 때 제 브랜드가 찍힌 이미지가 나옵니다. 아무것도 안 뜨는 것보다는 낫죠.

대표 이미지(Featured Image)가 없을 때의 자동 대체 로직

‘없는 이미지 대체 태그’ 로직은 생각보다 단순합니다. `get_the_post_thumbnail_url()` 함수가 비어있으면, 미리 지정해둔 블로그 대표 이미지 URL을 넣어주는 식입니다. 이렇게 하면 이미지가 없는 글이라도 링크 공유 시 정돈된 모습을 유지할 수 있습니다. ‘블로그 대표 이미지 설정’만 제대로 해두면, 나머지는 코드가 알아서 처리해줍니다. 덕분에 저는 주말에 컴퓨터를 켜지 않아도 매일 아침 SNS에 예쁜 썸네일 달린 글이 자동으로 포스팅됩니다.

카카오톡과 슬랙, 미리보기가 깨질 때 점검 리스트

코드를 다 짜고 나서 막상 카카오톡이나 슬랙에 링크를 걸어보면, 여전히 이전의 썸네일이 뜨거나 아예 아무것도 안 뜰 때가 있습니다. 이전 미리보기가 계속 보이면 캐시를 먼저 의심하되, 미리보기가 생성되지 않으면 OG 태그, HTTP 응답, 외부 접근 가능 여부, 방화벽, 이미지 용량과 중복 태그도 함께 확인해야 합니다. 각 플랫폼의 서버가 우리 사이트를 한 번 긁어간(Crawl) 다음, 그 정보를 메모리에 저장해두기 때문입니다. 이건 자동화를 할 때 가장 많이 실수하는 부분이기도 합니다.

카카오톡이나 슬랙 공유 미리보기가 제대로 뜨게 하려면 어떤 설정을 더 확인해야 하나요?

우선 내 코드가 맞는지 확인해야 합니다. 그 다음은 플랫폼의 개발자 도구를 써야 합니다. ‘카카오톡 디버거 사용법’을 검색해서 공식 개발자 사이트에 들어가면, 스크래핑 캐시를 삭제하는 버튼이 있습니다. 여기서 내 URL을 다시 긁어오라고 명령을 내리면 새로운 메타 태그를 읽어옵니다. 슬랙이나 기타 메신저도 비슷합니다. ‘스택 오버플로우 공유 미리보기’가 이상하다면, 그쪽 스크래퍼가 뭔가 긁어가지 못한 게니까 HTML 구조를 다시 점검해야 합니다.

디버깅 툴 사용법과 캐시 문제 해결

‘SNS 캐시 삭제 방법’은 중요합니다. 내가 수정을 했는데 안 바뀐다고 코드를 뜯어고치면 삽질만 늘어납니다. 카카오톡 디버거와 페이스북 Sharing Debugger를 북마크해두고, 수정 후에는 한 번씩 들어가서 ‘Scrape Again’을 누르는 습관을 들이세요. 그래야 실제 사용자들에게 바뀐 모습이 보입니다. 저도 자동화 시스템 배포 후에는 꼭 이 과정을 거쳐서 제대로 뜨는지 눈으로 확인합니다.

지금 바로 적용하는 최소한의 자동화 코드

이론은 이제 충분하니, 바로 복사해서 쓸 수 있는 코드를 드리겠습니다. 이 코드는 제가 만든 SaaS 중 하나의 핵심 기능을 아주 가볍게 뜯어낸 버전입니다. 복잡한 기능은 다 뺐고, 오직 카카오톡과 페이스북 등에서 제대로 뜨게 만드는 ‘자동 메타 태그 생성기’ 역할만 합니다. 자식 테마의 `functions.php` 맨 아래, 또는 테마를 바꿔도 유지하고 싶다면 간단한 커스텀 플러그인 파일에 붙여넣으시면 됩니다. 붙여넣기 전에 따옴표가 일반 ASCII 따옴표인지 확인하세요.

function custom_og_tags() {
    if (is_singular()) {
        global $post;
        // 기본 설정값
        $title = get_the_title();
        $url = get_permalink();
        $desc = wp_trim_words(get_the_excerpt(), 30, '...');
        $img = get_the_post_thumbnail_url($post->ID, 'large');
        // 대체 이미지 (썸네일이 없을 경우 사용할 블로그 로고 URL)
        $default_img = 'https://your-site.com/default-image.jpg';
        if (!$img) {
            $img = $default_img;
        }
        echo '' . "\n";
        echo '' . "\n";
        echo '' . "\n";
        echo '' . "\n";
        echo '' . "\n";
        // 트위터 카드 설정
        echo '' . "\n";
    }
}
add_action('wp_head', 'custom_og_tags', 5);

functions.php에 붙여넣고 끝나는 핵심 코드

이 코드의 요는 `get_the_post_thumbnail_url`로 썸네일을 확인하고, 없으면 `$default_img` 변수에 넣은 주소를 사용한다는 점입니다. `your-site.com/default-image.jpg` 부분만 본인의 블로그 로고나 대표 이미지 주소로 바꾸면 됩니다. ‘워드프레스 OG 태그 코드’를 검색해서 다른 걸 가져와도 되지만, 너무 복잡한 건 오히려 에러를 유발합니다. 최소한의 게 가장 빠릅니다.

설정 후 꼭 확인해야 할 3가지

코드를 넣고 난 뒤에는 3가지만 체크하세요. 하나는 소스 보기(`Ctrl+U`)에서 `og:image` 태그가 제대로 생겼는지 확인. 다른 하나는 썸네일이 없는 글에서도 대체 이미지가 나오는지 테스트. 나머지는 카카오톡 디버거로 캐시를 지워서 실제로 잘 뜨는지 확인입니다. 이 3단계만 통과하면 ‘functions.php 코드 추가’ 작업은 끝입니다. 이제 링크 공유할 때 맨날 걱정했던 썸네일 문제는 사라집니다.

마무리: 진짜 자동화를 원한다면

OG 태그 자동화는 1인 블로그 운영자가 무인 자동화로 가기 위한 첫 관문입니다. 이거 하나 해결했다고 끝이 아닙니다. 끝내 콘텐츠의 퀄리티와 검색 노출이 따라줘야 방문자가 계속 늡니다. ‘워드프레스 SEO 자동화’는 메타 태그만으로는 부족하고, 구조화된 데이터와 키워드 최적화가 더 필요합니다. 제가 운영하는 아일리고(AILEEGO)는 이런 반복적인 SEO 작업조차 자동화해서 관리하는 철학을 가지고 있습니다.

물론 지금 드린 코드로도 일반적인 블로그 운영은 충분합니다. 다만 SaaS 레벨의 관리를 원하거나, 아예 키워드 분석부터 메타 데이터 세팅까지 자동으로 처리하고 싶다면 좀 더 체계적인 도구를 볼 필요가 있습니다. 다만 비싼 플러그인을 깔라는 뜻은 아닙니다. 무겁게 이것저것 붙은 것보다, 필요한 기능만 있는 가볍고 특화된 도구를 고르는 편이 낫습니다. 봐야 할 건 내가 콘텐츠에 집중할 수 있도록, 기술적인 잡일은 코드가 처리하게 만드는 겁니다. 그게 진짜 1인 빌더가 가야 할 길 아닐까요?

사례: 이 블로그도 42개 페이지에서 og:title이 통째로 빠져 있었다

남 얘기가 아니다. 이 블로그를 점검하다 모든 페이지에서 og:title·og:description·meta description이 통째로 빠져 있는 것을 발견했다. 42개 페이지 전부였다.

몇 주 동안 아무도 못 알아챈 이유가 있다. OG 태그가 전부 없었던 게 아니라 일부만 없었다. og:url, og:type, og:locale, og:image는 정상적으로 나가고 있었다. 그래서 소스를 대충 훑으면 “OG 있네”로 보인다. 카카오톡 미리보기에 이미지는 뜨는데 제목만 이상하게 나오는 상태였던 것이다.

확인할 때 걸린 함정 두 가지

첫째, 페이지 소스 전체에서 og:title을 검색하면 안 된다. 이 글처럼 OG 태그를 설명하는 글은 본문 코드 예시에 그 문자열이 들어 있어서, 검색에는 걸리는데 정작 <head> 안에는 없는 상황이 생긴다. 반드시 </head> 앞 구간만 잘라내서 <meta> 태그를 전부 나열해 봐야 한다.

둘째, 검사 스크립트에 길이 제한을 걸면 안 된다. content="([^"]{0,70})"처럼 70자 제한을 두면 og:image의 긴 URL이 안 잡혀서 “og:image도 없다”고 잘못 판단하게 된다.

원인은 태그가 아니라 그 앞의 게이트였다

플러그인 설정에서 메타 자동 생성은 켜져 있었다. 그런데 그 설정을 읽기 전에 라이선스 확인 단계가 있었고, 그게 만료돼서 메타를 만드는 함수가 즉시 종료되고 있었다. og:url 같은 항목은 그 확인 단계 바깥에 있어서 계속 출력됐다 — 이게 “일부만 나오는” 증상의 정체다.

더 허탈한 건 그다음이다. 설명 문구 데이터는 이미 다 있었다. 글마다 요약문이 워드프레스 excerpt 필드에 저장돼 있었는데, 플러그인은 자기 전용 필드를 읽고 있었다. 두 시스템이 같은 데이터를 서로 다른 서랍에서 찾고 있었던 것이다. 그래서 복구는 새로 만들 필요 없이 excerpt를 그 필드로 옮겨 담는 것으로 끝났다.

정리하면 점검 순서는 이렇다. ① </head> 앞 구간의 meta 태그 전량 확인 → ② 없는 항목과 있는 항목을 갈라서 “왜 일부만 나오는가”를 묻기 → ③ 플러그인 설정값이 아니라 그 설정을 읽기 전에 걸리는 조건(라이선스·권한·다른 SEO 플러그인 감지)을 확인 → ④ 넣을 데이터가 이미 사이트 어딘가에 있는지 먼저 찾기.