파비콘과 카카오톡 링크 미리보기(오픈그래프) 설정하기
Finipix 가이드 · 웹용 이미지 줄이기 · 크기 바꾸기. Finipix 열기
새로 만든 페이지 주소를 단톡방에 붙여 넣었는데 미리보기가 회색 상자에 주소만 덩그러니 나오거나, 지난주 제목과 옛 사진이 그대로 뜨는 경우가 있습니다. 브라우저 탭에는 아무 그림 없는 기본 아이콘이 보입니다. 둘 다 HTML <head> 안의 몇 줄, 즉 파비콘 링크와 오픈그래프(Open Graph) 태그가 정합니다. 페이지 화면에는 드러나지 않아서 링크를 보내기 전까지 잊기 쉬운 부분입니다.
파비콘: 탭에 보이는 작은 아이콘
브라우저는 head에 <link rel="icon">으로 적힌 아이콘을 찾습니다. 지금의 브라우저와 휴대폰을 두루 챙기려면 다음 정도면 됩니다.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
형식별 쓰임새는 이렇습니다.
| 파일 | 크기 | 쓰는 이유 |
|---|---|---|
favicon.ico | 32×32(16×16을 함께 담을 수도 있음) | 원조 파비콘 형식입니다. 예전부터 사이트 맨 위 폴더에 /favicon.ico로 두었고, 링크 태그가 없으면 지금도 많은 브라우저가 이 자리를 찾아봅니다. |
| PNG | 탭용 32×32, 그 밖의 용도엔 192×192 이상 | 현재 쓰이는 브라우저가 모두 지원하고, 어떤 이미지 프로그램에서든 쉽게 만듭니다. |
| SVG | 제한 없음(늘려도 선명) | 파일 하나로 모든 크기에서 선명합니다. Chrome·Edge(80 버전부터)와 Firefox는 지원하지만 Safari는 26 버전에서야 지원을 시작했으니 PNG나 ICO를 함께 두십시오. |
apple-touch-icon.png | 180×180 | 아이폰·아이패드에서 "홈 화면에 추가"를 했을 때 쓰는 아이콘입니다. Apple 문서는 rel="icon"이 아니라 이 이름의 링크를 씁니다. |
파일을 하나만 만든다면 정사각형 180×180 PNG 하나를 만들어 icon과 apple-touch-icon 양쪽에 연결하십시오. 탭에서는 브라우저가 알아서 줄입니다. 디자인은 16픽셀로 줄어도 알아볼 수 있어야 합니다. 글자 한 자나 단순한 기호는 괜찮지만, 작은 글씨가 들어간 로고 전체는 뭉개집니다. 홈 화면 아이콘은 배경을 단색으로 채우는 편이 안전합니다. 투명 PNG는 홈 화면에서 생각과 다르게 보일 수 있습니다.
이미지 편집 프로그램 없이 한 세트를 만들고 싶다면 Finipix의 파비콘 세트 탭을 쓰면 됩니다. 이미지 한 장으로 favicon.ico, 192·512픽셀 PNG, 고른 배경색을 깐 180픽셀 apple-touch-icon을 브라우저 안에서 만들고, 붙여 넣을 링크 태그도 함께 줍니다. 크기 고르기, 디자인 단순화, 확인 방법은 로고 이미지로 파비콘 세트 만들기에 더 자세히 적었습니다.
브라우저는 파비콘을 꽤 오래 기억합니다. 아이콘을 바꿨는데 옛것이 계속 보이면 시크릿 창으로 열어 보거나, 파일 이름을 icon-v2.png처럼 바꾸고 링크도 고치십시오.
링크 미리보기와 오픈그래프 태그
카카오톡, 페이스북, 링크드인, 슬랙, 디스코드 등 대부분의 앱은 링크가 공유되면 그 앱의 서버가 페이지를 직접 읽어 가 오픈그래프 태그를 확인합니다. 오픈그래프 프로토콜(ogp.me)이 정한 <meta property="og:…"> 줄들입니다. 이 태그가 없으면 앱이 <title>과 설명, 처음 눈에 띈 이미지로 짐작해서 만들기 때문에 엉뚱한 미리보기가 나옵니다.
<meta property="og:title" content="성수 봄 팝업스토어"> <meta property="og:description" content="3월 14일부터 30일까지. 한정 상품, 지금 예약을 받습니다."> <meta property="og:image" content="https://www.example.com/images/og-popup.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="봄 디스플레이로 꾸민 매장 앞모습"> <meta property="og:url" content="https://www.example.com/popup/"> <meta property="og:type" content="website">
- og:title: 미리보기의 제목입니다. 브라우저 탭 제목과 달라도 되고, 잘리지 않을 만큼 짧게 씁니다.
- og:description: 한두 문장. 앱에 따라 첫 줄만 보이기도 합니다.
- og:image: 미리보기 사진입니다. Meta 문서는 1200×630픽셀 이상, 1.91:1에 가까운 비율을 권하고, 큰 미리보기로 보이려면 최소 600×315픽셀이 필요하다고 안내합니다. 앱에 따라 정사각형이나 더 좁게 잘라 보여 주므로 글자와 얼굴은 가장자리를 피해 가운데에 둡니다. Finipix의 공유 이미지 프리셋을 쓰면 브라우저 안에서 1200×630으로 자를 수 있고, 미리보기를 눌러 남길 부분을 고를 수 있습니다.
- og:image:width / height: 없어도 되지만, Meta는 이 값이 있으면 처음 공유될 때부터 미리보기가 제대로 나온다고 설명합니다.
- og:url: 페이지의 대표 주소입니다. 광고 추적용 파라미터는 빼고 적습니다.
- og:type: 랜딩 페이지라면
website가 맞습니다. 오픈그래프 프로토콜이 기본 속성으로 꼽는 항목입니다.
주소는 상대 경로가 아니라 전체 주소로
미리보기가 깨지는 가장 흔한 원인입니다. 페이지 안에서는 images/og.jpg가 페이지 위치를 기준으로 계산되지만, 앱의 미리보기 서버는 태그를 글자 그대로 읽습니다. 그러니 https://로 시작하는 전체 주소를 적어야 합니다. og:url도 마찬가지입니다.
그래서 이 태그들은 페이지가 올라갈 주소가 정해진 뒤에야 완성할 수 있습니다. 최종 주소를 받은 다음(HTML 파일을 인터넷에 올리는 방법 참고) 태그를 채우고, 이미지 파일도 실제로 그 주소에 올라가 있는지 확인하십시오. 미리보기 서버는 내 컴퓨터의 파일을 읽을 수 없고, 로그인해야 보이는 페이지에도 들어갈 수 없습니다.
카카오톡은 예전 미리보기를 기억한다
국내에서 링크는 대부분 카카오톡으로 오가는데, 카카오톡 미리보기에는 자주 당황하게 되는 특징이 있습니다. 카카오 서버가 URL별 미리보기 정보를 캐시해 두기 때문입니다. 카카오 개발자 포럼(데브톡)의 카카오 공식 계정 글에 따르면 같은 URL은 최소 1시간 캐시되고, 미리보기 이미지는 이미지 주소를 기준으로 카카오 서버에 몇 시간, 사용자 기기에도 따로 캐시됩니다. 태그를 다 고치기 전에 한 번이라도 링크를 공유했다면, HTML을 고쳐도 카카오톡에는 옛 미리보기가 계속 나올 수 있습니다.
이를 위한 도구를 Kakao Developers가 제공합니다. 개발자 문서에서는 카카오톡 URL 메타정보 관리라는 이름으로 [도구] 메뉴 아래에 있고, 데브톡 글에서는 흔히 "공유 디버거"라고 부릅니다. 카카오 계정으로 로그인해야 쓸 수 있습니다.
- developers.kakao.com에 로그인한 뒤 [도구] 메뉴에서 [카카오톡 URL 메타정보 관리]를 엽니다.
- [URL 입력]에 페이지 주소를 넣고 [메타 정보 조회]를 누르면 카카오가 지금 기억하고 있는 정보가 보입니다.
- [캐시 초기화]를 누른 뒤, 채팅방에 링크를 다시 붙여 넣어 확인합니다.
글자는 바뀌었는데 사진만 그대로라면 이미지 주소 자체를 바꾸십시오. og-popup-v2.jpg처럼 새 이름으로 올리거나 ?v=2 같은 꼬리를 붙이고 og:image도 고칩니다. 이미지는 주소 기준으로 캐시되므로 새 주소를 쓰는 것이 확실한 방법입니다.
링크를 보내기 전에 확인하는 법
- 페이스북·인스타그램: Meta의 Sharing Debugger(developers.facebook.com/tools/debug/)에 주소를 넣으면 크롤러가 읽은 태그와 오류·경고가 나오고, 페이지를 다시 읽어 가므로 저장된 미리보기도 새로 고쳐집니다.
- 카카오톡: 위의 카카오톡 URL 메타정보 관리 도구.
- 그 밖의 앱: 공개된 점검 도구가 없는 경우가 많습니다. 나에게 보내기나 테스트용 채팅방에 링크를 보내 봅니다. 이런 앱도 캐시를 하는 경우가 있으니 초안이 아니라 완성된 태그로 시험하십시오.
- 소스 확인: 올라간 페이지에서 Ctrl+U로 소스를 열어 태그가 실제로 들어 있는지,
og:image주소를 새 탭에 붙여 넣었을 때 이미지가 열리는지 확인합니다.
og:image를 바꾼 뒤에도 옛 이미지 파일을 지우지 말라고 권합니다. 이미 공유된 게시물이 그 파일을 가리키고 있을 수 있고, 태그를 바꿔도 이미 올라간 공유물은 자동으로 바뀌지 않습니다.파일에 태그 넣기
이 태그는 모두 <head> 안에 들어가며, VS Code나 메모장 같은 텍스트 편집기로 넣습니다. 위 예시를 붙여 넣고 주소와 문구를 바꾼 뒤, 태그 속 한글이 깨지지 않도록 UTF-8 인코딩으로 저장하십시오.
Finipage로는 이 중 일부만 할 수 있습니다. 속성 패널의 문서 항목에서 페이지 제목(<title>)과 설명(meta name="description")을 고칠 수 있고, 오픈그래프 태그가 없을 때 이 둘을 대신 쓰는 앱도 있습니다. 파비콘 링크와 og: 태그를 고치는 칸은 Finipage에 없으니 텍스트 편집기로 넣어야 합니다. 그 뒤에 Finipage에서 페이지를 고쳤다면 HTML 소스 보기로 head에 태그가 그대로 있는지 확인할 수 있습니다. 공유하기 전에는 랜딩 페이지 공개 전 체크리스트도 한번 훑어보십시오.
내 이미지로 바로 해 보려면 Finipix를 여세요. 브라우저에서 돌아가고 이미지는 내 기기 밖으로 나가지 않습니다.