Coding Agent Integration Guide

Decide whether MyOG fits

Use MyOG

The site has many public pages, and each page already exposes useful title, description, logo, colors, or imagery. The user wants page-specific branded cards without maintaining an image pipeline.

Keep a static image

The page is small, stable, or art-directed and already has an approved 1200×630 asset. Do not use MyOG for localhost, private, authenticated, crawler-blocked, or sensitive pages because MyOG must fetch the public page URL.

Keep account actions with the user

A coding agent does not possess MyOG credentials. Require explicit user action or authorization for signup or login, adding the domain, choosing a trial or plan, and obtaining the public four-character account hint from a signed-in dashboard flow.

The account hint is public in page markup. Get it from the user or a user-authorized signed-in dashboard flow, then include it in a. Do not describe the hint as authentication, billing authorization, or a selector for which account is charged.

Build one image URL

Use the absolute canonical URL of the current public page. Encode it exactly once as the url query parameter. Include the user-supplied hint in a. The optional template parameter should be omitted unless the user selects a layout.

<meta property="og:image" content="https://api.myog.social/og?a=ABCD&amp;url=https%3A%2F%2Fexample.com%2Farticles%2Fhello" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://api.myog.social/og?a=ABCD&amp;url=https%3A%2F%2Fexample.com%2Farticles%2Fhello" />

Build metadata during server rendering or static generation. Use the framework's route data, request URL, canonical helper, or configured production origin. Client-only window.location does not produce reliable crawler-facing metadata.

export async function generateMetadata({ params }) {
  const page = await getPage((await params).slug)
  const canonicalURL = new URL(page.path, "https://example.com")
  const imageURL = new URL("https://api.myog.social/og")
  imageURL.searchParams.set("a", userSuppliedAccountHint)
  imageURL.searchParams.set("url", canonicalURL.toString())

  return {
    alternates: { canonical: canonicalURL },
    openGraph: { url: canonicalURL, images: [imageURL] },
    twitter: { card: "summary_large_image", images: [imageURL] },
  }
}

The existing framework guides cover Next.js, Nuxt, SvelteKit, Astro, Gatsby, Eleventy, Hugo, Rails, Django, Laravel, React Router, CMSs, and site builders.

Remove conflicting tags

Find every existing og:image and twitter:image emitter before editing: shared layouts, SEO components, plugins, framework metadata APIs, and page templates. Replace or disable conflicts so rendered HTML contains one authoritative value for each tag, both pointing to the same MyOG URL.

Preflight the endpoint

curl -sS -o /tmp/myog-body -D /tmp/myog-headers "$MYOG_IMAGE_URL"
cat /tmp/myog-headers

curl -sS -L -o /dev/null \
  -w '%{http_code} %{content_type} %{url_effective}\n' \
  "$MYOG_IMAGE_URL"

Success: a redirect to the generated image; following it must end at a 2xx image response.
HTTP 400 JSON: the url parameter is missing or invalid.
HTTP 404 JSON: the page domain has not been added to MyOG.
HTTP 402 JSON: the matching domain has no account credits available.
Other 4xx/5xx: inspect the response before changing the integration; generation and upstream failures have their own errors.

Verify the deployed page

1. Fetch the public page and inspect crawler-visible rendered HTML, not only the browser DOM.
2. Confirm the canonical URL is absolute and correct for that page.
3. Confirm one og:image and one twitter:image use the same MyOG URL and the user-supplied hint.
4. Fetch that exact image URL again and require a final 2xx image response with an image content type.