알레오 위키wiki
/Open Graph
📘Concept

Open Graph

최종 업데이트:

Definition

The Open Graph (OG) protocol is a meta tag standard that controls preview cards displayed when web pages are shared on SNS, messengers, and AI answer platforms.

Introduced by Facebook in 2010, it has become the de facto industry standard. Adding meta tags in the format property="og:..." in the HTML <head> enables consistent previews on Facebook, Twitter (X), LinkedIn, KakaoTalk, Slack, Discord, and most sharing platforms.

Official spec: https://ogp.me/

Summary

Open Graph 4 essential tags: og:title, og:description, og:image (1200×630px, absolute URL), og:url. Add og:type as an optional tag. Set uniquely on every page and periodically refresh cache with Facebook Sharing Debugger. No direct Google SEO impact, but significant indirect impact on social traffic, CTR, and brand consistency.

5 Core Open Graph Tags

<meta property="og:title" content="Page title (within 60 characters)" />
<meta property="og:description" content="Page description (100-150 characters)" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page/" />
<meta property="og:type" content="article" />

og:title

The title displayed in share previews. May match the title tag, but can be set separately with more click-driving copy for SNS sharing. Within 60 characters is recommended. See Title Tag for details.

og:description

The description shown below the preview card. May match the meta description or be set separately with SNS-specific copy. 100–150 characters is recommended. See Meta Description for details.

og:image

The most visually important element in preview cards. Must use absolute URLs (https://...). Recommended size is 1200×630px (aspect ratio approximately 1.91:1). Images too small (under 600px) may not display or look low quality on some platforms. See How to Write Image Alt Text for details.

og:url

Specifies the canonical URL of the page. Matching the canonical tag is recommended. When the same content is accessible from multiple URLs, specifying the canonical URL with og:url concentrates social shares on one URL. See Canonical Tag for details.

og:type

Specifies page type. Main values: website (default), article (blog posts/news), product, video.movie, music.song.

Twitter Card Additional Settings

Twitter (X) supports fallback to OG tags but adding Twitter Card-specific tags enables more precise preview control.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<meta name="twitter:site" content="@account" />

twitter:card values: summary (small card), summary_large_image (large image card, recommended), app (app card). If OG tags exist without Twitter Card tags, Twitter automatically uses OG values as fallback.

5 Values of Open Graph

1. SNS Share Preview Control

Without og:image, og:title, and og:description, platforms arbitrarily select images and text. Unattractive previews reduce sharing and clicks.

2. KakaoTalk, Slack, and Discord Previews

A significant portion of web sharing now occurs through messengers rather than SNS. KakaoTalk, Slack, and Discord all generate preview cards based on OG tags.

3. Indirect CTR Improvement

Attractive og:image and clear og:title increase click intent when shared. Increased SNS referral traffic → social signals → long-term domain authority improvement. See Click-Through Rate for details.

4. Brand Consistency

The same image and message display across all channels, strengthening brand recognition.

5. Google Discover and AI Platform Previews

Google Discover feed and some AI answer platforms (Perplexity, etc.) use OG information for source previews. See Google Discover for details.

5 Principles for Writing Open Graph

Principle 1: og:image at 1200×630px Absolute URL

Official recommended size for Facebook, LinkedIn, and Slack. Must use absolute URLs (https://); relative URLs (/og-image.jpg) may not be recognized on some platforms.

Principle 2: og:title Within 60 Characters

Most platforms truncate titles exceeding 60–70 characters.

Principle 3: og:description 100–150 Characters

Excessively long descriptions may be truncated or not displayed.

Principle 4: og:url Matches Canonical

If og:url differs from canonical, social share statistics are split. Always match to the canonical URL.

Principle 5: Unique OG Settings on Every Page

Using the same OG image and title from the homepage on all subpages fails to differentiate content. Use CMS auto-generation features (e.g., Next.js dynamic og:image generation) to set uniquely per page.

Open Graph Validation Tools

Facebook Sharing Debugger

Enter a URL at developers.facebook.com/tools/debug/ to instantly preview OG tags. If cache remains after image updates, use "Scrape Again" to force refresh.

LinkedIn Post Inspector

At linkedin.com/post-inspector/, verify LinkedIn share previews and refresh cache.

OpenGraph.xyz

Free OG tag validation site where entering a URL previews how it appears on each platform.

4 Common Open Graph Mistakes

Mistake 1: Missing og:image

The most common mistake. Without og:image, platforms display gray empty areas or arbitrary images. Lack of visual appeal significantly lowers CTR.

Mistake 2: Relative URL for og:image

Using relative URLs like <meta property="og:image" content="/images/og.jpg" /> often prevents Facebook, Twitter, etc. crawlers from finding the image. Always use absolute URLs in the format https://example.com/images/og.jpg.

Mistake 3: Same OG Information on All Pages

Using homepage OG tags unchanged on all pages. Use unique titles, descriptions, and images reflecting individual page content.

Mistake 4: Not Refreshing Cache After Image Changes

SNS platforms cache OG images. If old images continue displaying after updates, force refresh with "Scrape Again" in Facebook Sharing Debugger and LinkedIn Post Inspector.

Open Graph and AEO

Use on AI Answer Platforms

AI search platforms like Perplexity tend to use OG images and titles when displaying source links. Attractive OG information helps drive clicks on AI citation sources.

Google Discover Feed

Google Discover uses og:image as content feed preview images. Pages with attractive, high-quality images (minimum 1200px width) are favorable for Discover exposure. See Google Discover for details.

Application in the Korean Market

KakaoTalk Share Optimization

KakaoTalk, Korea's top messenger, uses the OG standard directly. KakaoTalk recommends og:image ratios of 1:1 or 800×400px, but standard 1200×630px also works fine. KakaoTalk sharing is a major traffic source for Korean businesses, making OG tag optimization high ROI.

Naver Cafe and Blog Sharing

Naver Cafe and Blog also recognize OG tags when sharing external links. However, Naver's own services support additional meta tags, so Naver SEO optimization may require settings beyond OG tags. See URL Slug for details.

LINE Sharing

LINE, primarily used in Japan and Southeast Asia, also supports the OG standard. OG optimization helps Korean companies targeting Japan, Thailand, and other Southeast Asian markets through LINE sharing.

Frequently Asked Questions

Q. Do Open Graph tags directly affect Google search rankings?
A. Google has officially stated OG tags are not used as direct ranking factors. However, increased SNS sharing through OG tags → increased traffic → improved user behavior signals → indirect SEO impact is a possible path. og:image quality affects exposure in Google Discover.

Q. Can og:title differ from the title tag?
A. Yes. OG tags are a separate optimization layer for SNS sharing. Title tags focus on SEO and SERP optimization; OG tags focus on social sharing optimization. However, if too different, users may feel confused, so keep core messages consistent.

Q. I applied og:image but KakaoTalk keeps showing the old image.
A. SNS platforms cache OG images. After changing images, running "Scrape Again" in Facebook Sharing Debugger refreshes on most platforms. KakaoTalk may take time for natural cache expiration.

Q. Should I use Article or Website type?
A. Use website for homepages and category pages; article for blog posts and news articles. Setting additional properties like og:article:published_time and og:article:author with article type enables richer information display on some platforms.

Q. What happens if I don't set og:image?
A. Platforms automatically select the first image on the page or display text-only cards without images. This is visually unattractive and significantly lowers CTR, so og:image is practically essential.

Sources

이 페이지를 참조하는 항목

관련 항목

📘Concept
Click-Through Rate (CTR)
CTR (Click-Through Rate) is the ratio of actual clicks to search result impressions (clicks ÷ impressions × 100) — a core metric showing SEO content appeal and an indirect ranking signal.
📘Concept
Google Discover
Google Discover is a personalized content feed on mobile that surfaces articles based on user interests — a traffic channel distinct from search, driven by content quality and E-E-A-T rather than keywords.
📘ConceptPillar
What Is AEO?
AEO is the practice of optimizing content so AI answer engines cite it.
📘ConceptPillar
Canonical Tag
A canonical tag is an HTML meta tag that tells search engines 'this URL is the representative version' when duplicate or similar content exists across multiple URLs. It resolves duplicate content problems and concentrates PageRank on the canonical URL—a core on-page SEO tool.
📙How-to
How to Write Image Alt Text
Image alt text is alternative text for images for visually impaired users. It also serves as a signal for SEO and LLM image meaning recognition.
📘Concept
Meta Description
A meta description is a page summary tag displayed in search results. It is not a direct ranking signal, but it influences click-through rate (CTR).
📘ConceptPillar
Title Tag
A title tag is the title element in the HTML head—a core on-page SEO signal that identifies pages in search results and AI answers.
📘ConceptPillar
URL Slug
A URL slug is the string forming the path after the domain in a web page address. SEO best practices include keyword inclusion, hyphen use, lowercase, and short, clear structure.

이런 항목도 있어요

📘Concept
Meta Description
A meta description is a page summary tag displayed in search results. It is not a direct ranking signal, but it influences click-through rate (CTR).
📘ConceptPillar
Title Tag
A title tag is the title element in the HTML head—a core on-page SEO signal that identifies pages in search results and AI answers.
📘ConceptPillar
Canonical Tag
A canonical tag is an HTML meta tag that tells search engines 'this URL is the representative version' when duplicate or similar content exists across multiple URLs. It resolves duplicate content problems and concentrates PageRank on the canonical URL—a core on-page SEO tool.
📘ConceptPillar
URL Slug
A URL slug is the string forming the path after the domain in a web page address. SEO best practices include keyword inclusion, hyphen use, lowercase, and short, clear structure.
이 페이지가 도움이 됐나요?