Skip to content
View in the app

A better way to browse. Learn more.
ernestdefoe.online

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
ernestdefoe.online

Extensions, themes & support for Flarum and Invision Community

Vibe coding for the community web. Report a bug, request a feature, or dig into the source — this is where the tools you use get built, in the open.

We do custom Bespoke Invision Community apps. If you have an idea for something you want then use the contact form to get in touch with us.

Flarum OG Image - Open Graph and Twitter meta tags

Ernest Defoe
in Flarum

Featured Replies

  • Administrators
  • Community Expert

Flarum OG Image

Floxum

Version

Downloads

Review

License

Automatically adds Open Graph and Twitter Card meta tags to every page of your Flarum 2 forum so that Facebook, Twitter/X, and other platforms generate rich link previews when discussions are shared or auto-posted.

What it does

| Page | Tags generated |

|---|---|

| Discussion | og:title, og:description, og:image, og:url, og:type, article:published_time, Twitter Card |

| Forum index / other pages | og:title, og:description, og:image, og:url, og:type, Twitter Card |

| All pages | og:site_name, fb:app_id (if configured) |

Image selection priority for discussions:

  1. First <img> found in the first post's rendered HTML

  2. Default OG Image configured in Admin → Extensions → OG Image

Requirements

| Dependency | Version |

|---|---|

| PHP | ≥ 8.1 |

| Flarum | ^2.0 |

Installation


php flarum cache:clear```

---

## Configuration

1. Go to **Admin → Extensions → OG Image**
2. Set **Default OG Image URL** — an absolute URL to an image used when a discussion has no embedded images (e.g. your forum banner)
   * Facebook recommends **1200 × 630 px** minimum
   * Must be publicly accessible (no auth required)
3. Set **Facebook App ID** (optional but recommended) — removes the "missing fb:app_id" warning in the Facebook Sharing Debugger
   * Find your App ID at **developers.facebook.com → My Apps → your app → top-left of dashboard**
4. Click **Save Changes**

---

## How it works

The extension hooks into Flarum's server-side document rendering. Before the HTML is sent to the browser, it:

1. Checks the request route — discussions are detected via Flarum's `routeName` attribute or by matching `/d/{id}` in the URL path
2. Loads the discussion and its first post from the database
3. Renders the first post to HTML, strips tags for the description excerpt, and scans for the first `<img>` to use as the OG image
4. Writes `<meta property="og:*">` and `<meta name="twitter:*">` tags into the `<head>`

Because the tags are server-rendered, Facebook's scraper sees them immediately — no JavaScript execution required.

---

## Using with the Facebook Auto-Post extension

Install both extensions. When the Facebook Auto-Post extension posts a discussion URL to your Facebook Page, Facebook scrapes that URL and reads the OG tags this extension provides, producing a rich preview card with the discussion title, excerpt, and image.

---

## Troubleshooting

| Symptom | Likely cause |

|---|---|

| No preview on Facebook | Facebook cached the page before OG tags were present — use the Sharing Debugger to force a re-scrape |

| Preview shows no image | Discussion has no `<img>` in the first post and no default image is configured |

| Default image not showing | URL is not absolute, not publicly accessible, or returns a non-image content type |

| Wrong description | The excerpt is taken from the first post only; BBcode/markdown is stripped |

| "Invalid App ID" warning | You entered your Facebook Page ID instead of your App ID — they are different numbers |

| Image not showing on auto-posted Facebook posts | See **HTTP 206 response** section below |

---

## HTTP 206 response — images not showing on Facebook posts

The Facebook Sharing Debugger reports a **Response Code** for every URL it scrapes. If yours shows **206** instead of **200**, your web server is returning partial content to Facebook's crawler. This means Facebook may not receive the full `<head>` section where OG tags live, causing the image (and other tags) to be missing from link previews.

**This is a web server configuration issue, not a Flarum or extension issue.**

### Nginx

Add to your server block:

```proxy_force_ranges off;```

### Apache

Add to your `.htaccess` or virtual host config:

```BrowserMatch "facebookexternalhit" no-gzip```

### Cloudflare

If your site is proxied through Cloudflare, their edge cache may be serving partial responses. Add a Cache Rule to bypass caching for discussion pages:

1. Cloudflare dashboard → **Rules → Cache Rules**
2. Create a rule matching `fbsfb.com/d/*`
3. Set **Cache Status: Bypass**

After making any of these changes, go to **developers.facebook.com/tools/debug**, paste your discussion URL, and click **Scrape Again**. Confirm the Response Code changes to **200** before testing image previews.

---

## License

MIT © Ernestdefoe

<https://ernestdefoe.online/extension/ernestdefoe/og-image>
  • Quote
    • 2 weeks later...
    • Replies 3
    • Views 42
    • Created
    • Last Reply

    Top Posters In This Topic

    Popular Days

    • Author
    • Administrators
    • Community Expert

    og-image v2.0.7

    Security + conventions hardening from a code audit.

    Changes

    • Privacy fix: A discussion's Open Graph meta tags are now rendered only when the request actor can actually see that discussion (whereVisibleTo). Previously a restricted (tag/group-gated) discussion could leak its title and a first-post excerpt into the page's <meta> tags for guests, crawlers and bots — content the API would refuse them. Restricted/invisible discussions now fall back to the generic forum tags.
    • Read the forum_title setting once instead of twice.
    • Tooling: migrate the admin JS to TypeScript (flarum-tsconfig + tsconfig.json) and remove a dead admin re-export.

    Recommended update for any forum with private or restricted discussions.

    View release on GitHub

  • Quote
    • Ernest Defoe changed the title to Flarum OG Image - Open Graph and Twitter meta tags
    Guest
    Reply to this topic...
    Go to topic listing

    Account

    Navigation

    Search

    Search

    Configure browser push notifications
    Chrome (Android)
    1. Tap the lock icon next to the address bar.
    2. Tap Permissions → Notifications.
    3. Adjust your preference.
    Chrome (Desktop)
    1. Click the padlock icon in the address bar.
    2. Select Site settings.
    3. Find Notifications and adjust your preference.