Craft CMS Open Graph Tags: Fix OG Images and Social Previews

How to add og:title, og:image, og:description and Twitter card tags in Craft CMS — using SEOmatic plugin or custom Twig templates.

Option 1: SEOmatic plugin (recommended)

SEOmatic by nystudio107 is the de-facto OG/SEO plugin for Craft CMS. It provides a GUI for default OG settings, section-level overrides, and automatic OG image transforms. Install it via the Craft Plugin Store or Composer:

composer require nystudio107/craft-seomatic

Once installed, add this single line to your Twig layout:

{# templates/_layouts/base.twig #}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  {{ seomatic.tag.render() }}
  {{ seomatic.link.render() }}
  {{ seomatic.script.render() }}
  {{ seomatic.title.render() }}
  {{ seomatic.jsonLd.render() }}
</head>
<body>
  {% block content %}{% endblock %}
</body>
</html>

SEOmatic automatically pulls the entry title, summary, and featured image for OG tags. In the CP → SEOmatic → Content SEO, configure per-section defaults including OG image transforms (recommended: 1200×630, JPEG).

SEOmatic: entry-level overrides

In your entry template, you can override SEOmatic values for a specific entry:

{# Override og:title and og:description for this entry #}
{% do seomatic.meta.seoTitle(entry.customSeoTitle ?? entry.title) %}
{% do seomatic.meta.seoDescription(entry.customSeoDesc ?? entry.summary) %}
{% do seomatic.meta.seoImage(entry.featuredImage.one().url ?? '') %}

{# Still call render() in the head #}

Option 2: Manual Twig OG tags

If you prefer not to use a plugin, add OG tags directly in your Twig layout. Use Craft's image transform feature to generate correctly-sized OG images:

{# templates/_layouts/base.twig #}
{% set ogTitle = entry.seoTitle ?? entry.title ?? siteName %}
{% set ogDesc = entry.seoDescription ?? entry.summary ?? siteDescription %}

{# Generate an OG-optimized image transform #}
{% if entry.featuredImage | length %}
  {% set ogImage = entry.featuredImage.one().getUrl({
    width: 1200,
    height: 630,
    mode: 'crop',
    format: 'jpg',
    quality: 85
  }) %}
{% else %}
  {% set ogImage = siteUrl ~ 'assets/og-default.jpg' %}
{% endif %}

<head>
  <title>{{ ogTitle }}</title>
  <meta property="og:title"       content="{{ ogTitle | escape }}" />
  <meta property="og:description" content="{{ ogDesc | escape }}" />
  <meta property="og:image"       content="{{ ogImage }}" />
  <meta property="og:url"         content="{{ craft.app.request.absoluteUrl }}" />
  <meta property="og:type"        content="{% if entry.type == 'article' %}article{% else %}website{% endif %}" />
  <meta name="twitter:card"       content="summary_large_image" />
  <meta name="twitter:title"      content="{{ ogTitle | escape }}" />
  <meta name="twitter:description"content="{{ ogDesc | escape }}" />
  <meta name="twitter:image"      content="{{ ogImage }}" />
</head>

Common Craft CMS OG issues

  • OG image too large: Craft image transforms help — set width: 1200, height: 630 and format to JPEG.
  • Missing OG image on entries without a featured image: Always set a default fallback image URL in your template.
  • Stale preview after edit: Social platforms cache OG data. Use the Facebook Debugger or Twitter Card Validator to force a re-scrape.
  • SEOmatic fields not showing in CP: Make sure SEOmatic is enabled in Settings → Plugins and that the field layout is attached to the section.

Verify your Craft CMS OG tags

After updating your Craft templates or SEOmatic config, paste your URL into OGFixer to see exactly how Twitter/X, Slack, Discord, and LinkedIn will render your link previews.