docs: add opengraph meta tags

[setchy]

Changes

Add OpenGraph Meta Tags to mkdocs site, used for social cards

Context

Resolves discussion suggestion #31965

Please select one of the following:

• This closes an existing Issue, Closes: #
• This doesn't close an Issue, but I accept the risk that this PR may be closed if maintainers disagree with its opening or implementation

AI assistance disclosure

Did you use AI tools to create any part of this pull request?

Please select one option and, if yes, briefly describe how AI was used (e.g., code, tests, docs) and which tool(s) you used.

• No — I did not use AI for this contribution.
• Yes — minimal assistance (e.g., IDE autocomplete, small code completions, grammar fixes).
• Yes — substantive assistance (AI-generated non‑trivial portions of code, tests, or documentation).
• Yes — other (please describe):

Documentation (please check one with an [x])

• I have updated the documentation, or
• No documentation update is required

How I've tested my work (please select one)

I have verified these changes via:

• Code inspection only, or
• Newly added/modified unit tests, or
• No unit tests, but ran on a real repository, or
• Both unit tests + ran on a real repository

The public repository:

[setchy]

Verification would be best done via a preview site deployment of this branch

[RahulGautamSingh]

The og:title uses page.title, but Material's <title> block prefers the front-matter title: (page.meta.title). On pages where the first H1 differs from the front-matter title, the social preview title won't match the browser tab.

Reproduced locally via pnpm mkdocs serve + ngrok → Slack unfurl:

Mirror Material's own html-title logic (front-matter title → page title → site name):

{% set og_title = ((page.meta.title if page and page.meta and page.meta.title else page.title) ~ ' - ' ~ config.site_name) if page and (page.title or (page.meta and page.meta.title)) else config.site_name %}

[setchy]

Thanks for testing!

With your reproduction, isn't that how the current prod site behaves? I'm not sure that's social cards (at least not the same richness other sites unfurl to)

[RahulGautamSingh]

Small cards are still an improvement over prod (which has no og tags i.e. LinkedIn/Discord get nothing today)

For bigger social cards, we would need to host a bigger banner 1200*630 which needs to be designed I assume .. @jamietanna wdyt

Also worh mentioning, a static banner means every page shares the same image. Per-page images (like GitHub's auto-generated cards) need a card-generator plugin .. Material has mkdocs-material[imaging] for exactly this, but it's a bigger change and not sure we want that.

[setchy]

Small cards are still an improvement over prod (which has no og tags i.e. LinkedIn/Discord get nothing today)

I just re-tested the current state

Slack

Discord

Based on the testing you did @RahulGautamSingh - i'm not noticing a difference with the og tags on this branch 🤔

[RahulGautamSingh]

In current main, we don't use og tags so the titles you see are pulled from html title. After your changes merge og title will be used. And, in some pages og:title (H1) ≠ browser-tab title (configuration-options doc being one example)