Skip to Content

What is Open Graph?

image

Definition​

Open Graph Protocol is a metadata protocol developed by Facebook in 2010 that controls how web pages are displayed when shared on social media. Simply put, it's an HTML meta tag that predefines the title, description, and image that appear when you share a blog link on Facebook, KakaoTalk, LinkedIn, etc.

Using Open Graph, you can turn your web page into an 'object' for social media. For example, when you share a blog post, instead of just showing a URL, an attractive thumbnail image appears with the title and summary description beautifully displayed in a card format. This significantly increases click-through rates and has become a core element of social media marketing.

Open Graph is implemented with <meta property="og:xxx"> format tags in the <head> section. Although it started with Facebook, it's now adopted as a standard by most social platforms including Twitter (X), LinkedIn, Slack, KakaoTalk, and Line. Without Open Graph, social platforms will arbitrarily extract content from your page, potentially displaying unintended images or text.

Features​

  • Social Media Optimization: Precisely control titles, descriptions, and images when sharing links to significantly improve click-through rates. Research shows that links with Open Graph images see up to 200% higher engagement.
  • Standard Protocol: Developed by Facebook but now a de facto industry standard supported by almost all social platforms. Set it once and it works across multiple platforms.
  • Simple Implementation: Not technically complex as you only need to add meta tags to the HTML <head> section. Anyone can easily apply it without programming knowledge.
  • Debugging Tools Available: Facebook, LinkedIn, and others provide official debugging tools to test and preview Open Graph tags.
  • Useful for Search Engines: Open Graph information is also referenced by search engines, indirectly helping with SEO. Particularly effective for image search optimization.

How to Use​

Here's how to effectively utilize Open Graph.

Step 1: Add Required Open Graph Tags Add basic Open Graph tags to the <head> section of your web page. At minimum, you must include four tags: og:title, og:type, og:url, and og:image. These are the four core elements of Open Graph.

<head>
  <meta property="og:title" content="Complete Blog SEO Optimization Guide">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/seo-guide">
  <meta property="og:image" content="https://zero-coke.com/images/seo-thumbnail.jpg">
</head>

Step 2: Add Optional Tags Add description, site name, locale, etc. to provide richer information. og:description is particularly important and should contain compelling copy that encourages clicks.

<meta property="og:description" content="Step-by-step blog SEO optimization methods that even beginners can easily follow.">
<meta property="og:site_name" content="Zero-Coke Blog">
<meta property="og:locale" content="en_US">

Step 3: Image Optimization The most important element in Open Graph is the image. Thumbnail images determine the first impression, so choose carefully. Facebook recommends 1200x630px, with a minimum of 600x314px. Keep file size under 8MB.

<meta property="og:image" content="https://zero-coke.com/images/thumbnail.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="SEO Optimization Guide Thumbnail">

Step 4: Content Type-Specific Additional Tags For blog posts (articles), you can provide additional information such as author, publication date, and section. This helps display richer information in news feeds.

<meta property="article:author" content="John Doe">
<meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="Blog">
<meta property="article:tag" content="SEO">

Step 5: Debug and Test After adding tags, always test them. Enter your URL into the Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) to preview how Open Graph will be displayed. Fix any errors immediately.

Step 6: Cache Refresh If you've changed the Open Graph for an already shared URL, you need to refresh the social platform's cache. Click the "Scrape Again" button in the Facebook Sharing Debugger to update to the latest information. Each platform provides similar tools.

Examples​

Example 1: Basic Open Graph for Blog Post

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>What are Backlinks? SEO Beginner's Guide</title>

  <!-- Basic Open Graph Tags -->
  <meta property="og:title" content="What are Backlinks? Complete Guide for SEO Beginners">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/what-is-backlink">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-guide.jpg">
  <meta property="og:description" content="Explains the definition, importance, and acquisition methods of backlinks in a way that even beginners can easily understand.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="en_US">

  <!-- Article-Related Additional Tags -->
  <meta property="article:author" content="John Doe">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:modified_time" content="2024-03-23T14:30:00+09:00">
  <meta property="article:section" content="SEO">
  <meta property="article:tag" content="Backlinks">
  <meta property="article:tag" content="SEO">
  <meta property="article:tag" content="Search Engine Optimization">
</head>
<body>
  <!-- Page Content -->
</body>
</html>

Example 2: Open Graph with Image Optimization

<head>
  <!-- Basic Information -->
  <meta property="og:title" content="2024 Digital Marketing Trends">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/marketing-trends-2024">

  <!-- Detailed Image Information -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="2024 Digital Marketing Trends Infographic">

  <!-- Multiple Images (Platform Chooses) -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-square.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">

  <!-- Additional Information -->
  <meta property="og:description" content="Analyzes 2024 digital marketing trends to watch including AI, influencer marketing, and short-form content.">
  <meta property="og:site_name" content="Marketing Insights">
</head>

Example 3: E-commerce Product Page

<head>
  <!-- Product Basic Information -->
  <meta property="og:title" content="Premium Wireless Bluetooth Earbuds - XYZ-2000">
  <meta property="og:type" content="product">
  <meta property="og:url" content="https://shop.example.com/products/xyz-2000">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-main.jpg">
  <meta property="og:description" content="High-quality wireless earbuds with noise canceling. Up to 30 hours playback.">

  <!-- Product-Specific Information -->
  <meta property="product:price:amount" content="129.00">
  <meta property="product:price:currency" content="USD">
  <meta property="product:availability" content="in stock">
  <meta property="product:condition" content="new">
  <meta property="product:brand" content="TechSound">
  <meta property="product:retailer_item_id" content="XYZ2000-BLK">

  <!-- Additional Images -->
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-side.jpg">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-case.jpg">
</head>

Example 4: Video Content

<head>
  <!-- Video Basic Information -->
  <meta property="og:title" content="Complete Guide to Blog Monetization (2024 Latest)">
  <meta property="og:type" content="video.other">
  <meta property="og:url" content="https://example.com/video/blog-monetization">
  <meta property="og:image" content="https://example.com/video/thumbnails/blog-monetization.jpg">
  <meta property="og:description" content="Earn $1000/month with your blog. We'll show you everything from AdSense to affiliate marketing and digital product sales.">

  <!-- Video-Specific Information -->
  <meta property="og:video" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:secure_url" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:type" content="video/mp4">
  <meta property="og:video:width" content="1280">
  <meta property="og:video:height" content="720">
  <meta property="video:duration" content="1200">
  <meta property="video:release_date" content="2024-03-23T09:00:00+09:00">

  <!-- YouTube Embed URL -->
  <meta property="og:video" content="https://www.youtube.com/embed/abc123xyz">
  <meta property="og:video:type" content="text/html">
</head>

Example 5: Website Homepage

<head>
  <!-- Overall Website Information -->
  <meta property="og:title" content="Zero-Coke - Blog SEO Optimization Specialist Media">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zero-coke.com">
  <meta property="og:image" content="https://zero-coke.com/images/og-homepage.jpg">
  <meta property="og:description" content="We share expert knowledge about blog SEO, search engine optimization, and web development. Practical guides for everyone from beginners to experts.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="en_US">
  <meta property="og:locale:alternate" content="ko_KR">

  <!-- Social Media Profiles -->
  <meta property="og:see_also" content="https://twitter.com/zerocoke">
  <meta property="og:see_also" content="https://www.facebook.com/zerocoke">
  <meta property="og:see_also" content="https://www.instagram.com/zerocoke">
</head>

Pros and Cons​

Pros​

  • Dramatically Improved Click-Through Rates: Links with attractive thumbnails and descriptions have 2-3 times higher click-through rates than text-only links. The most effective way to increase social media traffic.

  • Enhanced Brand Image: Using consistent Open Graph images and descriptions builds a professional and trustworthy brand image. Well-designed thumbnails increase brand awareness.

  • Versatility and Compatibility: Set it once and it automatically applies to most platforms including Facebook, Twitter, LinkedIn, KakaoTalk, and Slack. No need to configure separately for each platform.

Cons​

  • Image Creation Burden: Requires design resources as you need to create appropriate Open Graph images for each page. Can be considerable work if you have many blog posts.

  • Cache Issues: Social platforms cache Open Graph information, so changes don't reflect immediately. Must manually refresh cache, and already shared links may not update.

  • Platform Differences: While most platforms support Open Graph, some prefer their own tags. For example, Twitter prioritizes Twitter Cards, so additional work may be needed for perfect optimization.

FAQ​

Q: What happens without Open Graph? A: Links can still be shared without Open Graph tags, but social platforms will arbitrarily extract information from the page. This can result in unintended images or text being displayed, or no thumbnail appearing at all. This significantly lowers click-through rates.

Q: What's the optimal Open Graph image size? A: Facebook recommends 1200x630px (1.91:1 aspect ratio). Minimum size is 600x314px; smaller sizes will degrade quality. Providing square images (1200x1200px) as well displays better across various platforms. File size should be under 8MB, and JPG or PNG formats are preferred.

Q: What's the difference between og:title and HTML title tag? A: The HTML <title> tag is the title displayed in browser tabs and search results, while og:title is the title displayed when shared on social media. They can be the same, but using shorter, more compelling titles for social media can be more effective. Example: <title> is "What are Backlinks? Definition, Features, Acquisition Methods Complete Guide | Zero-Coke", while og:title is "How to Boost Blog Rankings with Backlinks"

Q: I changed Open Graph but it's not updating. What do I do? A: Social platforms cache Open Graph information for performance. Click the "Scrape Again" button in the Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) to refresh the cache. LinkedIn uses Post Inspector (https://www.linkedin.com/post-inspector/), and Twitter has Card Validator. Already shared posts won't update, so important changes may require resharing.