CodeIgniter Open Graph Tags: Add OG Meta to Your CI App

How to add og:title, og:image, og:description, and Twitter card meta tags to CodeIgniter 4 applications using views, layouts, and dynamic controller data.

OG tags in CodeIgniter 4 views

CodeIgniter 4 uses a header/footer view pattern. Add OG meta tags to your header view using data passed from the controller:

<?php // app/Views/partials/head.php ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><?= esc($pageTitle ?? 'My App') ?></title>
  <meta name="description" content="<?= esc($pageDescription ?? 'Default description.') ?>" />

  <!-- Open Graph -->
  <meta property="og:title"       content="<?= esc($ogTitle ?? $pageTitle ?? 'My App') ?>" />
  <meta property="og:description" content="<?= esc($ogDescription ?? $pageDescription ?? 'Default description.') ?>" />
  <meta property="og:image"       content="<?= esc($ogImage ?? base_url('images/default-og.png')) ?>" />
  <meta property="og:url"         content="<?= esc($ogUrl ?? current_url()) ?>" />
  <meta property="og:type"        content="<?= esc($ogType ?? 'website') ?>" />
  <meta property="og:site_name"   content="My App" />

  <!-- Twitter / X -->
  <meta name="twitter:card"        content="summary_large_image" />
  <meta name="twitter:title"       content="<?= esc($ogTitle ?? $pageTitle ?? 'My App') ?>" />
  <meta name="twitter:description" content="<?= esc($ogDescription ?? $pageDescription ?? 'Default description.') ?>" />
  <meta name="twitter:image"       content="<?= esc($ogImage ?? base_url('images/default-og.png')) ?>" />

  <link rel="canonical" href="<?= esc($ogUrl ?? current_url()) ?>" />
</head>
<body>

Pass OG data from the controller

<?php // app/Controllers/Blog.php

namespace App\Controllers;

use App\Models\PostModel;

class Blog extends BaseController
{
    public function show(string $slug): string
    {
        $postModel = new PostModel();
        $post      = $postModel->where('slug', $slug)->first();

        if (! $post) {
            throw new \CodeIgniter\Exceptions\PageNotFoundException('Post not found');
        }

        $data = [
            'post'           => $post,
            'pageTitle'      => $post['title'],
            'ogTitle'        => $post['title'],
            'ogDescription'  => substr(strip_tags($post['excerpt']), 0, 160),
            'ogImage'        => base_url('uploads/og/' . $post['slug'] . '.png'),
            'ogUrl'          => site_url('blog/' . $post['slug']),
            'ogType'         => 'article',
        ];

        return view('partials/head', $data)
            . view('blog/show', $data)
            . view('partials/footer');
    }
}

Using CodeIgniter 4 View Layouts

CI4 supports a cleaner layout system with renderSection:

<?php // app/Views/layouts/main.php ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title><?= esc($pageTitle ?? 'My App') ?></title>
  <meta property="og:title"       content="<?= esc($ogTitle ?? $pageTitle ?? 'My App') ?>" />
  <meta property="og:description" content="<?= esc($ogDescription ?? '') ?>" />
  <meta property="og:image"       content="<?= esc($ogImage ?? base_url('images/default-og.png')) ?>" />
  <meta property="og:url"         content="<?= esc($ogUrl ?? current_url()) ?>" />
  <meta property="og:type"        content="<?= esc($ogType ?? 'website') ?>" />
  <meta name="twitter:card"       content="summary_large_image" />
  <meta name="twitter:image"      content="<?= esc($ogImage ?? base_url('images/default-og.png')) ?>" />
  <link rel="canonical"           href="<?= esc($ogUrl ?? current_url()) ?>" />
</head>
<body>
  <?= $this->renderSection('content') ?>
</body>
</html>

<?php // app/Views/blog/show.php ?>
<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<article>
  <h1><?= esc($post['title']) ?></h1>
  <?= $post['body'] ?>
</article>
<?= $this->endSection() ?>

Common CodeIgniter OG mistakes

Using relative image URLs — always use base_url() to generate absolute URLs for og:image.
Forgetting to escape output — always use esc() to prevent XSS and broken attributes.
Wrong image size — use 1200×630px for best results across all platforms.
Image stored in private uploads folder — OG images must be publicly accessible via HTTPS. If your uploads are protected, generate a public copy or use a CDN.

Verify your CodeIgniter OG tags

After deploying, paste your URL into OGFixer to see exactly how your CodeIgniter app's link previews appear on Twitter, LinkedIn, Slack, and Discord — and catch missing or broken tags before they go live.