Open Graph 메타 태그 생성기

링크 미리보기를 구성하는 태그

누군가 게시물이나 메시지에 링크를 붙여넣으면 앱이 해당 페이지로 크롤러를 보내 <head> 안의 몇 가지 <meta> 태그를 읽습니다. 이 태그들은 Open Graph 프로토콜에서 비롯되며, 그중 4가지를 필수로 지정합니다:

• og:title: 미리보기에 표시될 제목입니다.
• og:type: 페이지가 무엇인지 나타냅니다. website는 대부분의 페이지에 적합하고 article은 블로그 글에 적합합니다. 프로토콜은 profile, book, video.movie, music.song 같은 유형도 정의합니다.
• og:image: 페이지를 대표하는 그림의 URL입니다.
• og:url: 표준 URL로, 프로토콜에서는 이를 객체의 영구 ID라고 부릅니다.

프로토콜은 선택적 태그도 정의하며, 이 생성기는 유용한 것들을 작성합니다: og:description, og:site_name, 그리고 이미지 세부 정보인 og:image:width, og:image:height, og:image:alt. 대체 텍스트에 대해 프로토콜은 명확합니다. 페이지가 og:image를 지정하면 og:image:alt도 지정해야 하며, 이 텍스트는 설명이 아니라 이미지에 무엇이 담겨 있는지를 묘사합니다.

X가 추가하는 것: twitter:card

X도 Open Graph를 읽습니다. X의 카드 마크업 참조 문서(X의 개발자 문서로, 원본 페이지가 현재 리디렉션되기 때문에 Internet Archive를 통해 연결했습니다)는 각 태그의 대체값을 명시합니다: twitter:title은 og:title로, twitter:description은 og:description으로, twitter:image는 og:image로, twitter:image:alt는 og:image:alt로 대체됩니다. 따라서 추가할 만한 유일한 태그는 레이아웃을 선택하는 twitter:card입니다. 이를 생략하면, 같은 문서에 따르면 대형 카드를 원했더라도 X가 작은 요약 카드로 대체할 수 있습니다:

• summary_large_image: 제목 위에 전체 너비 이미지를 표시합니다. X의 대형 이미지 카드 페이지에 따르면 이 카드의 이미지는 2:1 비율을 지원하며, 최소 300 × 157, 최대 4096 × 4096 픽셀, 5MB 미만, JPG, PNG, WEBP, GIF 형식이어야 합니다. SVG는 지원되지 않습니다.
• summary: 정사각형 이미지가 있는 더 작은 카드입니다. X의 요약 카드 페이지에 따르면 이 이미지는 1:1 비율을 지원하고 144 × 144부터 4096 × 4096 픽셀까지 가능하며, 모든 플랫폼에서 정사각형으로 잘립니다.

같은 참조 문서에는 app 카드와 player 카드도 나와 있지만, 앱 스토어나 동영상 플레이어 필드가 추가로 필요하므로 여기서는 제외했습니다. 위 검사에서 사용하는 한도도 이 문서에 나와 있습니다. 제목은 70자, 설명은 200자, 대체 텍스트는 420자입니다.

각 플랫폼이 명시한 이미지 크기

• LinkedIn: 웹사이트를 공유 가능하게 만드는 가이드에서 og:title, og:image, og:description, og:url를 요구하며, 최대 파일 크기 5MB, 최소 1200 × 627 픽셀, 권장 비율 1.91:1을 명시합니다.
• Meta: 공유 모범 사례에서는 고해상도 화면을 위해 최소 너비 1080픽셀의 이미지를, 이미지 링크 광고 표시를 위해 최소 너비 600픽셀의 이미지를 사용하라고 안내합니다. 같은 페이지에서는 크롤러가 이미지를 먼저 다운로드하고 처리하지 않고도 즉시 렌더링할 수 있도록 og:image:width와 og:image:height를 요구합니다.

1200 × 630 이미지는 이 모든 조건을 충족합니다. LinkedIn의 최소 1200 × 627 이상이고, Meta의 1080보다 넓으며, 1.905:1로 X의 2:1에서 5% 이내입니다.

확인하고 오래된 미리보기 새로 고치기

앱은 스크랩한 내용을 캐시하므로, 태그를 고쳐도 이미 저장된 미리보기는 고쳐지지 않습니다. 두 대형 네트워크 모두 이를 위한 도구를 제공합니다.

• Meta의 공유 디버거는 크롤러가 스크랩하는 태그를 오류나 경고와 함께 보여주고 새로 스크랩을 실행합니다. Meta의 웹마스터 가이드에 설명되어 있으며, 모범 사례 페이지에서는 그 외에는 스크랩된 내용이 표준 24시간 주기로 업데이트된다고 안내합니다.
• LinkedIn의 Post Inspector는 캐시된 URL을 새로 고칩니다. LinkedIn의 도움말 페이지에서는 새로 고침이 새 게시물에만 적용된다고 안내합니다. 이미 해당 URL이 포함된 게시물은 기존 미리보기를 유지합니다.

이 도구가 하지 않는 것

이 도구는 귀하의 페이지나 이미지를 가져오지 않으므로 실제 라이브 상태를 볼 수 없으며, 위 미리보기는 렌더링이 아니라 텍스트 스케치입니다. 이 도구는 태그를 작성해 주지만, 귀하의 사이트가 여전히 페이지의 <head> 안에서, 크롤러가 받는 HTML에 그 태그를 제공해야 합니다. 나중에 JavaScript로 추가한 태그는 영영 보이지 않을 수 있습니다. 또한 이 도구는 app이나 player 카드, 또는 book이나 video.movie 같은 유형이 정의하는 추가 속성은 작성하지 않습니다.

직접 손으로 작성하고 싶지 않다면

Hermoso는 자동으로 돌아가는 마케팅입니다. 시장에서 이미 효과를 내고 있는 광고를 조사하고, 브랜드에 맞는 이미지 및 동영상 광고를 제작하며, 게시물을 예약하고 여러분의 광고 계정에서 유료 캠페인을 운영합니다. 웹 앱에서, 또는 MCP 서버를 통해 Claude, ChatGPT, Cursor 안에서 작동합니다.

무료 도구: UTM 링크 빌더 · QR 코드 생성기 · 소셜 미디어 사이즈 가이드

자주 묻는 질문

어떤 Open Graph 태그가 필수인가요?

Open Graph 프로토콜은 필수 속성 네 가지를 명시합니다. og:title, og:type, og:image, og:url입니다. og:description, og:site_name, og:image의 width, height, alt 태그는 선택이지만 추가할 가치가 있습니다.

og: 태그가 있으면 twitter:title과 twitter:image가 필요한가요?

아니요. X의 카드 마크업 레퍼런스에 따르면 twitter:title, twitter:description, twitter:image, twitter:image:alt는 각각 대응하는 og: 값으로 대체됩니다. 추가할 가치가 있는 태그는 카드 레이아웃을 정하는 twitter:card입니다.

Open Graph 이미지의 크기는 어느 정도여야 하나요?

LinkedIn은 1.91:1 비율로 최소 1200 × 627 픽셀, 5 MB 미만을 요구합니다. Meta는 너비 최소 1080 픽셀을 권장합니다. X의 대형 이미지 카드는 2:1 비율로 300 × 157부터 4096 × 4096까지 지원합니다. 1200 × 630 이미지면 세 가지 모두에 맞습니다.

태그를 바꿨는데 링크에 여전히 예전 이미지가 보이는 이유는 무엇인가요?

앱이 예전에 스크랩한 내용을 캐시해 두었습니다. Meta의 Sharing Debugger나 LinkedIn의 Post Inspector에 URL을 넣어 다시 가져오십시오. LinkedIn은 이미 해당 URL을 공유한 게시물은 예전 미리보기를 유지한다고 안내합니다.

출력에서 따옴표와 앰퍼샌드가 바뀌는 이유는 무엇인가요?

태그가 유효하게 유지되도록 HTML 이스케이프 처리하기 때문입니다. Tom & Jerry's "Sale" 같은 제목은 content 속성 안에서 Tom & Jerry's "Sale"이 되고, 브라우저와 크롤러는 이를 원래 텍스트로 다시 읽습니다.

이 도구가 내 이미지를 불러오나요?

아니요. 입력하는 내용은 어디로도 전송되지 않고 이미지 URL도 가져오지 않습니다. 그래서 미리보기에는 사진 대신 자리표시자가 표시됩니다.