# Integrate MyOG.social with a website

Use MyOG when a public site has many pages and would benefit from a branded social image generated from each page's existing title, description, logo, colors, and imagery. Keep an existing static 1200×630 image for a small, stable, or art-directed page. Do not use MyOG for localhost, private, authenticated, crawler-blocked, or sensitive pages because MyOG must fetch the public page URL.

## Required user authorization

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

The account hint is public in page markup. Obtain it from the user or through a user-authorized signed-in dashboard flow, then include it in the `a` query parameter. Do not describe the hint as authentication, billing authorization, or a selector for which account is charged. Do not alter account routing, domain matching, credit selection, or billing behavior.

## Image URL contract

Construct one image URL from the absolute canonical URL of the current public page:

```text
https://api.myog.social/og?a=ABCD&url=https%3A%2F%2Fexample.com%2Farticles%2Fhello
```

- `a`: the user-supplied four-character public account hint
- `url`: the absolute canonical current-page URL, encoded once as a query parameter
- `template`: optional layout choice; omit it unless the user selects one

Use the same final URL in one `og:image` tag and one `twitter:image` tag:

```html
<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 canonical URL, route data, request URL, or configured production origin. Do not use client-only `window.location` for crawler-facing tags. Use `URL` and `URLSearchParams` or the framework's equivalent so the page URL is encoded exactly once.

Before adding tags, find every existing `og:image` and `twitter:image` emitter: shared layouts, SEO components, plugins, framework metadata APIs, and page templates. Replace or disable conflicting emitters so rendered HTML has one authoritative value for each tag.

## Preflight and verification

Preflight the exact public image URL before changing the page:

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

Current behavior:

- success returns an HTTP redirect to the generated image; follow it and require a successful image response;
- missing or invalid `url` returns HTTP 400 JSON;
- a domain not added to MyOG returns HTTP 404 JSON;
- a matching domain with no account credits available returns HTTP 402 JSON;
- generation or upstream failures can return other 4xx/5xx errors.

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

After deployment, fetch the public page as HTML. Confirm its canonical URL is correct, the two image tags contain the same MyOG URL, the account hint is the user-supplied value, and there are no duplicate/conflicting image tags. Fetch the image URL from the rendered HTML again and require a final 2xx image response.

Framework-specific examples: https://myog.social/docs

Canonical agent guide: https://myog.social/docs/agents