OpenGraph 이미지란 무엇인가요

OpenGraph 이미지는 Twitter, Facebook 및 Open Graph 미리보기에 표시되는 OpenGraph 태그에 사용되는 이미지입니다.

OpenGraph 이미지는 정적이거나 동적일 수 있습니다. 이는 OpenGraph 생성기로 생성되었는지 또는 다른 도구로 생성되었는지에 따라 다릅니다.

OpenGraph 생성기로 생성된 이미지는 일반적으로 정적입니다. 제공된 메타데이터를 기반으로 생성되며, 이 메타데이터는 보통 정적이기 때문입니다. 예를 들어, 블로그 게시물의 메타데이터를 제공하면 OpenGraph 생성기는 해당 메타데이터를 기반으로 정적 OpenGraph 이미지를 생성합니다.

반면에 다른 도구로 생성된 이미지는 동적일 수 있습니다. 예를 들어, 서버 사이드 렌더링 프레임워크를 사용하여 OpenGraph 이미지를 생성하는 경우, 이러한 이미지는 사용자 행동, 시간, 날씨 등의 정보를 기반으로 생성될 수 있습니다.

도구를 사용하여 OpenGraph 이미지 만들기

OpenGraph HTML 코드

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="My Article Title">
<meta property="og:description" content="This is my article description">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

이 HTML 코드를 통해 페이지의 OpenGraph에서 https://example.com/og-image.png 이미지를 표시할 수 있습니다.

미리보기 효과

OG 이미지를 생성한 후, 많은 웹사이트에서 온라인 미리보기 및 디버깅 도구를 제공하여 문제 진단을 돕습니다. 다음은 일반적인 도구들입니다: