오픈그래프 미리보기

링크를 공유하기 전에 페이스북, 링크드인, X, 슬랙에서 어떻게 보일지 확인하세요. 페이지의 <head>를 붙여 넣거나 og:title, og:description, og:site_name을 입력하고 내 기기의 이미지를 넣으면, 1200 × 630 이미지가 카드마다 어떻게 잘리는지 볼 수 있습니다. 아무것도 가져오거나 올리지 않습니다.

사용법

1. 제목, 설명, URL을 입력합니다. 검색 결과 탭은 PC나 모바일 구글 검색 결과를 구글과 같은 픽셀 너비로 잘라서 보여 줍니다.
2. 메타태그 탭은 이 값과 canonical, robots, Open Graph, 트위터 카드, hreflang을 복사할 수 있는 HTML로 만들어 줍니다.
3. SNS 탭은 X, 페이스북, 링크드인, 슬랙의 링크 카드를 보여 줍니다. 페이지의 <head>를 붙여 넣으면 태그를 읽어 오고, 내 이미지를 넣으면 카드에서 확인할 수 있습니다.
4. robots.txt 탭은 프리셋으로 파일을 만들고 크롤러별로 URL을 검사합니다. 사이트맵 탭은 URL 목록을 sitemap.xml로 바꿉니다.

• 구글은 PC에서 제목을 약 600px, 설명을 약 920px에서 자르고 내용을 바꿔 쓰기도 합니다. 미리보기는 참고용이며 그대로 나온다는 보장은 없습니다.
• 네이버는 제목과 설명을 자체 기준으로 표시하지만 og:title, og:description, og:image를 많이 참고합니다. 네이버 서치어드바이저에 사이트를 등록하고 robots.txt에서 네이버 크롤러 Yeti를 막지 않았는지 확인하세요.
• 아무것도 불러오지 않습니다. 페이지에 접속하지 않으므로 로컬이나 테스트 사이트에도 쓸 수 있고, SNS 미리보기 이미지는 직접 넣은 파일만 씁니다.
• robots.txt는 구글 규칙으로 검사합니다. 가장 구체적인 User-agent 그룹이 적용되고 가장 길게 일치하는 경로가 우선하며, 길이가 같으면 Allow가 우선합니다. * 와 $ 와일드카드를 지원합니다.
• 사이트맵 파일 하나에는 URL 50,000개, 50MB까지 넣을 수 있습니다.

제목과 설명은 픽셀로 잽니다

구글은 정해진 글자 수에서 스니펫을 자르지 않습니다. PC에서는 제목을 약 600픽셀, 설명을 약 920픽셀에서 줄입니다. 한글은 영문보다 폭이 넓어서 영어 기준 글자 수보다 훨씬 빨리 잘립니다. 글자 수 세기와 실제 검색 결과가 다른 이유가 이것이며, 이 미리 보기는 같은 글꼴로 글자를 그려 폭을 잽니다.

핵심 키워드는 제목 앞쪽에 두고, 설명에는 검색한 사람의 궁금증에 답하는 내용을 쓰세요. 페이지의 다른 부분이 검색어에 더 맞는다고 판단하면 구글이 제목과 설명을 바꿔 보여 줄 수 있습니다.

중요한 태그

title 태그와 메타 설명이 검색 스니펫이 됩니다. rel=canonical은 중복 페이지 가운데 대표 URL을 알려 주고, meta robots의 noindex는 페이지를 색인에서 빼며, hreflang은 언어별 페이지를 연결합니다. 오픈 그래프 태그(og:title, og:description, og:image)는 페이스북, 링크드인, 슬랙의 링크 카드를 정하고, X는 twitter:card를 읽되 없으면 오픈 그래프를 씁니다. 이미지는 1200 × 630픽셀이면 대부분의 SNS에 맞습니다. 메타 키워드 태그는 구글이 무시합니다.

robots.txt와 사이트맵

robots.txt(RFC 9309)는 수집(크롤링)을 막을 뿐 색인을 막지 않습니다. 차단한 URL도 다른 사이트가 링크하면 검색 결과에 나올 수 있으니 색인을 막으려면 noindex를 쓰세요. 가장 구체적인 User-agent 그룹이 적용되고, 일치하는 규칙 중 가장 긴 것이 우선하며, 길이가 같으면 Allow가 이깁니다. 사이트맵은 수집해 줬으면 하는 URL 목록으로, 파일 하나에 50,000개 URL 또는 50MB까지입니다. 구글은 정확한 lastmod는 쓰지만 priority와 changefreq는 무시합니다.

자주 묻는 질문