블로그 게시물용 OG 이미지

블로그 게시물용 OG 이미지는 X, LinkedIn, Facebook, Slack 또는 WhatsApp에서 게시물을 공유할 때 표시되는 1200×630 소셜 미리보기 이미지입니다. FastOG는 게시물 제목, 요약, 작성자 정보를 바탕으로 요청 시 동적으로 이미지를 생성하므로 디자인 작업, 업로드, 구독, 시작을 위한 로그인이 필요하지 않습니다.

각 블로그 포스트에 자체 OG 이미지가 필요한 이유

카드 없이 공유되거나 낡은 일반 이미지로 공유된 링크는 다른 모든 포스트와 구분되지 않습니다. 실제 제목과 깔끔한 레이아웃을 갖춘 포스트별 카드는 더 많은 공유와 클릭을 얻습니다. 포스트마다 수작업으로 이미지를 생성하는 비용 때문에 대부분의 블로그가 단일 기본 이미지로 타협하는데, 바로 이 문제를 FastOG가 해결합니다.

블로그 포스트용 동적 OG 이미지를 만드는 방법

페이지 렌더링 시점에 template=blog, 포스트 제목, 발췌문, 작성자 정보를 포함한 URL에 서명합니다. 소셜 크롤러가 이를 가져오면 FastOG가 PNG를 한 번 렌더링하고, Cloudflare가 캐시하여 이후의 모든 공유가 즉시 이루어지고 비용이 들지 않습니다.

// Next.js App Router — app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
    const post = await getPost(params.slug);
    return {
        title: post.title,
        openGraph: {
            images: [generateOgImageUrl({
                template: "blog",
                title: post.title,
                subtitle: post.excerpt,
                author: post.author.name,
            })],
        },
    };
}

작성자와 헤드라인이 포함된 전용 블로그 카드에는 template=blog를 사용하고, 더 깔끔한 제목 전용 레이아웃에는 default를 사용하세요. 모든 템플릿은 1200×630 크기로 렌더링됩니다.

블로그에 맞는 템플릿 선택

FAQ

FastOG 비용은 블로그 게시물 기준으로 얼마인가요?

고유 이미지당 한 번의 렌더링이 발생하며, 동일한 URL은 영구적으로 엣지 캐시되어 월간 할당량에 포함되지 않습니다.

게시물을 수정한 후 이미지를 다시 생성해야 하나요?

제목, 발췌문 또는 작성자가 변경된 경우에만 필요합니다. URL은 콘텐츠에 따라 달라지므로 콘텐츠가 변경되면 새 URL과 새 렌더링이 생성됩니다. 변경되지 않은 URL은 캐시된 상태로 유지되며 할당량에 포함되지 않습니다.

기존 블로그 프레임워크에서 FastOG를 사용할 수 있나요?

네. Next.js, React, SvelteKit, Vue/Nuxt, Astro, Express, Vanilla Node.js, JavaScript, PHP/Laravel, Python, Ruby/Rails용 드롭인 사인 함수(signer)가 제공됩니다. SDK 페이지를 참조하세요.

관련 자료

• API 참조
• SDK — 다운로드 및 사용
• OG 이미지 크기: 1200×630 설명
• og:image가 표시되지 않는 이유는 무엇인가요?