Skip to content

Add og:image:type meta tag to social cards#1337

Open
IEvangelist wants to merge 1 commit into
mainfrom
dapine/og-image-type-meta
Open

Add og:image:type meta tag to social cards#1337
IEvangelist wants to merge 1 commit into
mainfrom
dapine/og-image-type-meta

Conversation

@IEvangelist

Copy link
Copy Markdown
Member

Summary

Adds the optional og:image:type Open Graph meta tag to every page's social card so crawlers can validate and decode the image by its advertised MIME type without content sniffing.

<meta property="og:image:type" content="image/png" />

Details

OG image tags on aspire.dev are generated (Astro + Starlight), not hardcoded per page, so the fix lives in the metadata pipeline:

  • src/utils/page-metadata.ts — added an imageType field to OgMetadata and a resolveOgImageType() helper that infers the MIME type from the resolved og:image URL extension. Defaults to image/png (covering the dynamic /og/<slug>.png cards and the /og-image.png fallback) and also maps jpeg/webp/gif/svg/avif for any ogImage frontmatter override. Case-insensitive; ignores query strings and fragments.
  • src/components/starlight/Head.astro — emits <meta property="og:image:type" content={ogMetadata.imageType} /> immediately after og:image.
  • config/head.attrs.ts — updated the doc comment listing the per-page OG tags.

Tests

  • Unit (tests/unit/page-metadata.vitest.test.ts) — new resolveOgImageType suite (extension mapping, case-insensitivity, query/fragment handling, unknown/missing-extension fallback) plus getOgMetadata assertions for PNG and a non-PNG override.
  • E2E (tests/e2e/og-metadata.spec.ts) — asserts og:image:type = image/png on the dynamic-card and sample pages.

Emit og:image:type so crawlers can validate/decode the OG image without content sniffing. The MIME type is inferred from the resolved og:image URL extension (defaulting to image/png), covering the dynamic /og/<slug>.png cards, the /og-image.png fallback, and any non-PNG ogImage frontmatter override.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings July 7, 2026 15:44

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds support for the optional Open Graph meta tag og:image:type across aspire.dev’s generated social metadata so crawlers can interpret the image MIME type without sniffing.

Changes:

  • Extend the OG metadata pipeline with an imageType field and a resolveOgImageType() helper that infers MIME type from the og:image URL (defaulting to image/png).
  • Emit <meta property="og:image:type" ...> in the Starlight head wrapper alongside existing og:image tags.
  • Add unit and e2e coverage to validate the inferred MIME type and emitted meta tag.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/frontend/src/utils/page-metadata.ts Adds OgMetadata.imageType and resolveOgImageType(); wires imageType into getOgMetadata().
src/frontend/src/components/starlight/Head.astro Emits the og:image:type meta tag next to og:image.
src/frontend/config/head.attrs.ts Updates the documentation comment listing dynamically emitted per-page OG tags.
src/frontend/tests/unit/page-metadata.vitest.test.ts Adds unit tests for MIME-type inference and getOgMetadata().imageType.
src/frontend/tests/e2e/og-metadata.spec.ts Adds e2e assertions that og:image:type is present and image/png for key pages.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@aspire-repo-bot

Copy link
Copy Markdown
Contributor

Frontend HTML artifact ready

The latest frontend build uploaded the frontend-dist artifact for PR #1337. Use the VS Code button below to open this PR with GitHub Artifacts Explorer and browse the built HTML locally.

VS Code: Open PR #1337 artifacts

This comment updates automatically when a new frontend build artifact is uploaded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants