분야별 주요 소식과 생활 정보를 전합니다
NCB뉴스
마케팅·창업

네이버 검색 제목이 공유 카드와 다르게 보이는 이유

네이버 웹 검색은 문서 제목과 오픈그래프, 본문 등을 분석하고, 카카오톡 링크 카드는 오픈그래프 정보를 활용한다. 실제 태그 차이와 화면별 점검 순서를 정리했다.

화면에 표시된 HTML과 자바스크립트 소스 코드의 근접 사진
화면에 표시된 웹페이지 소스 코드. 사진 Martin Vorel · Wikimedia Commons · CC BY-SA 4.0 · 크롭과 형식 조정 · 출처 · 이용 조건

네이버 웹 검색의 제목과 카카오톡 링크 카드의 제목은 같은 주소에서도 다를 수 있다. 네이버는 문서 제목과 오픈그래프, 페이지 내용 등을 분석해 표시할 문구를 고른다. 카카오톡에 URL을 붙여넣었을 때 나오는 스크랩 미리보기는 그 주소의 오픈그래프 정보를 이용한다. 어느 화면에서만 문구가 다르게 보이는지부터 보면 수정할 위치를 좁힐 수 있다.

1. 같은 페이지에도 제목 태그가 두 곳에 있다

브라우저 탭의 제목은 HTML의 <title>에서 읽는다. 공유용 제목은 보통 og:title에 들어간다. 설명도 별개다. name="description"은 페이지 요약을, og:description은 공유에 쓸 요약을 담는다. 카드에 표시될 이미지의 주소는 og:image로 지정할 수 있다. 오픈그래프 표준 문서

실제 공개된 워드프레스 공식 문서 ‘Settings General screen’의 HTML을 보면 <title>에는 문서 제목 뒤에 문서 섹션과 사이트 이름이 붙어 있다. og:title에는 짧은 문서 제목만 들어 있다. 아래 화면은 두 태그에서 확인한 값을 나란히 정리한 것이다. 검색 결과와 공유 카드에서 어느 제목이 선택되는지는 서비스마다 따로 확인해야 한다. 워드프레스 공식 문서

워드프레스 공식 문서의 실제 HTML에서 title에는 문서 섹션과 사이트명이 붙고 og:title에는 Settings General screen만 들어 있는 비교
워드프레스 공식 문서의 공개 HTML에서 제목 태그 두 가지를 발췌. 정리 NCB뉴스 · WordPress Documentation · CC0 1.0 · 출처 · 이용 조건

2. 네이버 웹 검색은 태그와 본문을 함께 본다

네이버 서치어드바이저에 따르면 기본 제목·설명과 오픈그래프 값이 다르면 색인 과정에서 검색에 적합하다고 판단한 값을 고른다. 여러 문서에 같은 제목이 반복되거나 제목만으로 내용을 파악하기 어려울 때는 본문이나 다른 페이지에서 이 문서를 가리키는 링크 문구를 참고하기도 한다.

검색 결과의 설명문도 검색어와 의도에 맞춰 달라질 수 있다. 예를 들어 환불 안내에 기한과 수수료가 각각 적혀 있다면, ‘환불 기한’으로 검색할 때는 기한을 설명한 문장, ‘환불 수수료’로 검색할 때는 수수료를 설명한 문장이 선택될 수 있다. 페이지 설명을 적을 때는 해당 문서의 핵심을 한두 문장으로 요약하고, 본문에서도 독자가 찾을 답을 알아보기 쉽게 적는 편이 좋다. 네이버 검색 제목·설명 갱신 안내 · 네이버 콘텐츠 마크업 가이드

3. 편집기에서 저장한 값과 공개 HTML을 대조한다

검색 결과에 연결된 URL과 공유한 URL을 각각 브라우저에서 열어 주소창에 남는 최종 주소를 비교한다. 하나가 예전 주소나 다른 버전의 페이지로 이어진다면 화면의 제목을 비교하기 전에 주소부터 맞춘다. 중복 주소가 있는 사이트라면 실제로 대표 주소로 이동하는지, HTML의 rel="canonical"이 운영자가 의도한 주소를 가리키는지도 살핀다. 네이버 선호 URL 안내

이어서 공개 페이지의 ‘페이지 소스 보기’를 열고 <title>, name="description", og:title, og:description, og:image를 검색한다. 값이 비어 있거나 같은 태그가 두 번 이상 나오면서 내용이 다르면 테마와 SEO 플러그인이 각각 태그를 만드는지 확인한다. 편집기에 최신 문구가 있는데 공개 HTML에 이전 값이 남아 있다면, 그 글의 공개 페이지가 새로 생성됐는지와 사이트 캐시를 먼저 점검할 차례다.

최종 주소와 공개 HTML을 먼저 대조하고, 검색만 예전 문구면 문서 제목과 수집을, 카카오톡만 예전 문구면 오픈그래프 캐시를 확인하는 흐름
검색 결과와 카카오톡 카드가 다를 때의 점검 순서. 도표 NCB뉴스 · 자료 네이버 서치어드바이저, 카카오디벨로퍼스 · 출처

4. 수정한 뒤에도 한쪽만 옛 정보가 남는다면

공개 HTML이 최신인데 네이버 검색 결과만 예전 문구라면 검색로봇의 다음 수집과 분석이 남았을 수 있다. 수집 이후에도 문구가 다르면 문서별 제목이 구체적인지, 사이트 여러 페이지가 동일한 설명을 쓰는지 살펴본다. 검색 썸네일도 자동 선택된다. 네이버는 og:image를 활용할 수 있지만, 사이트 전체에서 반복되는 로고나 홍보 배너는 개별 문서의 대표 이미지로 채택하지 않을 수 있다.

네이버의 검색 이미지 안내는 가로·세로 모두 150픽셀 초과, 5,000바이트 이상, 가로와 세로의 비율 3:1 이하를 권장한다. 이 수치를 충족한 고유 이미지도 검색엔진이 문서를 분석한 결과에 따라 표시 여부가 달라진다. 이미지는 웹 문서와 별도로 수집되므로 제목과 이미지의 갱신 시점도 다를 수 있다. 네이버 이미지·제목 권장 사항

반대로 카카오톡에 주소를 붙여넣을 때만 옛 문구가 나오면 카카오디벨로퍼스의 ‘카카오톡 URL 메타정보 관리’에서 해당 URL의 정보를 조회한다. 공개 소스의 OG 값은 새것인데 도구에 옛 값이 남아 있다면 그 URL의 캐시를 초기화한 뒤 미리보기를 다시 연다. 이미지가 빠졌다면 og:image의 주소가 로그인 없이 열리는지도 확인한다. 카카오톡 URL 메타정보 관리 안내