OG Image 생성기& 소셜 미리보기
클라이언트 사이드 Canvas 렌더링으로 1200x630 소셜 미리보기 이미지를 생성합니다.
템플릿 스타일
강조 색상
글꼴 크기
HTML 메타 태그
다운로드한 이미지를 서버에 업로드하고 아래 태그에 URL을 입력하세요
<!-- Open Graph --> <meta property="og:image" content="https://yoursite.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/og.png" />
미리보기 · 1200 x 630
이 도구가 도움이 되었나요?
코드 예제
HTML
<!-- Open Graph meta tags --> <meta property="og:title" content="Your Title" /> <meta property="og:description" content="Description" /> <meta property="og:image" content="https://example.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:type" content="article" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og.png" />
Next.js (App Router)
// app/page.tsx
export const metadata: Metadata = {
openGraph: {
title: "My Page Title",
description: "Page description",
images: [
{
url: "https://example.com/og.png",
width: 1200,
height: 630,
alt: "Preview image",
},
],
},
twitter: {
card: "summary_large_image",
},
};React (Helmet)
import { Helmet } from "react-helmet-async";
function SEOHead({ title, image }) {
return (
<Helmet>
<meta property="og:title" content={title} />
<meta property="og:image" content={image} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
name="twitter:card"
content="summary_large_image"
/>
</Helmet>
);
}WordPress (functions.php)
// Add OG Image to WordPress
function add_og_image() {
if (is_singular()) {
$image = get_the_post_thumbnail_url(
get_the_ID(), 'full'
);
if ($image) {
echo '<meta property="og:image"
content="' . esc_url($image) . '" />';
echo '<meta property="og:image:width"
content="1200" />';
echo '<meta property="og:image:height"
content="630" />';
}
}
}
add_action('wp_head', 'add_og_image');자주 묻는 질문
What is an OG Image and why do I need one?
An OG Image (Open Graph Image) is the preview image displayed when a webpage is shared on social media. When you post a link on Twitter, Facebook, LinkedIn, or messaging apps, the platform fetches the og:image meta tag to create a visual card. A well-designed OG image significantly boosts click-through rates and is a key element of SEO and social media marketing.
What is the standard OG Image size?
The recommended size is 1200x630 pixels (aspect ratio 1.91:1), which is optimal for Facebook and most social platforms. Twitter's summary_large_image card also uses this size. LinkedIn recommends 1200x627, which is close enough to be interchangeable. This tool generates 1200x630 images compatible with all major platforms.
Are the generated images uploaded to any server?
No. Images are rendered entirely in your browser using the Canvas API with no server-side processing. When you click download, the image saves directly to your device. Your titles, descriptions, and other content are never transmitted or stored anywhere.
How do I add the generated OG Image to my website?
Upload the downloaded image to your web server or CDN, then add meta tags in your HTML <head>: <meta property="og:image" content="IMAGE_URL" />. Also add og:image:width and og:image:height for faster parsing. In Next.js, set openGraph.images in generateMetadata. In WordPress, most SEO plugins like Yoast handle this automatically.
Why doesn't my OG Image update after I change it?
Social platforms cache OG images. Use Facebook's Sharing Debugger (click 'Scrape Again'), Twitter's Card Validator, or LinkedIn's Post Inspector to force a cache refresh. Adding a version parameter to the image URL (e.g., ?v=2) also helps bypass caching.
What template styles are available?
Four templates are available: Gradient (ideal for tech blogs), Dark (for developer content), Minimal (for business documents), and Split (for product showcases). Each template supports custom accent colors (10 presets + custom color picker) and 3 font size options, creating hundreds of possible visual combinations.