Open Graph Generator

Generated 8 Open Graph tag(s) with 0 finding(s).

How it works

• Read the page identity fields.
• Validated the type against the documented Open Graph types and the URL/image as absolute URLs.
• Emitted the required and supplied optional tags with escaped attribute values.

• og:title, og:type, og:url and og:image are required by the Open Graph protocol.

Methodology

1. Collect the required properties and any supplied optional ones.
2. Validate og:type against the documented set and the URL/image as absolute URLs.
3. Emit one <meta property=...> line per property, escaping attribute values.

Usage

1. Enter the page title and choose an og:type.
2. Enter the absolute page URL and image URL.
3. Optionally add a description, site name, locale and image alt text.
4. Generate and copy the meta tags into the page head.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

An article page

{
  "title": "How canonical URLs work",
  "type": "article",
  "url": "https://gampangin.example/articles/canonical-urls/",
  "image": "https://gampangin.example/img/canonical-cover.png",
  "description": "A practical guide to rel=canonical and duplicate URLs.",
  "siteName": "Gampangin",
  "locale": "en_US",
  "imageAlt": "A canonical URL diagram"
}

A website home page

{
  "title": "Gampangin developer tools",
  "type": "website",
  "url": "https://gampangin.example/",
  "image": "https://gampangin.example/img/og-home.png"
}

Limitations

Open Graph and social previews

Open Graph tags describe the page to social platforms, which choose a title, description and image for the shared link. Missing required properties makes the preview less predictable.

Use a representative og:image at roughly 1200x630 and an og:image:alt so the image is meaningful when it cannot be seen.