Skip to content

Add Open Graph meta tags and OG image #29

Description

@mickdarling

Why

When this site's URL is pasted into LinkedIn, Slack, iMessage, Discord, or Twitter / X, those platforms read Open Graph meta tags from the HTML head to render the preview card (image, title, description). Right now this site has no OG tags, so links show as a bare URL with no context.

This is showing up in real-world sharing right now. Dollhouse Research is in the middle of a daily LinkedIn series sharing these URLs publicly, and the cards are not rendering with anything useful. Fix is overdue.

What's needed

1. Open Graph image asset

Create or designate a 1200x630 PNG (the LinkedIn / Facebook / Slack standard). Should:

  • Show the product name and a short tagline
  • Use brand colors and the product logo
  • Be readable at small thumbnail size on mobile
  • Live at a stable URL on the site (recommend /og-image.png)

Existing assets for this product: MCPAQL has a logo on the live site at MCPAQL.com. Pull from there as the source for the 1200x630 OG image. Pair with the canonical tagline.

2. Meta tags in HTML head

Add the following to every page (or at minimum the home page). Use the exact og:title and og:description language below; don't reinvent.

<!-- Open Graph (Facebook, LinkedIn, Slack, Discord) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://MCPAQL.com">
<meta property="og:title" content="MCPAQL: a semantic protocol layer for MCP">
<meta property="og:description" content="Compresses tool definitions by 85 to 96 percent. Tells the LLM what an operation means, not just how to call it. Open standard with a public draft and full spec.">
<meta property="og:image" content="https://MCPAQL.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="MCPAQL">

<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MCPAQL: a semantic protocol layer for MCP">
<meta name="twitter:description" content="Compresses tool definitions by 85 to 96 percent. Tells the LLM what an operation means, not just how to call it. Open standard with a public draft and full spec.">
<meta name="twitter:image" content="https://MCPAQL.com/og-image.png">

<!-- Generic SEO basics while we're here -->
<meta name="description" content="Compresses tool definitions by 85 to 96 percent. Tells the LLM what an operation means, not just how to call it. Open standard with a public draft and full spec.">

3. Per-page overrides

If the site has multiple pages, set per-page og:title, og:description, and ideally per-page og:image so deep links to specific pages render with relevant previews.

Acceptance criteria

Source of truth for og:title and og:description

The canonical product copy lives in the marketing repo at config/product-descriptions.md. og:title and og:description above are pulled from there. If the canonical changes, update both the file and these deployed meta tags so they stay in sync.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions