Introduction

Open Graph Tags Explained

6 min read
View contents

Open Graph Tags: Control How Your Links Look on Social Media

Open Graph tags (OG tags) are HTML meta tags that control how your content appears when shared on social media platforms like Facebook, LinkedIn, Twitter, and WhatsApp. Without them, social platforms automatically choose what to display, often with unattractive results.

According to Web.dev’s official documentation on HTML metadata²·³, Open Graph tags are <meta> elements placed in the <head> of your HTML document to provide structured information to social platforms.

What are Open Graph tags?

Open Graph is a protocol created by Facebook in 2010 that allows web developers to control how their content is displayed on social networks. It works by adding special meta tags in your HTML <head>, using the property attribute instead of the traditional name attribute following HTML metadata best practices¹·³.

Basic example:

<head>
  <meta property="og:title" content="SEO Guide 2025" />
  <meta property="og:description" content="Learn the best SEO practices to rank your website on Google." />
  <meta property="og:image" content="https://uxr.cl/images/seo-guide-2025.jpg" />
  <meta property="og:url" content="https://uxr.cl/blog/seo-guide-2025" />
  <meta property="og:type" content="article" />
</head>

How it works:

  1. User shares your URL on Facebook/LinkedIn/Twitter
  2. Platform scrapes your page
  3. Reads the Open Graph tags
  4. Generates a preview card with your custom title, description, and image

Why are Open Graph tags important?

1. Control over presentation

Without Open Graph tags:

🔗 https://uxr.cl/blog/seo-guide-2025

[Random header image from site]
"Home - UXR Chile - User Experience Research"

With Open Graph tags:

🔗 https://uxr.cl/blog/seo-guide-2025

[Professional image optimized for social]
"SEO Guide 2025: 12 Strategies That Work"
"Learn the best SEO practices to rank your website..."

2. Improved CTR on social media

BuzzSumo data (2024):

  • Posts with optimized OG images get 2.3× more clicks
  • Custom OG titles improve CTR by 36%
  • Relevant descriptions increase engagement by 28%

3. Consistent branding

Open Graph tags ensure your brand looks professional and consistent across all social platforms, even when others share your content.

4. Referral traffic

Hootsuite Study (2024):

  • 78% of social media traffic comes from link sharing
  • Links with well-optimized OG tags generate 42% more referral traffic
  • Average time on site increases by 31% from social media

Essential Open Graph tags

1. og:title - Content title

<meta property="og:title" content="12 Link Building Strategies That Work in 2025" />

Best practices:

  • Ideal length: 60-90 characters
  • Should be clear and specific
  • Can differ from <title> tag: Optimize for social, not Google
  • Include benefit or value: “Complete Guide”, “Step by Step”, “2025”

Example:

<!-- Title tag (optimized for Google) -->
<title>Link Building 2025: Complete SEO Strategies Guide | UXR Chile</title>

<!-- OG title (optimized for social - more direct) -->
<meta property="og:title" content="12 Link Building Strategies That Actually Work" />

2. og:description - Content description

<meta property="og:description" content="Learn the most effective link building strategies for 2025. Includes guest posting, broken link building, and proven outreach templates." />

Best practices:

  • Ideal length: 150-200 characters
  • Should be persuasive and clear
  • Include implicit call-to-action: “Learn”, “Discover”, “Master”
  • Can differ from meta description

3. og:image - Preview image

<meta property="og:image" content="https://uxr.cl/images/blog/link-building-2025.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Link building strategies 2025 infographic" />

Important note: According to Web.dev’s metadata documentation¹, including og:image:alt is essential for accessibility, providing alternative text for the Open Graph image that helps users with screen readers.

Best practices:

  • Recommended size: 1200×630px (1.91:1 ratio)
  • Format: JPG or PNG (WebP not yet universally supported)
  • Maximum weight: < 1 MB (ideally < 300 KB)
  • Always use absolute URL: complete https://
  • Include og:image:alt for accessibility

Sizes by platform:

Platform Optimal Size Ratio
Facebook 1200×630px 1.91:1
LinkedIn 1200×627px 1.91:1
Twitter 1200×675px 16:9
WhatsApp 1200×630px 1.91:1

Tip: Use 1200×630px for universal compatibility.

4. og:url - Canonical content URL

<meta property="og:url" content="https://uxr.cl/blog/link-building-2025" />

Best practices:

  • Always use complete absolute URL
  • Should match canonical tag
  • No tracking parameters: ?utm_source=... don’t go here
  • Preferred version: HTTPS, without www if you don’t use it

5. og:type - Content type

<meta property="og:type" content="article" />

Common types:

  • website: Main page, homepage
  • article: Blog posts, articles
  • product: Product pages (e-commerce)
  • video.movie: Video content
  • book: Books, e-books

For articles, add additional tags:

<meta property="og:type" content="article" />
<meta property="article:author" content="John Doe" />
<meta property="article:published_time" content="2025-12-08T10:00:00Z" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="Link Building" />

Complete implementation example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Traditional Title and Meta Description -->
  <title>Link Building 2025: Complete Guide | UXR Chile</title>
  <meta name="description" content="Effective link building strategies for 2025. Step-by-step guide with real examples.">

  <!-- Open Graph Tags -->
  <meta property="og:title" content="12 Link Building Strategies That Work in 2025" />
  <meta property="og:description" content="Learn the most effective link building strategies. Includes guest posting, broken link building, and outreach templates." />
  <meta property="og:image" content="https://uxr.cl/images/blog/link-building-2025.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Link building strategies infographic" />
  <meta property="og:url" content="https://uxr.cl/blog/link-building-2025" />
  <meta property="og:type" content="article" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:site_name" content="UXR Chile" />

  <!-- Article-specific tags -->
  <meta property="article:published_time" content="2025-12-08T10:00:00Z" />
  <meta property="article:author" content="UXR Chile Team" />
  <meta property="article:section" content="SEO" />
</head>
<body>
  <!-- Page content -->
</body>
</html>

How to test your Open Graph tags

1. Facebook Sharing Debugger

URL: https://developers.facebook.com/tools/debug/

How to use:

  1. Paste your URL
  2. Click “Debug”
  3. See preview of how it will look on Facebook
  4. Click “Scrape Again” if you updated tags

What it verifies:

  • All detected OG tags
  • Errors or warnings
  • Exact card preview
  • Cache information (when last updated)

2. LinkedIn Post Inspector

URL: https://www.linkedin.com/post-inspector/

What it verifies:

  • LinkedIn-specific OG tags
  • Image optimized for LinkedIn
  • Preview of how it will look when shared

3. Twitter Card Validator

URL: https://cards-dev.twitter.com/validator

Note: Twitter now primarily uses twitter: tags, but also reads OG tags as fallback.

4. UXR SEO Analyzer Extension

Our Chrome extension automatically checks:

  • Presence of essential OG tags
  • Correct image sizes
  • Absolute vs relative URLs
  • Match with canonical tags
  • Visual preview of how it will look

Common mistakes and how to avoid them

Mistake 1: Using relative URLs in og:image

<!-- ❌ BAD: Relative URL -->
<meta property="og:image" content="/images/blog/post.jpg" />

<!-- ✅ GOOD: Absolute URL -->
<meta property="og:image" content="https://uxr.cl/images/blog/post.jpg" />

Why it’s bad: Facebook/LinkedIn can’t download the image without the complete URL.

Mistake 2: Image too small

<!-- ❌ BAD: Very small image -->
<meta property="og:image" content="https://uxr.cl/logo-200x200.jpg" />

<!-- ✅ GOOD: Recommended size -->
<meta property="og:image" content="https://uxr.cl/og-image-1200x630.jpg" />

Why it’s bad: Small images look pixelated or don’t display.

Mistake 3: Not clearing cache after changes

Problem: You update your OG tags but Facebook still shows the old version.

Solution: Use Facebook Sharing Debugger and click “Scrape Again” to force update.

Mistake 4: Forgetting og:url

<!-- ❌ BAD: Without og:url -->
<meta property="og:title" content="My Article" />
<meta property="og:description" content="Description..." />

<!-- ✅ GOOD: With og:url -->
<meta property="og:title" content="My Article" />
<meta property="og:description" content="Description..." />
<meta property="og:url" content="https://uxr.cl/blog/my-article" />

Why it’s bad: Without og:url, platforms may use URLs with tracking parameters, causing share duplication.

Mistake 5: Same OG for all pages

<!-- ❌ BAD: Identical OG tags on all pages -->
<meta property="og:title" content="UXR Chile - User Research" />
<meta property="og:image" content="https://uxr.cl/logo.jpg" />

Solution: Each page should have unique OG tags relevant to its specific content.

<<<<<<< HEAD

RAG References

This article was enhanced using authoritative sources identified through systematic knowledge base searches:

References

This article cites the following authoritative sources:

24a07d01237e8d2ce45f0032ef83094634b50223

[1] web.dev: Metadata - Social Media Tags (d3bb1787-fec4-4bf4-a625-f86c0c5fe6fc) https://web.dev/learn/html/metadata Comprehensive guide to Open Graph protocol and social media metadata. Appeared in 4 of 5 RAG searches with scores ranging from 0.771 to 1.124, demonstrating high relevance across multiple search queries.

[2] Vike: Head Tags - Framework Implementation (7be7d152-0e38-4f4c-a30c-13e88f1d20ea) https://vike.dev/head-tags Practical guidance for implementing Open Graph tags in modern SSR/SSG frameworks. Covers dynamic tag generation and runtime meta tag management for Vue, React, and other frameworks.

[3] Google Search Central: Structured Data (07c8d96c-c09f-45c4-b4ee-da63dbf6e620) https://developers.google.com/search/blog/ Official Google guidance on structured metadata including the relationship between Open Graph tags and search visibility. Provides authoritative context for social metadata implementation.

<<<<<<< HEAD RAG Coverage: GOOD - Combines W3C-aligned best practices (web.dev), modern framework implementation (Vike), and official Google guidance. 3 sources across 3 knowledge bases with strong coverage of OG fundamentals, practical implementation, and SEO context.

24a07d01237e8d2ce45f0032ef83094634b50223

Next steps

Deepen your knowledge about social optimization:

External resources

Need to verify your Open Graph tags? Use our UXR SEO Analyzer extension for instant analysis of your tags and visual preview of how your content will look when shared.

Related articles

Related version

Detailed guide

Open Graph Optimization Guide

Open Graph tags are fundamental for maximizing CTR and engagement of your content on social media¹

Category hub

Hub

Basic Seo Fundamentals Hub

Every successful website is built on a foundation of solid SEO fundamentals

In the same category

Introduction

Title Tags Explained

Title tags are one of the most important on-page SEO elements according to official Google Search Central documentation

Introduction

Meta Descriptions Explained

Meta descriptions are text snippets that appear under your page title in Google search results