guide

Open Graph Best Practices for Developers

By SoftVoyagers 7 min read

What is the Open Graph Protocol?

The Open Graph protocol, originally created by Facebook in 2010, is a set of meta tags that control how your web pages appear when shared on social media platforms. When someone pastes a URL into Facebook, Twitter, LinkedIn, Slack, Discord, or iMessage, these platforms read your OG tags to build the rich preview card.

Without proper OG tags, platforms either show a blank card or try to guess what to display — often with poor results. With the right tags, you control exactly how your content is presented, driving higher click-through rates and more traffic to your site.

Essential OG Tags Every Page Needs

Here are the must-have Open Graph tags for every public page on your website:

The Core Four

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description of your page in 1-2 sentences.">
<meta property="og:image" content="https://yoursite.com/images/og-image.png">
<meta property="og:url" content="https://yoursite.com/page">

These four tags are the minimum for a good-looking social card. Let's break down the best practices for each:

og:title

  • Keep it under 60 characters — Facebook truncates titles longer than this
  • Don't duplicate your HTML <title> — The OG title can be different and more compelling
  • Skip the site name — Use og:site_name separately instead of appending "| MySite" to every title
  • Front-load keywords — Put the most important words first since truncation cuts from the right

og:description

  • Aim for 120-160 characters — Long enough to be informative, short enough to display fully
  • Include a call to action — "Learn how to...", "Discover why...", "Get the free guide to..."
  • Don't repeat the title — Use the description to add context the title doesn't cover
  • Write for humans, not bots — This text appears directly in the social card

og:image

  • Use 1200x630 pixels (1.91:1 aspect ratio) — The universal standard across platforms
  • Use absolute URLs — https://yoursite.com/images/og.png, never a relative path
  • Keep file size under 5MB — Platforms may reject or timeout on larger images
  • Generate dynamically — Use OGForge to create unique images per page automatically

You can generate OG images on the fly:

curl "https://ogforge.dev/api/v1/generate?title=Your+Page+Title&theme=dark" --output og.png

og:url

  • Use the canonical URL — This should match your <link rel="canonical"> tag
  • Include the protocol — Always use https://, never a protocol-relative URL
  • Normalize trailing slashes — Pick one format and be consistent

Additional OG Tags Worth Adding

Beyond the core four, these tags improve your social cards:

<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image for accessibility">

For Blog Posts and Articles

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-03-23T00:00:00Z">
<meta property="article:author" content="Author Name">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="web-development">

Twitter Card Tags

Twitter has its own card system that coexists with Open Graph. While Twitter will fall back to OG tags, having explicit Twitter tags gives you more control:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your description here.">
<meta name="twitter:image" content="https://yoursite.com/images/og-image.png">
<meta name="twitter:site" content="@yourhandle">

Key difference: Twitter uses name instead of property, and twitter:card has no OG equivalent. The summary_large_image card type displays the full-width image above the text — always prefer this over summary for content with images.

Common Pitfalls to Avoid

1. Using Relative URLs for Images

<!-- Wrong -->
<meta property="og:image" content="/images/og.png">

<!-- Correct -->
<meta property="og:image" content="https://yoursite.com/images/og.png">

Platforms fetch your OG image from their servers, not from the browser. They need an absolute URL to find the image.

2. Forgetting Cache Invalidation

Facebook and LinkedIn cache OG data aggressively. If you update your tags, changes won't appear immediately. Use these tools to force a refresh:

  • Facebook: Sharing Debugger — click "Scrape Again"
  • LinkedIn: Post Inspector — re-inspect the URL
  • Twitter: Changes usually appear within minutes

3. Same OG Image Across All Pages

Using one generic image for your entire site means every shared link looks identical. Generate unique images per page using the OGForge API:

<meta property="og:image" content="https://ogforge.dev/api/v1/generate?title=<%= page.title %>&theme=dark">

4. Missing og:type

Without og:type, platforms may not categorize your content correctly. Use website for homepages and article for blog posts.

5. Broken Image URLs

If your OG image returns a 404, platforms show a blank card. Always verify your image URLs are accessible from external servers (not behind authentication or localhost).

Validating Your OG Tags

Before deploying, always validate your meta tags. Use the LinkMeta API to extract and check all OG tags programmatically:

curl "https://linkmeta.dev/api/v1/extract?url=https://yoursite.com&fields=title,description,openGraph,twitter"

This returns all discovered meta tags in structured JSON, letting you verify everything is correct before sharing.

For a complete validation with scoring and platform readiness checks, use LinkMeta's validate endpoint:

curl "https://linkmeta.dev/api/v1/validate?url=https://yoursite.com"

Framework-Specific Implementation

React (with React Helmet)

import { Helmet } from 'react-helmet';

function PageHead({ title, description, image, url }) {
  return (
    <Helmet>
      <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" />
      <meta name="twitter:card" content="summary_large_image" />
    </Helmet>
  );
}

Next.js (App Router)

export function generateMetadata({ params }) {
  return {
    openGraph: {
      title: 'Page Title',
      description: 'Page description',
      images: ['https://ogforge.dev/api/v1/generate?title=Page+Title'],
      url: `https://yoursite.com/${params.slug}`,
    },
    twitter: {
      card: 'summary_large_image',
    },
  };
}

HTML (Static Sites)

For static HTML pages, simply add the meta tags to your <head>:

<head>
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Description">
  <meta property="og:image" content="https://ogforge.dev/api/v1/generate?title=Page+Title&theme=dark">
  <meta property="og:url" content="https://yoursite.com/page">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Your Site">
  <meta name="twitter:card" content="summary_large_image">
</head>

OG Tags Checklist

Use this checklist before launching any page:

  • og:title is set and under 60 characters
  • og:description is set and under 160 characters
  • og:image points to an absolute HTTPS URL with a 1200x630 image
  • og:url matches the canonical URL
  • og:type is set (website or article)
  • og:site_name identifies your brand
  • twitter:card is set to summary_large_image
  • All image URLs are publicly accessible (not behind auth)
  • Tested with Facebook Sharing Debugger
  • Tested with Twitter Card Validator
  • Validated with LinkMeta

Tools for OG Image Workflow

Tool Purpose Link
OGForge Generate OG images via API ogforge.dev
LinkMeta Validate OG tags & metadata linkmeta.dev
QRMint Generate QR codes for sharing qrmint.dev
LinkShrink Shorten URLs for tracking linkshrink.dev
PageShot Capture page screenshots pageshot.site

All tools are part of the SoftVoyagers ecosystem — free, no signup, no API keys.

Generate your first OG image now — try the interactive playground or read the API documentation.

open-graphseosocial-mediabest-practicesmeta-tags
Share this article: Twitter LinkedIn
← Back to Blog
Part of the SoftVoyagers Ecosystem
LinkMeta PageShot PDFSpark OGForge LinkShrink Faktuj QRMint FreeKit PismoSzyteNaMiarę Kalkuluj MojeCV