Fix: Missing og:title
When og:title is missing, social platforms scrape your standard HTML <title> tag. This fallback mechanism actively damages your social previews. Your HTML title tag usually contains a brand suffix like | Indxel or - Acme Corp to satisfy search engine display patterns. Social cards have strict truncation limits—Twitter/X truncates titles around 70 characters, while LinkedIn cuts off at 119. If your HTML title is How to configure caching in Next.js 14 | Vercel Documentation, the social fallback wastes 22 characters on the brand suffix. A dedicated og:title strips the SEO boilerplate, letting you ship a punchy, context-optimized title directly to the social graph. Indxel scores this as a warning (weight: 4/100) because while the page won't break, the click-through rate from social shares drops when titles truncate awkwardly.
How do you detect a missing og:title?
Run npx indxel check to scan your local routes and catch missing og:title tags before deployment. The CLI outputs warnings in the same format as ESLint—one line per issue, with the file path and rule ID.
When the crawler hits a page missing an explicit Open Graph title, it flags the og-title rule.
$ npx indxel check
Scanning 47 routes...
app/blog/[slug]/page.tsx
12:2 warning Missing Open Graph title property og-title
12:2 error Missing Open Graph image fallback missing-og-image
app/pricing/page.tsx
8:2 warning Missing Open Graph title property og-title
✖ 3 problems (1 error, 2 warnings)
44/47 pages passThe og-title rule carries a severity weight of 4/100. It will not fail an Indxel CI run by default unless you configure --strict mode, but it degrades the presentation of your links on Twitter, Slack, LinkedIn, and Discord.
How do you fix a missing og:title?
Set the openGraph.title property in your Next.js metadata export, or manually add the <meta property="og:title"> tag if you write plain HTML.
Next.js App Router
Next.js generates Open Graph tags via the openGraph object in your Metadata export. If you only provide a standard title, Next.js outputs a <title> tag but omits <meta property="og:title">.
Here is the anti-pattern. This code forces Twitter and Slack to fall back to the HTML title, including the | Indxel suffix.
// ❌ BAD: No openGraph.title defined. Inherits HTML title with suffix.
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Enterprise SEO Infrastructure | Indxel',
description: 'Automate your technical SEO checks in CI.',
};
export default function Page() {
return <h1>Enterprise</h1>;
}To fix this, define the openGraph.title explicitly. You drop the brand suffix here because social platforms already display your domain name (indxel.com) immediately below the title card.
// ✅ GOOD: Custom og:title optimized for social context.
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Enterprise SEO Infrastructure | Indxel',
description: 'Automate your technical SEO checks in CI.',
openGraph: {
title: 'Enterprise SEO Infrastructure', // Clean, punchy, no suffix
description: 'Automate your technical SEO checks in CI.',
url: 'https://indxel.com/enterprise',
siteName: 'Indxel',
locale: 'en_US',
type: 'website',
},
};
export default function Page() {
return <h1>Enterprise</h1>;
}Next.js Pages Router
If you maintain a legacy Next.js Pages Router application, you likely use next/head or a wrapper like next-seo. You must inject the exact meta tag into the document head.
// ✅ GOOD: Manual meta tag injection in Pages Router
import Head from 'next/head';
export default function Page() {
return (
<>
<Head>
<title>Enterprise SEO Infrastructure | Indxel</title>
<meta property="og:title" content="Enterprise SEO Infrastructure" />
<meta property="og:type" content="website" />
</Head>
<h1>Enterprise</h1>
</>
);
}The Indxel SDK approach
Writing duplicate titles and descriptions for HTML, Open Graph, and Twitter cards violates DRY principles and clutters your route files. The Indxel SDK provides createMetadata to handle the duplication and enforce character limits automatically.
Pass a single title and ogTitle. If you omit ogTitle, the SDK throws a TypeScript error, guaranteeing you never ship a missing Open Graph title.
// ✅ GOOD: Using Indxel SDK for strict validation
import { createMetadata } from '@indxel/sdk/next';
export const metadata = createMetadata({
title: 'Enterprise SEO Infrastructure | Indxel',
// TypeScript enforces this property exists
ogTitle: 'Enterprise SEO Infrastructure',
description: 'Automate your technical SEO checks in CI.',
path: '/enterprise'
});Plain HTML
If you serve static HTML or use a different templating engine, inject the property="og:title" meta tag inside your <head>.
<!-- ✅ GOOD: Standard HTML implementation -->
<head>
<title>Enterprise SEO Infrastructure | Indxel</title>
<meta property="og:title" content="Enterprise SEO Infrastructure">
</head>How do you prevent missing og:titles in CI?
Add npx indxel check --ci to your build pipeline to fail the build or output annotations if a developer merges a page without an og:title.
Relying on developers to remember Open Graph tags scales poorly. CI checks guard your social presence automatically. Because og-title is a warning, you must pass the --strict flag if you want the pipeline to halt, or --fail-on-warnings.
Here is the GitHub Actions implementation:
name: Indxel SEO Guard
on: [push, pull_request]
jobs:
validate-metadata:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install dependencies
run: npm ci
- name: Build Next.js app
run: npm run build
- name: Run Indxel validation
# Fails the build if any errors OR warnings are detected
run: npx indxel check --ci --fail-on-warningsIf you have a large legacy codebase with hundreds of missing og:title tags, do not use --fail-on-warnings immediately. Use npx indxel check --ci --diff. This validates only the routes modified in the current pull request, allowing you to enforce the standard on new code while fixing the backlog incrementally.
What are the common edge cases for og:title?
Dynamic routes fetching null data, Next.js metadata templates applying unwanted suffixes, and unescaped quotes breaking the HTML tag are the three most common failure points.
1. Next.js template inheritance confusion
Next.js supports a title.template property in layout.tsx to automatically append brand suffixes to child routes. Developers often assume this template applies to openGraph.title. It does not.
Next.js deliberately isolates the Open Graph template. If you want a template for your social cards, you must define openGraph.title.template. In most cases, you should leave the Open Graph template undefined to keep social titles clean, but you must still provide the raw openGraph.title string.
// app/layout.tsx
export const metadata: Metadata = {
title: {
template: '%s | Indxel',
default: 'Indxel',
},
openGraph: {
// If you omit this, child routes with ONLY an `openGraph.title` string
// will NOT inherit a suffix. This is usually the desired behavior.
siteName: 'Indxel',
}
};2. Dynamic route data failures
In app/blog/[slug]/page.tsx, you use generateMetadata to fetch the post title from your CMS. If the database query returns null or an empty string, Next.js strips the og:title tag entirely, triggering the Indxel og-title warning.
Always provide a fallback string in dynamic metadata generation.
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await fetchPost(params.slug);
// Guard against null data
const title = post?.title || 'Untitled Post';
return {
title: `${title} | Indxel Blog`,
openGraph: {
title: title, // Explicitly pass the fallback
}
};
}3. Length constraints and truncation
Adding an og:title is useless if it exceeds platform character limits. Twitter/X truncates Open Graph titles around 70 characters. Facebook mobile truncates at 60 characters. Indxel includes a separate rule (og-title-length) to catch strings exceeding 70 characters, but you should manually audit titles that rely on dynamic CMS data.
Which related Indxel rules should you check?
Fixing your Open Graph title is only one part of the social preview payload. Ensure you validate these related rules:
missing-og-image: Validates that anog:imageURL exists and returns a 200 HTTP status.missing-og-description: Checks for a dedicated social description, distinct from the standard SEO meta description.missing-title: Ensures the base HTML<title>tag exists as a final fallback.
FAQ
Is og:title technically required?
No, social platforms fall back to your HTML <title>. But an explicit og:title removes brand suffixes and SEO phrasing, increasing social click-through rates by optimizing for the platform's UI constraints.
Does openGraph.title inherit the Next.js title template?
No, Next.js separates HTML title templates from Open Graph title templates. You must define openGraph.title.template explicitly if you want suffixes applied to your social cards.
Should og:title match the HTML title exactly?
Usually no. HTML titles need brand context (suffixes) for search engine results pages. Open Graph titles appear inside platform UI where the brand is already visible via the domain name or author handle.
What is the maximum length for an og:title?
Keep it under 70 characters. Twitter/X truncates titles around 70 characters, and Facebook cuts off around 60 on mobile devices. Titles exceeding this limit will append an ellipsis (...).
Why does Indxel score this as a warning instead of an error?
Missing og:title does not break the webpage or prevent search engines from crawling it. Indxel reserves "error" severity for issues that cause indexing failures or broken links. This rule targets presentation and conversion metrics.
Frequently asked questions
Is og:title required?
Technically no — platforms fall back to your HTML title. But an explicit og:title lets you write a title optimized for social context, without brand suffixes or SEO-focused phrasing.