# OG태그 설정 기준, og:image 1200×630 규격 정리
카카오톡 링크 미리보기가 깨지는 이유, 2026년 기준으로 완벽 정리해드립니다
---
링크를 카카오톡이나 다른 메신저에 공유했는데 썸네일 이미지가 깨지거나, 엉뚱한 사진이 뜨거나, 아예 이미지 없이 텍스트만 덩그러니 나온 경험 있으신가요? 이런 문제는 대부분 OG태그(Open Graph 태그) 설정 미비에서 발생합니다. 홈페이지나 블로그를 운영하다 보면 콘텐츠 자체는 정성껏 만들어놓고도, 정작 그 링크가 SNS나 메신저에서 어떻게 보여지는지는 신경 쓰지 못하는 경우가 많습니다.
OG태그는 웹페이지가 SNS·메신저에 공유될 때 제목, 설명, 대표 이미지를 지정해주는 메타태그입니다. 이게 제대로 세팅돼 있지 않으면 아무리 좋은 콘텐츠라도 클릭률이 크게 떨어질 수밖에 없습니다. 반대로 말하면, OG태그 몇 줄만 제대로 넣어도 링크 공유 시 노출 품질이 확 달라진다는 뜻이기도 합니다.
이 글에서는 2026년 9월 현재 기준으로 검증된 OG태그 필수 속성부터 og:image 권장 사이즈인 1200×630px 규격, 그리고 카카오톡·Facebook·LinkedIn 등 플랫폼별 세부 차이까지 실무에서 바로 써먹을 수 있도록 정리했습니다. 홈페이지 제작 체크리스트에 반드시 포함해야 할 항목이니, 끝까지 읽고 나면 여러분의 사이트도 어떤 채널에 공유되든 깔끔한 미리보기를 보여줄 수 있게 될 겁니다. 😊
---
준비물·전제조건 — HTML 수정 권한과 이미지 편집 툴만 있으면 시작 가능합니다
OG태그 설정을 위해 필요한 준비물은 생각보다 간단합니다. 웹페이지의 `` 영역을 수정할 수 있는 권한, 그리고 1200×630px 크기의 대표 이미지를 만들 수 있는 편집 도구만 있으면 바로 시작할 수 있습니다.
먼저 필요한 접근 권한부터 확인해보세요.
직접 개발한 홈페이지라면 소스코드의 `` 태그 안에 메타태그를 추가할 수 있는 권한이 필요합니다.
임대형 플랫폼을 이용 중이라면 관리자 페이지 내에 OG태그나 소셜 공유 설정 메뉴가 별도로 있는지 먼저 확인해보시는 게 좋습니다. 플랫폼에 따라 이 기능이 제한적이거나 아예 없는 경우도 있습니다.
다음으로 이미지 준비가 필요합니다.
① 1200×630px 규격에 맞는 대표 이미지 (포토샵, 피그마, 캔바 등 어떤 툴이든 무방)
② JPEG 또는 PNG 포맷 지원 여부 확인
③ 파일 용량을 1MB 이하로 줄일 수 있는 압축 도구 (TinyPNG, Squoosh 등)
④ 이미지를 업로드할 서버 또는 CDN 경로 (절대경로 URL 확보용)
마지막으로 지식 측면에서는 HTML의 `` 태그 문법에 대한 기초적인 이해만 있으면 충분합니다. 복잡한 프로그래밍 지식이 없어도 코드를 그대로 복사해서 붙여넣는 수준으로 적용 가능하니 너무 부담 갖지 않으셔도 됩니다. 다만 og:image URL을 절대경로(https://로 시작하는 전체 주소)로 작성해야 한다는 점만은 꼭 기억해두세요. 상대경로로 입력하면 일부 플랫폼에서 이미지가 아예 표시되지 않는 문제가 발생할 수 있습니다.
---
Step 1. OG태그 4대 필수 속성부터 정확히 이해하기
OG태그의 핵심은 og:title, og:type, og:image, og:url이라는 4가지 필수 속성이며, 이 4가지만 제대로 넣어도 기본적인 링크 미리보기는 정상 작동합니다. 여기에 og:description과 og:image:alt를 추가로 넣는 것이 권장되며, 필요에 따라 og:site_name, og:locale, og:image:width, og:image:height 등의 속성으로 정보를 더 풍부하게 전달할 수 있습니다.
각 속성이 어떤 역할을 하는지 하나씩 짚어보겠습니다.
og:title은 공유됐을 때 표시될 제목입니다. 페이지의 `
` 태그와 다르게, SNS 공유용으로 별도 설정할 수 있다는 점이 핵심입니다. 검색엔진 노출용 제목과 SNS 공유용 제목을 다르게 가져가고 싶을 때 유용합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:type</strong>은 콘텐츠의 성격을 정의합니다. 일반 웹페이지라면 "website", 블로그 글이라면 "article" 같은 값을 넣습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:image</strong>는 이 글의 핵심 주제인 대표 썸네일 이미지의 절대경로 URL입니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:url</strong>은 정규 URL(canonical URL)을 지정하는 역할을 합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">여기에 추가로 권장되는 두 가지도 있습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:description</strong>은 미리보기 카드에 표시될 요약 설명 문구입니다.<br><strong>og:image:alt</strong>는 이미지에 대한 대체 텍스트로, 접근성과 이미지 로딩 실패 시 대비 역할을 합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">실제 코드로 작성하면 다음과 같은 형태가 됩니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">```html<br><meta property="og:title" content="OG태그 설정 완벽 가이드"><br><meta property="og:type" content="website"><br><meta property="og:image" content="https://example.com/images/og-thumbnail.jpg"><br><meta property="og:url" content="https://example.com/blog/og-tag-guide"><br><meta property="og:description" content="og:image 1200x630 규격부터 카카오톡 캐시 초기화까지 총정리"><br><meta property="og:image:alt" content="OG태그 설정 가이드 대표 이미지"><br>```</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">여기서 <strong>가장 많이 실수하는 부분이 property 속성</strong>입니다. 일반적인 메타태그는 `name` 속성을 쓰지만, OG태그는 `property` 속성을 사용합니다. `name="og:title"`처럼 잘못 작성하면 Open Graph 프로토콜을 지원하는 플랫폼들이 이 값을 아예 인식하지 못하는 경우가 많으니 반드시 `property`로 작성해야 합니다.</p><div style="margin:24px 0;text-align:center;"><span id="img-marker-2" style="display:block;margin:10px 0;color:#999;">▼이미지3▼</span></div><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">---</p><h2 style="margin:24px 0 12px 0;line-height:1.5;font-size:28px;font-weight:700;text-align:center;">Step 2. og:image 1200×630px 규격, 왜 이 사이즈여야 할까</h2><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:image의 범용 권장 사이즈는 1200×630px(비율 약 1.91:1)이며, 이는 국내외 다수 출처에서 공통으로 언급되는 규격</strong>입니다. 국내 자료는 범용 권장 사이즈를 1200×630px(1.91:1)로 두고 파일 형식은 JPEG 또는 PNG, 파일 크기는 1MB 이하를 권장한다고 안내합니다. 해외 자료 역시 2026년 기준 최적 Open Graph 이미지 사이즈를 1200×630px로 보고 있으며, Facebook·X·LinkedIn·Slack·Discord·WhatsApp·iMessage 등 대부분의 플랫폼에서 이 규격이 통용된다고 설명합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">다만 여기서 주의할 점이 있습니다. <strong>1200×630px는 어디까지나 '범용 권장치'이고, 플랫폼별로 세부 수치는 조금씩 다르다</strong>는 사실입니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">플랫폼별 세부 권장치를 정리하면 다음과 같습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>Facebook</strong>은 최소 200×200px, 권장 1200×630px(1.91:1), 최대 파일 크기 8MB로 안내됩니다.<br><strong>LinkedIn</strong>은 공식 권장치가 1200×627px(1.91:1), 최대 5MB로 안내됩니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">두 플랫폼 모두 1.91:1 비율은 동일하지만, 세로 픽셀 수가 630px과 627px로 미세하게 다르다는 점이 흥미롭습니다. 실무에서는 이 3px 차이 때문에 이미지가 깨지는 경우는 거의 없지만, <strong>가장 안전한 방식은 1200×630px 하나로 통일해서 대부분의 플랫폼을 커버하는 것</strong>입니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">왜 하필 1.91:1 비율일까요? 이 비율은 메신저나 SNS 피드에서 카드 형태로 이미지를 보여줄 때 가로로 넓고 세로는 상대적으로 짧은 형태가 화면 스크롤 흐름에 방해되지 않으면서도 시각적 임팩트를 줄 수 있기 때문입니다. 정사각형(1:1)이나 세로형(4:5) 이미지도 일부 플랫폼에서는 지원하지만, <strong>범용성을 고려하면 1.91:1 비율의 1200×630px가 가장 무난한 선택</strong>입니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">이미지를 제작할 때는 처음부터 1200×630px 캔버스로 작업하는 것을 권장합니다. 기존에 다른 용도로 만들어둔 이미지를 억지로 크롭하면 핵심 요소가 잘리거나 비율이 왜곡될 수 있기 때문입니다.</p><div style="margin:24px 0;text-align:center;"><span id="img-marker-3" style="display:block;margin:10px 0;color:#999;">▼이미지4▼</span></div><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">---</p><h2 style="margin:24px 0 12px 0;line-height:1.5;font-size:28px;font-weight:700;text-align:center;">Step 3. 이미지 파일 용량과 안전영역 배치 원칙 적용하기</h2><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:image 파일 용량은 1MB 이하로 맞추는 것이 가장 안전하며, 텍스트와 로고 같은 핵심 요소는 이미지 중앙 80% 영역 안에 배치해야 잘림 없이 표시</strong>됩니다. 이 두 가지 원칙만 지켜도 대부분의 플랫폼에서 문제없이 이미지가 노출됩니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">먼저 파일 용량 기준에 대해 조금 더 자세히 살펴보겠습니다. 출처별로 권장 용량에 편차가 있다는 점을 짚고 넘어갈 필요가 있습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">국내 자료 중 하나는 1MB 이하를 권장합니다.<br>다른 국내 자료는 최소 1200×630px 고해상도로 설정하되 파일 용량은 5MB 이내가 좋다고 언급합니다.<br>해외 자료는 Facebook의 실제 제한치인 최대 8MB를 언급하면서도, 이상적으로는 1MB 미만을 권장한다고 설명합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">이렇게 출처마다 숫자가 다르게 나오는 이유는 "플랫폼이 허용하는 최대치"와 "실무에서 권장하는 최적치"가 다르기 때문입니다. <strong>실무적으로 가장 안전한 접근은 1MB 이하로 맞추는 것</strong>입니다. 이렇게 하면 어떤 플랫폼에 공유되더라도 용량 초과로 이미지가 표시되지 않는 상황을 피할 수 있고, 페이지 로딩 속도에도 부담을 주지 않습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">다음으로 안전영역 배치 원칙입니다. 국내 자료는 텍스트와 로고를 이미지 중앙 80% 영역에 배치할 것을 권장하고, 해외 자료 역시 텍스트·로고·얼굴 같은 중요 요소를 중앙 80% 안에 두고 각 변 바깥쪽 10%는 여유 공간으로 남기라고 설명합니다. 두 자료가 정확히 일치하는 걸 보면, 이 원칙은 업계 표준으로 봐도 무방할 것 같습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">이 원칙이 필요한 이유는 <strong>플랫폼마다 이미지를 자르는 방식(크롭 방식)이 조금씩 다르기 때문</strong>입니다. 어떤 메신저는 이미지를 정사각형으로 크롭해서 보여주고, 어떤 피드는 원본 비율 그대로 보여줍니다. 핵심 텍스트가 이미지 가장자리에 붙어 있으면, 크롭 방식에 따라 글자가 잘려서 아예 안 보이는 사고가 발생할 수 있습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">실무 작업 순서로 정리하면 다음과 같습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><br>1. 1200×630px 캔버스 생성</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">2. 캔버스 중앙 80% 영역(가로 약 960px, 세로 약 504px)에 가이드라인 표시</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">3. 텍스트, 로고, 얼굴 등 핵심 요소를 가이드라인 안쪽에 배치</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">4. 배경 이미지나 여백 요소는 가이드라인 바깥쪽 10% 영역에 배치</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">5. JPEG 또는 PNG로 내보내기</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">6. 압축 도구로 1MB 이하까지 용량 최적화</p><div style="margin:24px 0;text-align:center;"><span id="img-marker-4" style="display:block;margin:10px 0;color:#999;">▼이미지5▼</span></div><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">---</p><h2 style="margin:24px 0 12px 0;line-height:1.5;font-size:28px;font-weight:700;text-align:center;">Step 4. 카카오톡 링크 미리보기 캐시 초기화하고 최종 확인하기</h2><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>이미지를 수정한 뒤에도 링크 미리보기가 예전 이미지로 계속 뜬다면, 이는 플랫폼이 이전 이미지를 캐시로 저장해두고 있기 때문이며 각 플랫폼별 캐시 갱신 작업이 반드시 필요</strong>합니다. OG태그를 아무리 정확하게 수정해도 캐시를 초기화하지 않으면 실제 화면에는 반영되지 않는 경우가 많아서, 이 단계를 놓치고 "왜 적용이 안 되지?"라고 당황하는 분들이 꽤 많습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">카카오톡의 경우 developers.kakao.com/tool/clear/og 에서 제공하는 <strong>카카오톡 공유 캐시 초기화 도구</strong>를 사용하면 됩니다. 카카오 측 안내에 따르면, 이 디버거 도구로 기존에 저장된 대표 이미지를 삭제해야 새 이미지가 정상적으로 표시된다고 합니다. 즉 단순히 URL만 다시 입력한다고 자동으로 갱신되는 게 아니라, <strong>명시적으로 기존 캐시를 지워주는 절차가 필요</strong>하다는 점이 핵심입니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">Facebook 계열 플랫폼은 developers.facebook.com/tools/debug/ 에서 제공하는 <strong>공유 디버거</strong>를 사용합니다. 여기에 URL을 입력하고 "다시 스크랩하기(Scrape Again)" 버튼을 누르면 최신 OG태그 정보를 다시 가져옵니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">캐시 초기화 작업의 실무 절차를 순서대로 정리해보겠습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">Step A. 수정된 OG태그가 실제 페이지 소스에 반영됐는지 개발자도구(F12)의 Elements 탭에서 직접 확인합니다.<br>Step B. 카카오 디버거 도구에 해당 URL을 입력하고 캐시 초기화를 실행합니다.<br>Step C. Facebook 공유 디버거에도 동일한 URL을 입력해 다시 스크랩합니다.<br>Step D. 실제로 카카오톡 채팅방이나 SNS에 링크를 붙여넣어 미리보기가 정상적으로 뜨는지 눈으로 확인합니다.<br>Step E. 이미지가 여전히 안 바뀐다면 URL 뒤에 임시 쿼리스트링(예: ?v=2)을 붙여 강제로 새로운 URL처럼 인식시키는 방법도 있습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">주의할 점은 <strong>캐시 초기화 도구마다 갱신 반영 속도가 다를 수 있다</strong>는 것입니다. 일부는 즉시 반영되지만, 일부 플랫폼은 몇 분에서 길게는 수 시간까지 걸릴 수 있으므로 수정 직후 바로 확인이 안 된다고 너무 조급해하지 않으셔도 됩니다.</p><div style="margin:24px 0;text-align:center;"><span id="img-marker-5" style="display:block;margin:10px 0;color:#999;">▼이미지6▼</span></div><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">---</p><h2 style="margin:24px 0 12px 0;line-height:1.5;font-size:28px;font-weight:700;text-align:center;">자주 발생하는 오류 — 상대경로 URL과 캐시 미갱신이 대부분의 원인입니다</h2><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>OG태그 설정 후 발생하는 오류의 대부분은 og:image URL을 상대경로로 작성했거나, 수정 후 캐시를 초기화하지 않았기 때문</strong>입니다. 이 두 가지만 체크해도 흔히 발생하는 문제의 상당 부분이 해결됩니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">가장 흔한 오류 케이스를 순서대로 짚어보겠습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>첫째, 상대경로 URL 문제입니다.</strong><br>og:image에 `/images/thumbnail.jpg`처럼 상대경로를 입력하면 일부 플랫폼에서 이미지를 아예 인식하지 못합니다. 반드시 `https://example.com/images/thumbnail.jpg`처럼 도메인을 포함한 절대경로로 작성해야 합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>둘째, property 대신 name 속성을 쓴 경우입니다.</strong><br>`<meta name="og:image" content="...">`처럼 작성하면 Open Graph 프로토콜을 지원하는 대부분의 플랫폼이 이 태그를 인식하지 못합니다. 반드시 `property="og:image"`로 작성해야 합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>셋째, 캐시가 남아 있는 경우입니다.</strong><br>이미지를 새로 바꿨는데도 예전 이미지가 계속 뜬다면, 카카오톡이나 Facebook의 캐시 초기화 도구를 사용해 강제로 갱신해야 합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>넷째, 이미지 접근 자체가 차단된 경우입니다.</strong><br>og:image URL이 로그인 후에만 접근 가능한 페이지 안에 있거나, robots.txt로 크롤링이 차단돼 있으면 플랫폼 봇이 이미지를 가져오지 못합니다. 이미지 경로는 누구나(비로그인 상태에서도) 접근 가능해야 합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>다섯째, HTTPS 혼용 문제입니다.</strong><br>페이지는 https://로 서비스되는데 og:image URL만 http://로 남아 있으면 브라우저나 플랫폼의 보안 정책에 의해 이미지 로딩이 차단될 수 있습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">이런 문제가 발생했을 때는 우선 개발자도구의 Network 탭에서 og:image URL을 직접 열어 이미지가 정상적으로 로드되는지 눈으로 확인하는 것이 가장 빠른 진단 방법입니다. 이미지 자체는 잘 열리는데 미리보기에만 안 뜬다면 캐시 문제일 가능성이 높고, 이미지 URL 자체가 안 열린다면 경로나 권한 문제일 가능성이 높습니다.</p><div style="margin:24px 0;text-align:center;"><span id="img-marker-6" style="display:block;margin:10px 0;color:#999;">▼이미지7▼</span></div><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">---</p><h2 style="margin:24px 0 12px 0;line-height:1.5;font-size:28px;font-weight:700;text-align:center;">활용 팁 & 베스트 프랙티스 — og:image:width·height까지 챙기면 완성도가 올라갑니다</h2><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>필수 속성 4가지에 더해 og:image:width, og:image:height, og:site_name, og:locale 같은 추가 속성까지 챙기면 플랫폼이 이미지를 더 빠르고 정확하게 렌더링</strong>할 수 있습니다. 이런 세부 속성은 필수는 아니지만, 완성도 높은 OG태그 세팅을 원한다면 함께 넣어두는 것을 권장합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">몇 가지 실무 팁을 정리해보겠습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:image:width와 og:image:height를 명시하세요.</strong><br>플랫폼이 이미지를 다운로드하기 전에 미리 크기 정보를 알 수 있어서, 페이지 렌더링 시 레이아웃이 덜 흔들리고 미리보기 카드 생성 속도도 개선될 수 있습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">```html<br><meta property="og:image:width" content="1200"><br><meta property="og:image:height" content="630"><br>```</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:site_name으로 브랜드명을 노출하세요.</strong><br>미리보기 카드 하단에 사이트명이 함께 표시되는 경우가 많아, 브랜드 인지도를 높이는 데 도움이 됩니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:locale로 언어권을 명시하세요.</strong><br>다국어 사이트를 운영 중이라면 `og:locale="ko_KR"`처럼 언어 코드를 넣어 어떤 언어권 콘텐츠인지 명확히 하는 것이 좋습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>페이지마다 og:image를 다르게 설정하세요.</strong><br>사이트 전체에 동일한 대표 이미지 하나만 걸어두는 경우가 많은데, 콘텐츠별로 개별 이미지를 지정하면 클릭률 향상에 훨씬 유리합니다. 블로그 글이라면 글마다 다른 썸네일을, 상품 페이지라면 상품 이미지를 og:image로 지정하는 방식입니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>og:image:alt를 꼭 채우세요.</strong><br>이미지 로딩이 실패했을 때 대체 텍스트가 노출되고, 스크린리더 사용자를 위한 접근성 측면에서도 도움이 됩니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>Twitter Card 태그도 함께 검토하세요.</strong><br>X(구 트위터)는 OG태그를 일부 참조하지만, `twitter:card`, `twitter:image` 같은 별도 태그를 쓰는 경우도 있어 필요하다면 별도로 추가하는 것을 고려해볼 수 있습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">이런 세부 속성들은 당장 없어도 미리보기 자체는 대부분 작동하지만, 장기적으로 링크 공유 품질을 높이고 싶다면 하나씩 채워나가는 것을 추천합니다.</p><div style="margin:24px 0;text-align:center;"><span id="img-marker-7" style="display:block;margin:10px 0;color:#999;">▼이미지8▼</span></div><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">---</p><h2 style="margin:24px 0 12px 0;line-height:1.5;font-size:28px;font-weight:700;text-align:center;">응용·확장 — 홈페이지 제작 체크리스트에 OG태그 항목을 표준화하기</h2><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>OG태그 설정은 일회성 작업이 아니라, 홈페이지 제작이나 신규 페이지 배포 시마다 체크리스트로 표준화해두면 장기적으로 관리가 훨씬 수월</strong>해집니다. 특히 여러 페이지를 운영하는 사이트라면 페이지 템플릿 단계에서부터 OG태그 로직을 자동화해두는 것이 효율적입니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">응용할 수 있는 방향은 다음과 같습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>동적 OG 이미지 자동 생성</strong><br>블로그나 상품 페이지처럼 콘텐츠가 계속 늘어나는 사이트라면, 매번 수동으로 1200×630px 이미지를 만드는 대신 제목·카테고리 정보를 받아서 자동으로 썸네일을 생성하는 시스템을 구축하는 방법도 있습니다. 템플릿 배경 위에 텍스트만 자동으로 얹는 방식입니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>CMS 단계에서 OG태그 입력 필드 표준화</strong><br>콘텐츠 관리 시스템을 쓰고 있다면, 글 작성 화면에 og:title, og:description, og:image 업로드 필드를 기본으로 넣어두면 작성자가 별도로 코드를 건드리지 않아도 자동으로 OG태그가 채워지도록 만들 수 있습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>A/B 테스트 관점에서 활용</strong><br>같은 페이지라도 og:title이나 og:image 문구를 다르게 실험해보면서 어떤 조합이 SNS 공유 시 클릭률이 더 높은지 비교해보는 것도 가능합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>다국어 페이지에 og:locale과 og:locale:alternate 활용</strong><br>여러 언어로 서비스되는 사이트라면 각 언어 버전 페이지에 맞는 locale 값과, 다른 언어 버전이 존재함을 알리는 alternate 값을 함께 설정해두면 검색엔진과 SNS 플랫폼 양쪽에 도움이 됩니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">이런 확장 작업들은 처음에는 다소 번거롭게 느껴질 수 있지만, 페이지 수가 많아질수록 수동 작업보다 훨씬 효율적으로 관리할 수 있는 구조가 됩니다.</p><div style="margin:24px 0;text-align:center;"><span id="img-marker-8" style="display:block;margin:10px 0;color:#999;">▼이미지9▼</span></div><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">---</p><h2 style="margin:24px 0 12px 0;line-height:1.5;font-size:28px;font-weight:700;text-align:center;">점검 체크리스트 — 배포 전 마지막으로 이것만 확인하세요</h2><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>OG태그를 실제로 배포하기 전, 아래 항목을 하나씩 체크하면 대부분의 실수를 사전에 방지</strong>할 수 있습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">☑ og:title, og:type, og:image, og:url 4가지 필수 속성이 모두 작성됐는가<br>☑ og:description, og:image:alt도 함께 채웠는가<br>☑ 메타태그가 name이 아닌 property 속성으로 작성됐는가<br>☑ og:image URL이 https://로 시작하는 절대경로인가<br>☑ 이미지 사이즈가 1200×630px(1.91:1)로 제작됐는가<br>☑ 이미지 파일 용량이 1MB 이하인가<br>☑ 핵심 텍스트·로고가 중앙 80% 안전영역 안에 배치됐는가<br>☑ 이미지 경로가 로그인 없이도 접근 가능한가<br>☑ 카카오 디버거와 Facebook 공유 디버거로 캐시를 초기화했는가<br>☑ 실제 메신저·SNS에서 미리보기가 정상 노출되는지 직접 확인했는가</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">이 10가지 항목을 순서대로 체크하고 나면, 웬만한 플랫폼에서는 안정적으로 OG태그가 작동한다고 봐도 무방합니다.</p><div style="margin:24px 0;text-align:center;"><span id="img-marker-9" style="display:block;margin:10px 0;color:#999;">▼이미지10▼</span></div><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">---</p><h2 style="margin:24px 0 12px 0;line-height:1.5;font-size:28px;font-weight:700;text-align:center;">자주 묻는 질문 FAQ</h2><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>Q1. og:image 사이즈를 1200×630px보다 크게 만들어도 되나요?</strong><br>A. 네, 가능합니다. 다만 비율(1.91:1)은 유지하는 것이 안전하고, 파일 용량이 커지지 않도록 압축은 꼭 신경 써야 합니다. 사이즈를 키우더라도 실제 표시되는 화면 크기는 플랫폼이 정한 규격에 맞춰 축소되므로, 무리하게 큰 원본을 쓰기보다는 1200×630px 전후로 최적화하는 편이 로딩 속도 면에서 유리합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>Q2. 카카오톡에서만 미리보기가 안 뜨는데 이유가 뭘까요?</strong><br>A. 카카오톡은 별도의 캐시 시스템을 운영하기 때문에, 다른 플랫폼에서는 정상 노출돼도 카카오톡에서만 예전 정보가 남아있을 수 있습니다. developers.kakao.com/tool/clear/og 에서 제공하는 캐시 초기화 도구로 기존 이미지를 삭제해야 새 이미지가 반영됩니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>Q3. og:image에 GIF 파일도 사용할 수 있나요?</strong><br>A. 일반적으로 og:image는 JPEG 또는 PNG 포맷을 권장합니다. GIF는 정적 이미지로 처리되거나 아예 지원되지 않을 수 있으니, 안정성을 위해서는 JPEG나 PNG를 사용하는 것이 좋습니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>Q4. 모바일과 PC에서 og:image가 다르게 보일 수도 있나요?</strong><br>A. 대부분의 플랫폼은 동일한 og:image를 기기와 무관하게 하나의 소스로 사용하지만, 화면 크기에 따라 크롭되는 비율이 달라질 수 있습니다. 이 때문에 안전영역(중앙 80%) 원칙을 지키는 것이 모바일·PC 양쪽 모두에서 안정적으로 보이는 핵심 방법입니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"><strong>Q5. 플랫폼별 정확한 규격은 어디서 최신 정보를 확인할 수 있나요?</strong><br>A. 플랫폼별 규격은 시간이 지나며 조금씩 변경될 수 있으므로, 발행 전에는 각 플랫폼의 공식 개발자 문서(Facebook, LinkedIn 등)를 통해 최신 수치를 재확인하는 것을 권장합니다.</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">---</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;">OG태그 설정은 눈에 잘 띄지 않지만, 링크 하나가 공유될 때마다 여러분의 콘텐츠 첫인상을 결정하는 중요한 요소입니다. 오늘 정리한 <strong>og:title·og:type·og:image·og:url 4대 필수 속성</strong>과 <strong>1200×630px 규격</strong>, 그리고 <strong>카카오·Facebook 캐시 초기화 방법</strong>까지 차근차근 적용해보시면, 어떤 채널에 공유되든 깔끔하고 신뢰감 있는 미리보기를 만들어낼 수 있을 겁니다. 홈페이지 제작이나 리뉴얼을 계획 중이시라면, 이번 체크리스트를 프로젝트 초기 단계부터 반영해보시는 것을 추천드립니다. 🙂</p><p style="margin:0 0 16px 0;line-height:1.8;text-align:center;"></p><div style="margin-top:30px;padding-top:20px;border-top:2px solid #2B579A;text-align:center;line-height:1.6;">🏢 비젠소프트 | 홈페이지 제작·메타태그 최적화·AI SEO 관리 시스템 전문<br>📧 sales@vizensoft.com | 🌐 www.vizensoft.com | 📞 02-338-4610</div></div>
Back
69
상담요청
