Should og:title match the HTML title exactly?
The two titles can vary for social context, but they should identify the same page and promise. Keep the subject stable and test generated previews before publishing.
Written for a publisher or Next.js developer aligning search metadata with social and messaging previews for articles and tools.
Key facts
- Google lists `og:title` among the sources it may use when generating title links.
- The HTML title and Open Graph title should describe the same canonical page.
- Next.js metadata can inherit or merge across layouts, so production output needs direct verification.
A useful rule: make each important claim understandable and verifiable without requiring the reader to reconstruct your meaning from the rest of the page.
What job does each title perform?
The HTML title identifies the document in browser tabs and supplies a major input for search title links. `og:title` identifies the document in Open Graph previews used by social networks, messaging apps, and other consumers. These contexts have different surrounding information. A search result may already show a site name, while a shared card may need a little more self-contained context. Exact equality is not required for accuracy. Both titles should name the same entity, answer, and canonical page. If one promises a free calculator and the other promises a pricing comparison, the problem is content mismatch rather than formatting.
- Write the page subject and promise before drafting either title.
- Keep product names, locations, dates, and version numbers consistent.
- Remove promotional claims that the visible page cannot support.
Use variation only when the context benefits
A social title can omit site boilerplate or add a short audience cue when the preview otherwise lacks context. An article titled “Why Google chose a different canonical URL” might use the same Open Graph title because it already stands alone. A tool titled “Canonical checker | bumpit” might use “Check conflicting canonical signals” in a social card when that wording accurately describes the visible output. Keep variation purposeful and small. Do not create sensational social wording that produces a different expectation after the click. The opening H1 and description should confirm the same task immediately.
- Prefer exact reuse when the HTML title already works without search-result context.
- Add only the context that a standalone shared card genuinely lacks.
- Read the title, description, and image together to remove repeated or conflicting claims.
Sources: 1
Check framework inheritance and templates
Next.js can define metadata in layouts, pages, `generateMetadata`, and file conventions. A child route may inherit an Open Graph image or description while replacing only the title. Title templates can also append the brand to HTML output while a manually written `og:title` already contains it. Inspect the final `<head>` on the production route and require one expected value for each field. Do not infer output from the nearest source file. Dynamic metadata should use the same article record as the visible page, and `metadataBase` should resolve relative social URLs against the production origin.
- Fetch the built page and extract title, `og:title`, description, canonical, and image.
- Test a static route and a dynamic blog slug because inheritance can differ.
- Keep preview and production hosts from changing the canonical identity.
Sources: 2
Align social images and alt text
A preview title works with its image, not in isolation. Use an image that represents the article or tool and provide descriptive alt text through the appropriate metadata. Avoid putting a second unrelated slogan in the image while the title names the actual guide. If the image contains essential text, repeat the information in accessible page content because image text is not a substitute for the article answer. For generated Open Graph images, test long titles, punctuation, and mobile preview crops. Keep the canonical URL and image URL absolute and available to preview crawlers.
- Use one representative image rather than a generic decorative card for every topic.
- Keep image alt text descriptive without copying the full title mechanically.
- Verify the image response, dimensions, content type, and public accessibility.
Sources: 2
Verify search and social output separately
Search engines can rewrite title links, and social platforms can cache preview metadata. Test the live HTML first, then use platform preview tools or a fresh share target where available. If a card remains stale, confirm the platform's refresh method before changing page metadata again. In Search, compare the displayed title with the page's visible hierarchy and link labels. Judge both surfaces by accurate expectation and qualified visits, not exact string control. A small intentional variation can help context; a large mismatch splits the page into two competing promises. Record the tested URL so later audits compare the same canonical document.
- Save screenshots and timestamps for representative search and share previews.
- Keep metadata stable while external caches and search processing catch up.
- Track whether visitors reach the intended page and complete the expected next action.
Put it to work
Find the highest-impact fix on your site.
Inspect the live HTML title, Open Graph title, H1, canonical, description, and preview-image metadata together.
Compare search and social titlesSources
- 1.Google Search Central: Influencing title linksChecked 2026-07-26
- 2.Next.js documentation: generateMetadataChecked 2026-07-26