생성 및 미리보기 Open Graph 메타 태그

✅ OpenGraph 테스터는 한 곳에서 클릭 한 번으로 메타 태그를 미리보고 생성할 수 있습니다

시도: https://opengraph.dev
에 적용 Facebook, Whatsapp, Twitter, LinkedIn, Wordpress...
Hero Image

Open Graph 태그로 웹사이트 최적화

Open Graph 프로토콜이 소셜 미디어 공유를 어떻게 향상시키는지 알아보기

Open Graph (OG)란 무엇인가요?

Open Graph 프로토콜(Often called OGP)은 웹사이트의 컨텐츠가 소셜 네트워크에 어떻게 나타나는지를 정의하는 데 중요합니다. Open Graph 태그를 구현하면 콘텐츠가 온라인으로 공유될 때 특정 이미지, 제목 및 설명이 표시됩니다.

최적의 오픈 그래프 이미지 크기

고해상도 장치에 대한 영향을 극대화하려면 최소 1200픽셀 너비의 Open Graph 이미지를 사용하세요. 소셜 미디어 분야의 리더인 Facebook은 피드에서 이미지를 자르지 않고 전체 이미지를 표시하기 위해 1.91:1 비율의 이미지를 권장합니다.

Open Graph 태그의 쉬운 통합

OpenGraph.dev와 같은 도구를 사용하여 Open Graph 태그를 쉽게 통합하세요. 메타 태그를 웹사이트의 'head' 섹션에 생성하여 삽입함으로써 사이트의 소셜 미디어 가시성을 향상시킵니다.

SEO에서 Open Graph의 중요성

최적화된 Open Graph 태그는 소셜 미디어에서 콘텐츠가 주목 받고 클릭될 가능성을 크게 높여, 사이트로의 트래픽을 증가시킵니다. 이들은 붐비는 소셜 미디어 피드에서 콘텐츠가 돋보이게 하는 데 필수적입니다.

What are Open Graph tags?

Open Graph tags are HTML <meta> elements placed inside the <head> of a web page that describe how the page should appear when its URL is shared somewhere else — a Facebook feed, an X post, a LinkedIn update, a WhatsApp chat, a Discord server, an iMessage thread or a Slack channel. The Open Graph protocol was originally introduced by Facebook in 2010 and has since become the de-facto standard for link previews on virtually every major platform. A complete set of Open Graph meta tags gives you full control over the title, description, image, type and canonical URL that appear inside the rich preview card — turning a plain hyperlink into an attention-grabbing snippet that consistently outperforms a bare link in click-through rate.

A minimum-viable set of Open Graph meta tags 

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

Open Graph across social platforms

Almost every major social network and messenger reads Open Graph metadata, but each one applies its own rules around image size, caching and fallbacks. Match the strictest requirement and the same image set will work everywhere.

Facebook

The largest consumer of Open Graph data. Uses og:title, og:description and og:image. Recommended image is 1200×630 px with a 1.91:1 aspect ratio so it is shown uncropped in the News Feed. Cache is aggressive — use the Sharing Debugger to refresh after a change.

X (Twitter)

Falls back to Open Graph tags when Twitter Card meta is missing, but to get a large preview card you should also declare twitter:card set to summary_large_image and twitter:image. Image must be under 5 MB and at least 300×157 px; 1200×630 is the safe default.

LinkedIn

Reads og:title, og:description, og:image and og:type. Image must be under 5 MB, at least 1200×627 px (ratio 1.91:1). LinkedIn caches the first crawl for around seven days — use the Post Inspector to force a re-fetch after publishing changes.

WhatsApp & iMessage

Both messengers fetch Open Graph tags over HTTPS and have a hard image-size budget. WhatsApp truncates anything above ~300 KB, so optimise the image and declare og:image:width and og:image:height to speed up rendering. iMessage prefers a 1:1 square image when one is available, so consider supplying both ratios via multiple og:image tags.

Discord, Slack & Telegram

All three render previews from the standard og:title, og:description and og:image trio. Discord additionally honours theme-color for the side bar accent. Telegram strips iframes and JS — make sure your tags are present in the initial server-rendered HTML, not injected at runtime.

Pinterest & Reddit

Pinterest extends Open Graph with article:author and Rich Pin types. Reddit pulls og:title and og:image when a link is submitted, and uses the image as the post thumbnail. Both reward portrait or square imagery (2:3 to 1:1) over wide 1.91:1 banners.

Add Open Graph meta tags to your framework

Drop these snippets into your project to wire up Open Graph tags in the most common stacks. Each example renders the same minimum-viable set on the server so crawlers see them on first paint.

Next.js (App Router)

ts
// app/page.tsx
export const metadata = {
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A short, compelling summary of the page.',
    url: 'https://example.com/article',
    siteName: 'Example',
    images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
    locale: 'en_US',
    type: 'website'
  }
}

Nuxt 3

ts
<script setup lang="ts">
useSeoMeta({
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  ogTitle: 'Your Page Title',
  ogDescription: 'A short, compelling summary of the page.',
  ogImage: 'https://example.com/preview.png',
  ogUrl: 'https://example.com/article',
  ogType: 'website',
  ogLocale: 'en_US'
})
</script>

Astro

astro
---
const { title, description, image, url } = Astro.props
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="website" />
</head>

WordPress

php
// functions.php — works without an SEO plugin
add_action('wp_head', function () {
  if (!is_singular()) return;
  global $post;
  $img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
  printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
  printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
  printf('<meta property="og:image" content="%s" />', esc_url($img));
  printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
  echo '<meta property="og:type" content="article" />';
});

Frequently asked questions about Open Graph

Quick answers to the questions developers and content teams ask us most often when implementing Open Graph meta tags.

Do Open Graph tags help with SEO?
Open Graph tags are not a direct ranking signal in Google search, but they meaningfully improve indirect SEO outcomes. Better-looking previews drive higher click-through rates, more shares and more inbound links — all of which feed back into ranking. They also clarify a page's title, image and language to crawlers, reducing the chance that Google picks an unrelated thumbnail or generates its own snippet.
What is the difference between Open Graph and Twitter Cards?
Open Graph is the cross-platform standard. Twitter Cards are X's parallel format with its own twitter:* namespace. X falls back to Open Graph when Twitter-specific tags are missing, so for most sites it is enough to publish Open Graph plus a single twitter:card declaration to opt into the large image preview.
What is the recommended Open Graph image size?
1200×630 pixels (a 1.91:1 ratio) is the safe default — it satisfies Facebook, LinkedIn, X large cards, Slack and Discord without cropping. Keep the file under 1 MB so WhatsApp and iMessage will fetch it. If your audience is heavily Pinterest-driven, supply an additional portrait 1000×1500 image.
Why is my preview showing the old image after I changed it?
Every major platform caches Open Graph data. Facebook, LinkedIn and X each refresh on a different schedule (anywhere from minutes to a week). Use Facebook's Sharing Debugger, LinkedIn's Post Inspector and X's Card Validator to force a re-scrape, and add a cache-busting query string to og:image when you replace an image at the same URL.
Do single-page apps (SPAs) need server-side rendering for Open Graph?
Yes for almost every social platform. WhatsApp, LinkedIn, Slack, Discord and Telegram do not execute JavaScript when crawling a URL, so meta tags rendered only on the client are invisible to them. Use SSR (Next.js, Nuxt, Astro), static generation, or a dedicated pre-rendering service to make sure the tags are present in the initial HTML response.
What happens if a page has no Open Graph tags at all?
The platform falls back to whatever it can scrape: the <title>, the meta description and the first sizeable image it finds in the document. Results are unpredictable — often the wrong image, a truncated title or no preview at all. Adding even three tags (og:title, og:description, og:image) eliminates the guesswork.
Are Open Graph tag names case-sensitive?
Yes. Use lowercase exactly as defined by the protocol — og:title, not OG:Title. Mixed-case property names are silently ignored by most crawlers, which is one of the most common reasons a preview suddenly stops working after a refactor.
Which tools can I use to debug Open Graph tags?
Beyond OpenGraph.dev's preview, each platform offers its own validator: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), X Cards documentation under developer.x.com, Pinterest Rich Pins Validator and Telegram's @WebpageBot for clearing its cache.