OG 이미지 생성기 - 소셜 공유 이미지 메이커

오픈 그래프 이미지는 채팅, 트윗 또는 Slack 채널에 링크를 붙여넣을 때 표시되는 그림입니다. 이를 렌더링하는 모든 플랫폼은 대략 1200×630픽셀의 캔버스를 기대하며, 크기는 Facebook의 og:image와 Twitter의 summary_large_image 카드가 모두 설계되었습니다. 크기를 잘못 설정하면 이미지가 잘리거나 흐릿하거나 압착되어 나옵니다. 레이아웃이 잘못되면 제목이 바쁜 사진에 비해 읽을 수 없는 조각으로 읽혀집니다. 이 도구는 Canvas 2D API를 사용하여 실제 대상 해상도에서 이미지를 구성하므로 미리보기에 표시되는 것은 PNG에 포함된 정확한 픽셀 그리드입니다.

배경을 선택하세요. 평면 색상, 선택한 두 가지 색상으로 구성된 2스톱 선형 그라데이션 또는 CSS 배경 크기: 표지와 같은 방식으로 전체 1200×630 프레임을 채우기 위해 잘린 업로드된 사진을 선택하세요. 제목과 선택적인 부제목을 입력하세요. 둘 다 캔버스의 자체 글꼴 메트릭을 기준으로 문자별로 측정됩니다. 따라서 한 줄에 들어갈 수 없을 정도로 너무 긴 헤드라인은 가장자리를 벗어나거나 눈에 보이지 않게 잘리는 대신 실제 단어 경계에서 두 번째 또는 세 번째 줄로 줄바꿈됩니다. 가운데 또는 왼쪽 정렬을 선택하고, 배경과 잘 어울리는 텍스트 색상을 선택한 다음, 선택 사항인 로고를 읽을 수 있는 고정된 크기로 모서리에 놓습니다.

캔버스 아래에 있는 4개의 작은 카드는 실제 플랫폼이 자체 크롬으로 래핑한 후 완성된 이미지가 어떻게 보이는지 대략적으로 나타냅니다. Twitter/X의 카드는 설명 줄 없이 이미지 아래에 도메인과 굵은 제목만 표시하고, Facebook은 제목 및 설명 블록 위에 대문자 도메인 스트립을 추가하고, LinkedIn은 설명 없이 제목 아래에 도메인을 배치하고, Discord의 삽입은 이미지 위에 도메인, 제목 및 설명을 자체 어두운 테마로 배치합니다. 이는 링크를 공유하고 각 플랫폼의 자체 크롤러가 페이지의 실제 og:image 및 og:title 메타 태그를 읽을 수 있도록 허용하는 것이 실제로 라이브 카드를 생성하는 것이기 때문에 실제 플랫폼의 라이브 가져오기나 스크린샷이 아니라 사용자가 직접 입력한 도메인 라인을 사용하여 명확하게 설명으로 라벨이 지정된 계획 목적을 위한 대략적인 스타일입니다.

모든 것이 브라우저의 HTML 캔버스 요소에서 로컬로 렌더링됩니다. 제목, 부제, 업로드된 배경 및 로고는 장치를 떠나지 않으며 내보낸 파일은 사용자가 구성한 내용만 포함된 깨끗한 canvas.toBlob() PNG입니다. 모형 테두리, 가짜 브라우저 표시줄 또는 플랫폼 로고가 다운로드된 이미지에 포함되지 않습니다. 나중에 내보낸 PNG의 크기를 조정하거나 변환해야 하는 경우 이 사이트의 이미지 크기 조정 도구 및 이미지 변환기 도구가 중단된 부분부터 바로 선택됩니다.