Open Graph 태그 생성기 🔒 브라우저에서 로컬로 실행 — 아무것도 업로드되지 않습니다.
실시간 링크 미리보기 카드와 함께 Open Graph 메타 태그를 생성하세요.
링크 미리보기
![]()
이미지 없음 생성된 메타 태그
이 도구에 대해
Open Graph 태그는 페이지의 `
`에 있는 추가 `` 태그 모음으로, 누군가 URL을 공유할 때 Facebook, LinkedIn, Discord, Slack 등 대부분의 플랫폼이 링크 미리보기를 어떻게 렌더링할지—즉 밋밋한 링크 대신 어떤 제목, 설명, 이미지를 보여줄지—알려줍니다. 이 태그가 없으면 대부분의 플랫폼은 페이지 자체의 ``과 첫 번째 이미지에서 추측하게 되는데, 이는 종종 잘못되거나 불완전하게 보입니다.</p><p data-astro-cid-zpu62n3h>이 생성기는 `og:title`, `og:description`, `og:url`, `og:image`, `og:type`, 선택적으로 `og:site_name` 태그를 대신 만들어 주며, 카드가 일반적으로 어떻게 렌더링되는지 근사하는 실시간 미리보기도 제공합니다. 렌더링 세부 사항(이미지 자르기, 글자 수 제한, 캐시 동작)은 플랫폼마다 약간씩 다르므로, 널리 게시하기 전에 대상 플랫폼 자체의 디버거나 미리보기 도구로 최종 결과를 테스트해 보는 것이 여전히 좋습니다—여기서는 모든 처리가 브라우저에서 로컬로 실행되며 아무것도 업로드되지 않습니다.</p> <h2>자주 묻는 질문</h2> <div class="faq-item"> <h3>og:image에는 어떤 이미지 크기를 사용해야 하나요?</h3> <p>1200×630px가 널리 권장되는 크기입니다 — Facebook, LinkedIn 및 대부분의 링크 미리보기 화면에서 어색하게 잘리지 않고 큰 카드로 잘 표시됩니다.</p> </div><div class="faq-item"> <h3>왜 제목/설명에 경고가 표시되나요?</h3> <p>대부분의 플랫폼이 미리보기 카드에서 긴 텍스트를 자르기 때문에, 이 도구는 60자 초과 제목이나 200자 초과 설명에 플래그를 표시합니다. 이는 차단하지 않는 제안일 뿐 오류가 아닙니다.</p> </div> </article> <nav class="related" aria-label="관련 도구"> <h2>관련 도구</h2> <div class="tool-grid"> <a class="tool-card" href="/ko/css-gradient-generator/"> <span class="icon">▧</span> <h3>CSS 그라디언트 생성기</h3> <p>선형, 방사형, 원뿔형 그라디언트를 디자인하고 CSS를 복사하세요.</p> </a><a class="tool-card" href="/ko/box-shadow-generator/"> <span class="icon">❏</span> <h3>박스 섀도 생성기</h3> <p>실시간 미리보기로 다층 CSS box-shadow를 만드세요.</p> </a><a class="tool-card" href="/ko/border-radius-generator/"> <span class="icon">⌒</span> <h3>보더 반경 생성기</h3> <p>둥근 모서리와 유기적 블롭 모양을 만들고 CSS를 복사하세요.</p> </a><a class="tool-card" href="/ko/flexbox-generator/"> <span class="icon">⧉</span> <h3>Flexbox 생성기</h3> <p>flex 속성을 조정하고 레이아웃 CSS를 복사하세요.</p> </a><a class="tool-card" href="/ko/css-variables-generator/"> <span class="icon">🎨</span> <h3>CSS 변수 생성기</h3> <p>이름/값 쌍으로 :root CSS 커스텀 속성 블록을 만드세요.</p> </a><a class="tool-card" href="/ko/svg-blob-generator/"> <span class="icon">🫧</span> <h3>SVG 블롭 생성기</h3> <p>유기적이고 무작위적인 블롭 모양을 재사용 가능한 SVG 경로로 생성하세요.</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"og:image에는 어떤 이미지 크기를 사용해야 하나요?","acceptedAnswer":{"@type":"Answer","text":"1200×630px가 널리 권장되는 크기입니다 — Facebook, LinkedIn 및 대부분의 링크 미리보기 화면에서 어색하게 잘리지 않고 큰 카드로 잘 표시됩니다."}},{"@type":"Question","name":"왜 제목/설명에 경고가 표시되나요?","acceptedAnswer":{"@type":"Answer","text":"대부분의 플랫폼이 미리보기 카드에서 긴 텍스트를 자르기 때문에, 이 도구는 60자 초과 제목이나 200자 초과 설명에 플래그를 표시합니다. 이는 차단하지 않는 제안일 뿐 오류가 아닙니다."}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — 모든 것이 클라이언트 사이드에서 실행됩니다. 데이터가 업로드되지 않습니다.</span> <span><a href="https://dec0de.dev" rel="noopener">dec0de.dev — 18 formatters & encoders</a></span> </div> </footer> <script type="module">const a=document.getElementById("lang-select");a?.addEventListener("change",()=>{const e=a.value,t=a.dataset.path??"";window.location.href=e==="en"?`/${t}`:`/${e}/${t}`});document.getElementById("theme-toggle")?.addEventListener("click",()=>{const e=document.documentElement,t=e.dataset.theme==="dark"?"light":"dark";e.dataset.theme=t,localStorage.setItem("theme",t)});document.addEventListener("click",async e=>{const t=e.target.closest("[data-copy]");if(!t)return;const n=document.getElementById(t.dataset.copy);if(!n)return;const o="value"in n?n.value:n.textContent??"";try{await navigator.clipboard.writeText(o);const c=t.textContent;t.textContent=t.dataset.copiedLabel||"✓",t.classList.add("copied"),setTimeout(()=>{t.textContent=c,t.classList.remove("copied")},1200)}catch{}});</script> </body> </html> <script type="module" src="/_astro/open-graph-generator.astro_astro_type_script_index_0_lang.Aj92YbMh.js"></script>