Implement Open Graph Tags — Control Your Preview on Facebook and Beyond

Why Open Graph Matters

What Open Graph Does

Open Graph is a protocol developed by Facebook that gives you control over how your content appears in social networks. Without correct meta tags, Facebook decides on its own which title, image, and description appear in the preview — and the result is rarely optimal.

With Open Graph tags, you define precisely how your page looks when it is shared. This applies not only to Facebook but also to LinkedIn, WhatsApp, and other platforms that use the protocol.

Technical Requirements

Your server must support gzip and deflate compression. Without these encodings, Facebook cannot correctly parse the tags. Most modern web hosts meet this requirement by default — check the server configuration if you are unsure.

Using Open Graph Tags Correctly

Basic Markup for Articles

Most shared content consists of blog posts, news, or guides. For these, use og:type="article". The markup goes into the <head> section of your page:

<meta property="og:title" content="Your concise page title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.yourdomain.com/path" />
<meta property="og:image" content="https://www.yourdomain.com/image.jpg" />
<meta property="og:description" content="Short, precise description in 1–2 sentences." />
<meta property="fb:app_id" content="YourAppID" />

The URL Must Be Canonical

In og:url, always use the clean, canonical URL — without UTM parameters, session IDs, or tracking appends. Facebook uses this URL as a unique reference.

The Title Should Have No Branding

Do not include a company name or brand addition in og:title. Write the title so it works without context. Optimal length is 60–90 characters.

The Description Highlights the Value

In og:description, write one to two sentences that summarize the content or clearly state the benefit. No keyword lists, no filler.

The Image Must Be Technically Sound

Use an image with 1200 × 628 pixels for og:image. This format is preferred by Facebook and appears sharp across all views. Smaller images get scaled and lose quality.

The Most Important Open Graph Properties at a Glance

Required Tags for Every Page

PropertyFunction`og:url`Canonical URL without parameters or tracking codes`og:title`Page title, concise and without branding`og:description`1–2 sentence summary that explains the benefit or content`og:image`Preview image, ideally 1200 × 628 pixels`og:type`Content type, e.g. `article`, `website`, `productfb:app_id`Facebook App ID for Insights and traffic analysis

Additional Tags for Extended Control

Depending on your content, you can use additional properties:

og:locale – Language and region, e.g. en_US
og:site_name – Name of your website (appears alongside the title)
article:published_time – Publication date for articles
article:author – Author profile on Facebook
og:video – Video URL if the content includes a video

Setting Up a Facebook App ID

Why You Need an App ID

The fb:app_id connects your website with Facebook Insights. There you can see how much traffic comes from Facebook, which content is being shared, and how users interact with your links.

Create an App ID

Go to the Facebook Developer Dashboard at https://developers.facebook.com
Create a new app (type: “Business” or “Consumer”)
Copy the App ID from the dashboard
Add it to the tag <meta property="fb:app_id" content="YourAppID" />

Validation and Testing

Check Your Open Graph Tags

Use the Facebook Sharing Debugger at https://developers.facebook.com/tools/debug . Enter your URL — the tool shows how Facebook reads the tags and highlights any errors.

Common Error Sources

Image URL is not publicly accessible (e.g., blocked by a firewall)
Server does not support gzip or deflate
Tags are not in the <head> section
Multiple tags of the same type without correct structure
Image is too small or in the wrong format

Refresh the Cache

Facebook caches Open Graph data. After making changes, use the Debugger to manually clear the cache and force the new preview.

Impact on Traffic and Click-Through Rate

Measurable Benefits of Optimized Previews

Correctly marked-up content consistently achieves higher click-through rates on Facebook. The preview image captures attention, the precise title generates interest, and the description provides context.

Longer Session Duration Through Accurate Expectations

Users who land on your page via an optimized preview already know what to expect. That reduces bounces and increases session duration — both signals that Google values positively.

Implementation in Common CMS Platforms

WordPress

Use plugins like Yoast SEO or Rank Math. Both offer fields for all key Open Graph properties. The tags are automatically inserted into the <head> section.

Without a Plugin: Manually in the Theme

Add the meta tags directly to your theme’s header.php. Use PHP variables to populate title, URL, and image dynamically:

<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />

Shopify, Wix, TYPO3

Most modern CMS platforms support Open Graph out of the box or through extensions. Check your system’s documentation — in most cases, enabling it in the settings is all that is required.

Checklist: Full Open Graph Implementation

All required tags (og:url, og:title, og:description, og:image, og:type) are set
Image is 1200 × 628 pixels and publicly accessible
URL is canonical and parameter-free
Server uses gzip and deflate compression
Facebook App ID is entered
Tags have been validated with the Facebook Debugger
Cache has been refreshed after changes

Conclusion: Open Graph tags are not optional extras. They control how your content appears in social networks and directly influence how many users click your links. The implementation is technically straightforward — and the results are measurable.

Implement Open Graph Tags