How to Create Open Graph Tags

When someone pastes your URL into Facebook, LinkedIn, Slack, Discord, WhatsApp or iMessage, the platform fetches the page and builds a preview card. The title, description and image on that card come from Open Graph meta tags. Without them, platforms guess — often picking a logo, a cookie banner icon or the first paragraph of navigation text.

The protocol was created by Facebook and is documented at ogp.me. Nearly every link-preview system reads it, including X (Twitter) as a fallback for its own card tags.

The required properties

Open Graph tags are <meta> elements in the <head> that use the property attribute (not name). The protocol defines four required properties:

<meta property="og:title" content="How to Create Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/open-graph-tags/">
<meta property="og:image" content="https://example.com/images/og/open-graph-tags.png">

• og:title — the title as it should appear in the card. It can differ from your SEO <title>: drop the brand suffix and keep it under roughly 60–70 characters so it isn't truncated.
• og:type — website for home and general pages, article for posts and guides, product is used by some commerce integrations.
• og:url — the canonical URL. Shares of URL variants (with UTM parameters, for example) are consolidated to this URL, so it should match your rel="canonical".
• og:image — the preview image, as an absolute URL.

Strongly recommended additions:

<meta property="og:description" content="Write Open Graph tags that make shared links look right everywhere.">
<meta property="og:site_name" content="Utilo">
<meta property="og:locale" content="en_US">

The Open Graph generator produces this full set from a form, and the canonical URL generator helps keep og:url and the canonical tag consistent.

Image specifications

The image is what makes a share stand out, and it is where most problems occur.

Declare dimensions and alt text so platforms can render the card on the first share without downloading the image first:

<meta property="og:image" content="https://example.com/images/og/open-graph-tags.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="Diagram of a link preview card showing title, description and image">

If you're resizing an existing graphic, the aspect ratio calculator gives exact 1.91:1 dimensions.

Writing title and description copy

Open Graph copy is read in a feed, next to a person's comment, not on a results page where the user is already searching for something. That changes what works:

• Lead with the specific benefit or topic. “How to fix redirect loops in WordPress” is clearer in a feed than “Troubleshooting | Acme Blog”.
• Skip the brand suffix in og:title. The card already shows the domain, and og:site_name carries the brand where platforms display it.
• Keep og:description to one or two sentences — around 100–160 characters. LinkedIn and some chat apps hide it entirely on narrow screens, so the title must stand on its own.
• Match the page. A preview that promises something the page doesn't deliver hurts click-through on the next share.

You can reuse your SEO title and meta description as a starting point; the meta title generator and meta description generator help draft both.

Designing the image

Previews are often displayed at 500 pixels wide or less, and on phones far smaller. Design for that size, not for the 1200-pixel canvas: a short headline in large type, high contrast, and one recognisable visual element. Avoid tiny text and screenshots full of detail. For sites with many pages, a template that combines the page title with a branded background — generated at publish time by a plugin, a build step or an image service — keeps every share consistent without manual design work. Whatever you generate, give each page its own image URL so platform caches don't show the wrong one.

Article properties

With og:type set to article, you can add structured metadata about the piece. Use ISO 8601 dates:

<meta property="article:published_time" content="2026-10-01T09:00:00+00:00">
<meta property="article:modified_time" content="2026-10-05T14:30:00+00:00">
<meta property="article:author" content="https://example.com/about/jane-doe/">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="Open Graph">
<meta property="article:tag" content="Social media">

Repeat article:tag once per tag. These properties are used inconsistently across platforms, but they cost nothing and some (LinkedIn, for instance) display publish dates. For search engines, pair them with Article structured data — the article schema generator builds it.

Twitter/X card fallback

X reads its own twitter: tags first and falls back to Open Graph for title, description and image. The one tag it does need is the card type:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<!-- Optional: only if you want different copy on X -->
<meta name="twitter:title" content="A shorter title for X">

Note that Twitter tags use name, while Open Graph tags use property. Without twitter:card, X shows a small summary card. The Twitter card generator covers the remaining options.

How WordPress outputs Open Graph tags

WordPress core does not output Open Graph tags. They usually come from an SEO plugin — Yoast SEO, Rank Math, SEOPress, The SEO Framework and All in One SEO all generate them from the post title, excerpt or SEO description, and featured image, with per-post overrides in the editor sidebar.

• Run only one source. A theme or a second plugin (Jetpack, some social sharing plugins) adding its own tags creates duplicates, and platforms may pick the wrong ones. View the page source and search for og:image — there should normally be one set.
• Set a default image in the plugin's social settings so pages without a featured image still have a preview.
• Use featured images at 1200 × 630 or register an image size for it. The image size calculator helps plan crops.

If you're not using a plugin, a minimal theme implementation looks like this:

<?php
add_action( 'wp_head', function () {
    if ( ! is_singular() ) {
        return;
    }
    $post_id = get_queried_object_id();
    $image   = get_the_post_thumbnail_url( $post_id, 'full' );
    printf( '<meta property="og:title" content="%s">' . "\n", esc_attr( get_the_title( $post_id ) ) );
    echo '<meta property="og:type" content="article">' . "\n";
    printf( '<meta property="og:url" content="%s">' . "\n", esc_url( get_permalink( $post_id ) ) );
    printf( '<meta property="og:description" content="%s">' . "\n", esc_attr( wp_strip_all_tags( get_the_excerpt( $post_id ) ) ) );
    if ( $image ) {
        printf( '<meta property="og:image" content="%s">' . "\n", esc_url( $image ) );
    }
} );

Debugging and refreshing the cache

Platforms cache previews aggressively — often for days or weeks. After fixing tags, you need to ask each platform to scrape again:

• Facebook Sharing Debugger (developers.facebook.com/tools/debug) shows exactly what Facebook scraped, lists warnings, and has a “Scrape Again” button.
• LinkedIn Post Inspector (linkedin.com/post-inspector) fetches a fresh copy and updates the cached preview.
• X no longer offers a public card validator; post the link in a draft or private account to preview it. Adding a query string such as ?v=2 forces a fresh fetch.
• Slack and Discord also cache unfurls; changing the URL (a harmless query parameter) is the practical workaround.

You can see what a crawler receives with curl, using the Facebook crawler's user agent to catch bot-specific firewall rules:

curl -sL -A "facebookexternalhit/1.1" https://example.com/page/ | grep -i 'og:'

Common issues

• Relative image URLs. /images/og.png fails; it must be https://example.com/images/og.png.
• Wrong image picked. Usually caused by a missing og:image, duplicate tags, or an image smaller than the platform's minimum, which makes it fall back to another image on the page.
• Old preview after changes. The platform cache — re-scrape with the debuggers above. Also purge your page cache and CDN so crawlers don't get the stale HTML.
• Tags rendered by JavaScript. Most scrapers do not execute JavaScript. Tags added client-side in a single-page app are invisible to them; render them on the server or prerender the HTML.
• Blocked crawlers. Security plugins, Cloudflare bot rules or robots.txt rules can block facebookexternalhit, LinkedInBot or Twitterbot. See the robots.txt guide for how crawler rules work.
• Unescaped quotes in titles breaking the content attribute. Encode them as "; the HTML entity encoder helps.